@use '../utils' as *;

/*=============================
    00. Scroll Top
===============================*/
.scroll__top {
	@include square-box(40px);
	position: fixed;
	bottom: -10%;
	right: 50px;
	font-size: 16px;
	border-radius: 4px;
	z-index: 5;
	color: var(--tg-color-white-default);
	text-align: center;
	cursor: pointer;
	background: var(--tg-theme-primary);
	transition: 1s ease;
	border: none;
    @media #{$lg} {
        right: 25px;
        bottom: 25px;
    }
    @media #{$md} {
        right: 30px;
    }
    @media #{$xs} {
        right: 15px;
        @include square-box(30px);
    }
    &.open {
        bottom: 30px;
        @media #{$xs} {
            bottom: 15px;
        }
    }
    &::after {
        position: absolute;
        z-index: -1;
        content: '';
        top: 100%;
        left: 5%;
        height: 10px;
        width: 90%;
        opacity: 1;
        background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%);
    }
    &:hover {
        background: var(--tg-theme-secondary);
        color: var(--tg-color-white-default);
    }
}