@use "../abstracts/index" as *;

.tf-btn {
    @include transition3;
    background-color: var(--dark);
    border: 1px solid var(--dark);
    color: var(--white);
    padding: 13px 32px;
    border-radius: 99px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    .icon {
        font-size: 16px;
    }
    &.hover-icon {
        &:hover {
            .icon {
                animation: 0.3s link-icon linear;
            }
        }
    }
    &.hover-icon-2 {
        gap: 0px;
        .icon {
            transform: scale(0);
            @include transition3;
            color: var(--white);
            width: 0;
        }
        &:hover {
            .icon {
                transform: scale(1);
                width: 14px;
                margin-left: 10px;
            }
        }
        &.btn-cls {
            .icon {
                font-size: 12px;
            }
        }
    }
    &.btn-primary {
        background-color: var(--primary);
        color: var(--white);
        border-color: var(--primary);
    }
    &.btn-out-line-primary {
        background-color: transparent;
        border-color: var(--primary);
        color: var(--primary);
        &:hover {
            background-color: var(--primary);
            color: var(--white);
            border-color: var(--primary);
        }
    }
    &.btn-out-line-white {
        background-color: transparent;
        border-color: var(--white);
        color: var(--white);
        &:hover {
            background-color: var(--primary);
            color: var(--white);
            border-color: var(--primary);
        }
    }
    &.btn-out-line-dark {
        background-color: transparent;
        border-color: var(--dark);
        color: var(--dark);
        &:hover {
            background-color: var(--dark);
            color: var(--white);
            border-color: var(--dark);
        }
    }
    &.btn-out-line-dark-2 {
        background-color: transparent;
        border-color: var(--dark-2);
        color: var(--dark-2);
        &:hover {
            background-color: var(--dark-2);
            color: var(--white);
            border-color: var(--dark-2);
        }
    }
    &.btn-out-line-green {
        background-color: transparent;
        border-color: #108066;
        color: #108066;
        &:hover {
            background-color: #16423c;
            color: var(--white);
            border-color: #16423c;
        }
    }
    &.btn-out-line-yellow {
        background-color: transparent;
        border-color: #b99f4a;
        color: #b99f4a;
        &:hover {
            background-color: #b99f4a;
            color: var(--white);
            border-color: #b99f4a;
        }
    }
    &.btn-white {
        color: var(--dark);
        background-color: var(--white);
        border-color: var(--white);
    }
    &.btn-yellow {
        color: var(--white);
        background-color: #b99f4a;
        border-color: #b99f4a;
    }
    &.btn-green {
        color: var(--white);
        background-color: #496048;
        border-color: #496048;
    }
    &.btn-green-2 {
        color: var(--white);
        background-color: #16423c;
        border-color: #16423c;
    }
    &.btn-blue {
        color: var(--dark);
        background-color: #cae0e8;
        border-color: #cae0e8;
    }
    &.btn-blue-2 {
        color: var(--white);
        background-color: #4378ff;
        border-color: #4378ff;
    }
    &.btn-orange {
        color: var(--white);
        background-color: #ca790b;
        border-color: #ca790b;
    }
    &.btn-orange-2 {
        color: var(--white);
        background-color: #f77904;
        border-color: #f77904;
    }
    &.btn-orange-3 {
        color: var(--white);
        background-color: #fa7827;
        border-color: #fa7827;
    }
    &.btn-outline-orange {
        color: #fa7827;
        border: 1px solid #fa7827;
        background-color: transparent;
        &:hover {
            background-color: #fa7827;
            border-color: #fa7827;
            color: var(--white);
        }
    }

    &.hover-primary {
        &:hover {
            background-color: var(--primary);
            color: var(--white);
            border-color: var(--primary);
        }
    }

    &.hover-dark {
        &:hover {
            background-color: var(--dark);
            color: var(--white);
            border-color: var(--dark);
        }
    }
    &.hover-green {
        &:hover {
            background-color: #b99f4a;
            color: var(--white);
            border-color: #b99f4a;
        }
    }
    &.btn-line {
        border: none;
        background: transparent;
        padding: 0px;
        color: var(--dark);
        justify-content: unset;
        width: max-content;
        position: relative;
        gap: 6px;
        .icon {
            display: flex;
        }
        i {
            font-size: 12px;
        }
        &:hover {
            color: var(--primary);
            &::after {
                left: 0;
                right: auto;
                width: 100%;
            }
        }
        &::after {
            content: "";
            position: absolute;
            bottom: 2px;
            left: auto;
            right: 0;
            width: 0%;
            height: 1px;
            background-color: var(--primary);
            @include transition3;
        }
    }
    &.btn-line-dark {
        border: none;
        background: transparent;
        padding: 0px;
        color: var(--dark);
        justify-content: unset;
        width: max-content;
        position: relative;
        gap: 6px;
        .icon {
            display: flex;
        }
        i {
            font-size: 12px;
        }
        &:hover {
            color: var(--primary);
            &::after {
                background-color: var(--primary);
            }
        }
        &::after {
            content: "";
            position: absolute;
            bottom: 0px;
            left: 0;
            right: auto;
            width: 100%;
            height: 1px;
            background-color: var(--dark);
            @include transition3;
        }
    }
    &.btn-line-white {
        border: none;
        background: transparent;
        padding: 0px;
        color: var(--white);
        justify-content: unset;
        width: max-content;
        position: relative;
        gap: 6px;
        .icon {
            display: flex;
        }
        i {
            font-size: 12px;
        }
        &:hover {
            color: var(--primary);
            &::after {
                background-color: var(--primary);
            }
        }
        &::after {
            content: "";
            position: absolute;
            bottom: 0px;
            left: 0;
            right: auto;
            width: 100%;
            height: 1px;
            background-color: var(--white);
            @include transition3;
        }
    }
    &.btn-outline-brown {
        color: #a47551;
        border: 1px solid #a47551;
        background-color: transparent;
        &:hover {
            border-color: #252525;
            background-color: #252525;
            color: var(--white);
        }
    }
    &.hover-shadow {
        &:hover {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            transform: translateY(-2px);
        }
    }
    &.btn-out-line-dark2 {
        background-color: transparent;
        border: 1px solid var(--dark-2);
        color: var(--dark-2);
        &:hover {
            background-color: var(--dark-2);
            color: var(--white);
        }
    }
    &.btn-dark2 {
        background-color: var(--dark-2);
        color: var(--white);
        border: 1px solid var(--dark-2);
    }
    &.btn-dark3 {
        background-color: var(--text-2);
        color: var(--white);
        border: 1px solid var(--text-2);
    }
    &.btn-red {
        background-color: #df3c01;
        color: var(--white);
        border: 1px solid #df3c01;
    }
    &.btn-sold-out {
        opacity: 0.8;
    }
    &.btn-small {
        padding: 9px 27px;
    }
    &.btn-space1 {
        padding-left: 30px;
        padding-right: 15px;
        gap: 16px;
        .icon {
            font-size: 20px;
        }
    }
}
.btn-out-stock {
    opacity: 0.5;
}

