@use '../utils' as *;

/*=============================
    10. Scroll Top
===============================*/
.scroll__top {
	width: 50px;
    height: 50px;
    @include flexbox();
    align-items: center;
    justify-content: center;
    line-height: 0;
	position: fixed;
	bottom: -10%;
	right: 50px;
	font-size: 16px;
	border-radius: 0;
	z-index: 99;
    color: var(--td-common-white);
	text-align: center;
	cursor: pointer;
	background: var(--td-theme-primary);
	transition: 1s ease;
    border-radius: 50%;
    @media #{$lg} {
        right: 25px;
        bottom: 25px;
    }
    @media #{$md} {
        right: 30px;
    }
    @media #{$xs} {
        right: 15px;
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
    &.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(--td-theme-secondary);
        color: var(--td-common-white);
    }
}