/* button primary blue */
.btn-primary-blue {
    a {
        color: var(--white1);
    }
    .btn-component {
        display: flex;
        gap: 8px;
        height: 50px;
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
        align-items: center;
        padding: 0 32px;
        background: var(--blue1);
        border-radius: 8px;
        transition: all 0.4s ease;
    }
    .btn-component:hover {
        background: var(--hoverBlue1);
    }
    .btn-icon {
        width: 24px;
        height: 24px;
    }
    .btn-icon svg {
        height: 24px;
        width: 24px;
    }
    .btn-component.disabled {
        pointer-events: none;
        background: var(--greyBackground1);
        color: var(--greyText1);
    }
}
/* button primary yellow */
.btn-primary-yellow {
    a {
        color: var(--black1);
    }
    .btn-component {
        display: flex;
        gap: 8px;
        height: 50px;
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
        align-items: center;
        padding: 0 24px;
        background: var(--yellow1);
        border-radius: 8px;
        transition: all 0.4s ease;
    }
    .btn-component:hover {
        background: var(--hoverYellow1);
    }
    .btn-icon {
        width: 24px;
        height: 24px;
    }
    .btn-icon svg {
        height: 24px;
        width: 24px;
    }
}
/* button primary white */
.btn-primary-white {
    a {
        color: var(--blue1);
    }
    .btn-component {
        display: flex;
        gap: 8px;
        height: 50px;
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
        align-items: center;
        padding: 0 32px;
        background: var(--white1);
        border-radius: 8px;
        transition: all 0.4s ease;
    }
    .btn-component:hover {
        background: var(--greyBorder1);
    }
    .btn-icon {
        width: 24px;
        height: 24px;
    }
    .btn-icon svg {
        height: 24px;
        width: 24px;
    }
    .btn-component.loading {
        background: var(--white1);
        position: relative;
        pointer-events: none;
    }
    .btn-component.loading::after {
        border-color: var(--blue1);
        border-top-color: rgba(42, 55, 94, 0.3);
    }
}
/* basket */
.btn-basket {
    background: var(--blue1);
    border-radius: 8px;
    height: 50px;
    transition: all 0.4s ease;

    a {
        height: 100%;
        display: flex;
        align-items: center;
        padding: 0px 24px;
        color: var(--white1);
    }

    span.not-in-stock {
        height: 100%;
        display: flex;
        align-items: center;
        padding: 0px 24px;
        color: var(--greyText1);
    }
}
.btn-basket:hover {
    background: var(--hoverBlue1);
}

.btn-basket:has(span.not-in-stock) {
    background: var(--greyBackground1);
    pointer-events: none;
}

/* button secondary line */
.btn-secondary-line {
    a {
        color: var(--white1);
    }
    .btn-component {
        display: flex;
        gap: 8px;
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
        height: 50px;
        align-items: center;
        justify-content: center;
        padding: 0 32px;
        border: 1px solid var(--white1);
        background: var(--blue1);
        border-radius: 8px;
        transition: all 0.4s ease;
    }
    .btn-component:hover {
        background: var(--white1);
        color: var(--blue1);
    }
    /* .btn-component.loading {
        background: #FFFFFF;
        position: relative;
        pointer-events: none;
        transform: translateZ(0);
        will-change: background;
    }
    .btn-component.loading::after {
        border-color: var(--blue1);
        border-top-color: rgba(42, 55, 94, 0.3);
    } */
}

/* loading */
.btn-basket .loading,
.single_add_to_cart_button.loading,
.btn-component.loading,
.btn-secondary-line .loading,
#newsletter_subscribe.loading,
.btn-component.loading span {
    color: transparent;
    position: relative;
    pointer-events: none;
}
.btn-basket .loading::after,
.single_add_to_cart_button.loading::after,
.btn-component.loading::after,
.btn-secondary-line .loading::after,
#newsletter_subscribe.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--white1);
    border-top-color: rgba(255, 255, 255, 0.3);
    -webkit-animation: load 1s linear infinite;
            animation: load 1s linear infinite;
}
.account-address-title .primary-blue-btn.loading::before {
    display: none;
}
#newsletter_subscribe.loading img {
    opacity: 0;
}
@-webkit-keyframes load {
    100% {
        transform: translate(-50%, -50%) rotate(1turn);
    }
}
@keyframes load {
    100% {
        transform: translate(-50%, -50%) rotate(1turn);
    }
}

/* responsive */
@media (max-width: 767px) {
    /* button primary blue */
    .btn-primary-blue {
        .btn-component {
            height: 45px;
        }
        .btn-icon {
            height: 20px;
            width: 20px;
        }
        .btn-icon svg {
            height: 20px;
            width: 20px;
        }
    }
    /* button primary yellow */
    .btn-primary-yellow {
        .btn-component {
            height: 45px;
        }
        .btn-icon {
            height: 20px;
            width: 20px;
        }
        .btn-icon svg {
            height: 20px;
            width: 20px;
        }
    }
    /* button primary white */
    .btn-primary-white {
        .btn-component {
            height: 45px;
        }
        .btn-icon {
            height: 20px;
            width: 20px;
        }
        .btn-icon svg {
            height: 20px;
            width: 20px;
        }
    }
    /* button basket */
    .btn-basket {
        height: 45px;
    }
    /* button secondary line */
    .btn-secondary-line {
        .btn-component {
            height: 45px;
        }
    }
}