// NPM
@import "node_modules/bootstrap/scss/bootstrap-grid";
@import "node_modules/bootstrap/scss/_mixins.scss";
@import "node_modules/bootstrap/scss/_transitions.scss";
@import "node_modules/bootstrap/scss/_accordion.scss";
@import "node_modules/bootstrap/scss/_modal.scss";
@import "node_modules/bootstrap/scss/_tables.scss";
@import "node_modules/bootstrap/scss/_progress.scss";
@import "node_modules/bootstrap/scss/_toasts.scss";
@import "node_modules/bootstrap-icons/font/bootstrap-icons";
@import "node_modules/splitting/dist/splitting";
@import "node_modules/swiper/swiper-bundle.min";
@import "node_modules/venobox/venobox/venobox.min";
@import "node_modules/splitting/dist/splitting";

// Partials
@import "_partials/fonts";
@import "_partials/variables";
@import "_partials/mixins";
// @import "_partials/cursor";
@import "_partials/helpers";
@import "_partials/typography";
@import "_partials/normalize";

// Includes
@import "_includes/buttons";
@import "_includes/form";
@import "_includes/header";
@import "_includes/footer";

// Modules
@import "_modules/modalDefaults";
@import "_modules/popups";
@import "_modules/languageChanger";
@import "_modules/accordion";
@import "_modules/swiperDefaults";
@import "_modules/collectionFiguresCombo";
@import "_modules/collectionDragSwiper";
@import "_modules/bgContainerImageCombo";
@import "_modules/filters";
@import "_modules/sidenav";
@import "_modules/search";
@import "_modules/productsList";
@import "_modules/toasts";
@import "_modules/toggles";

// Pages
@import "_pages/account";
@import "_pages/product";
@import "_pages/shop";
@import "_pages/default";

// ====================================================
// Theme Scrollbar
// ====================================================

::-webkit-scrollbar-track,
::-webkit-scrollbar {
    background-color: rgba($white, 0.25);
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: $black;
}

// ====================================================
// Theme Fonts
// ====================================================

.font-metropolis {
    font-family: $Metropolis;
}
.font-narzissPro {
    font-family: $NarzissPro;
}

// ====================================================
// Venobox
// ====================================================

.vbox-container {
    overflow-y: hidden;
}

.vbox-close {
    top: 5%;
    right: 2.5%;
    width: 60px;
    height: 60px;
    font-size: 40pt;
    font-weight: 100;
}

.vbox-next,
.vbox-prev {
    height: 60px;
}

.vbox-next span,
.vbox-prev span {
    width: 40px;
    height: 40px;
}

// ====================================================
// Keyframes
// ====================================================

@include keyframes(bounce) {
    from {
        transform: translateY(0px);
    }
    to {
        transform: translateY(-10px);
    }
}

@include keyframes(spin) {
    100% {
        @include transform(rotate(360deg));
    }
}

// ===============================================
// Cookie Consent
// ===============================================

.cc-revoke,
.cc-window {
    font-family: $Metropolis;
    font-size: 9pt;
    display: block;
}

.cc-banner.cc-bottom {
    left: unset;
    right: 20px;
    bottom: 20px;

    @include media-breakpoint-down(md) {
        left: 0;
        right: 0;
        bottom: 0;
    }
}

.cc-window.cc-banner {
    width: 30%;
    padding: 2rem;

    @include media-breakpoint-down(lg) {
        width: 50%;
    }

    @include media-breakpoint-down(md) {
        width: 100%;
    }
}

.cc-compliance {
    margin-top: 1rem;
    justify-content: flex-end;
}

.cc-btn {
    padding: 5px 15px;
    font-family: inherit;
    font-size: 10.5pt;
    font-weight: 300;
    text-transform: uppercase;
    border-radius: 0px;
    border: 0;
    transition: all 0.4s ease-out;

    &:hover {
        background-color: $black-alpha !important;
    }
}

// ===============================================
// Animations
// ===============================================

.imageReveal {
    visibility: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;

    .transform-left {
        transform-origin: left;
    }

    .transform-right {
        transform-origin: right;
    }
}

.revealByLetter .char,
.revealByWord,
.revealByLine,
.revealFromX,
.revealFromY {
    opacity: 0;
}

// ===============================================
// Form Validations
// ===============================================

.is-invalid {
    border: 1px solid #cc0000 !important;
    transition: 0.2s all;
}

.disabled {
    pointer-events: none;
    opacity: 0.4;
}