.animate-btn {
    position: relative;
    overflow: hidden;
    &:hover {
        &::after {
            animation: shine-reverse 1s forwards;
        }
    }
}
.animate-btn:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0) 30%,
        rgba(255, 255, 255, 0.8),
        rgba(255, 255, 255, 0) 70%
    );
    top: 0;
    left: -100%;
    opacity: 0.6;
    // animation: shine-forward  1s forwards;
}

button.animate-btn::after,
.animate-btn.tf-btn::after {
    background-image: linear-gradient(120deg, rgba(0, 0, 0, 0) 20%, rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0) 70%);
}
.animate-btn.animate-dark::after {
    background-image: linear-gradient(90deg, transparent, rgb(0 0 0 /0.25), transparent);
}

@keyframes shine-forward {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

@keyframes shine-reverse {
    0% {
        left: 100%;
    }
    100% {
        left: -100%;
    }
}

.effect-flash {
    position: relative;
    overflow: hidden;
    &::after {
        background-image: linear-gradient(90deg, transparent, var(--white), transparent);
        content: "";
        left: 150%;
        position: absolute;
        top: 0;
        bottom: 0;
        transform: skew(-20deg);
        width: 200%;
        animation: 3s cubic-bezier(0.01, 0.56, 1, 1) infinite erFlashEffect;
        opacity: 0.7;
    }
}
@keyframes erFlashEffect {
    100%,
    20% {
        left: -200%;
    }
}

.btn-sidebar {
    display: none;
    position: fixed;
    top: 30%;
    z-index: 100;
    width: max-content;
    &.left {
        left: 0;
    }
    &.right {
        right: 0;
    }
    button {
        width: 48px;
        height: 48px;
        display: flex;
        border: 0;
        align-items: center;
        justify-content: space-between;
        background-color: var(--white);
        box-shadow: var(--shadow-1);
        border-radius: 0 4px 4px 0px;
        padding: 10px;
        .icon {
            font-size: 20px;
            color: var(--dark);
        }
    }
    .type-hover {
        gap: 10px;
        width: 40px;
        .text {
            display: none;
            font-size: 14px;
            line-height: 20px;
            font-weight: 400;
            color: var(--dark);
        }
        &:hover {
            width: max-content;

            .text {
                display: block;
            }
        }
    }
}
.btn-quickview {
    &.style-default {
    }
}

.tf-loading {
    font-size: 14px;
    line-height: 20px;
    width: auto;
    height: 42px;
    min-width: 118px;
    padding: 10px;
    &.loadmore {
        .spinner-circle {
            display: none;
        }
        &.loading {
            .spinner-circle {
                display: block;
            }
            .text {
                display: none;
            }
        }
        &:hover {
            .spinner-child {
                &::before {
                    background-color: var(--white);
                }
            }
        }
        .spinner-child {
            &::before {
                background-color: var(--dark);
            }
        }
    }
}
.spinner-circle {
    width: 24px;
    height: 24px;
    position: relative;
    .spinner-child {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        &::before {
            content: "";
            display: block;
            margin: 0 auto;
            width: 20%;
            height: 20%;
            background-color: var(--white);
            border-radius: 100%;
            -webkit-animation: spinner-circleBounceDelay 1s infinite ease-in-out both;
            animation: spinner-circleBounceDelay 1s infinite ease-in-out both;
        }
    }
    .spinner-circle2 {
        -webkit-transform: rotate(40deg);
        -ms-transform: rotate(40deg);
        transform: rotate(40deg);
        &::before {
            -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s;
        }
    }
    .spinner-circle3 {
        -webkit-transform: rotate(80deg);
        -ms-transform: rotate(80deg);
        transform: rotate(80deg);
        &::before {
            -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s;
        }
    }
    .spinner-circle4 {
        -webkit-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
        transform: rotate(120deg);
        &::before {
            -webkit-animation-delay: -0.7s;
            animation-delay: -0.7s;
        }
    }
    .spinner-circle5 {
        -webkit-transform: rotate(160deg);
        -ms-transform: rotate(160deg);
        transform: rotate(160deg);
        &::before {
            -webkit-animation-delay: -0.6s;
            animation-delay: -0.6s;
        }
    }
    .spinner-circle6 {
        -webkit-transform: rotate(200deg);
        -ms-transform: rotate(200deg);
        transform: rotate(200deg);
        &::before {
            -webkit-animation-delay: -0.5s;
            animation-delay: -0.5s;
        }
    }
    .spinner-circle7 {
        -webkit-transform: rotate(240deg);
        -ms-transform: rotate(240deg);
        transform: rotate(240deg);
        &::before {
            -webkit-animation-delay: -0.4s;
            animation-delay: -0.4s;
        }
    }
    .spinner-circle8 {
        -webkit-transform: rotate(280deg);
        -ms-transform: rotate(280deg);
        transform: rotate(280deg);
        &::before {
            -webkit-animation-delay: -0.3s;
            animation-delay: -0.3s;
        }
    }
    .spinner-circle9 {
        -webkit-transform: rotate(320deg);
        -ms-transform: rotate(320deg);
        transform: rotate(320deg);
        &::before {
            -webkit-animation-delay: -0.2s;
            animation-delay: -0.2s;
        }
    }
}

@-webkit-keyframes spinner-circleBounceDelay {
    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes spinner-circleBounceDelay {
    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.btn-underline {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: var(--dark);
    @include transition3;
    background: linear-gradient(to right, var(--primary) 50%, var(--dark) 50%);
    background-size: 200% 100%;
    background-position: right;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background-position 0.3s linear;
    position: relative;
    &:hover {
        background-position: left;
        &::before {
            width: 100%;
        }
    }
    &::after {
        position: absolute;
        content: "";
        left: 0;
        bottom: 4px;
        right: 0;
        height: 1px;
        background-color: var(--dark);
        @include transition3;
    }
    &::before {
        position: absolute;
        content: "";
        left: 0;
        width: 0;
        bottom: 4px;
        height: 1px;
        background-color: var(--primary);
        transition: width 0.3s linear;
        z-index: 1;
    }
}
.tf-btn-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    @include flex(center, center);
    @include transition3;
    i {
        @include transition3;
    }
    &:hover {
        i {
            transform: rotate(45deg);
        }
    }
}