//--------------------------------------------------------------------------
// ⚠️ Variables can be found in overrides.scss instead of defined in root
//-------------------------------------------------------------------------

/* --------- Breakpoints bootstrap 5 ----------- */

@mixin bs5-media-breakpoint-up($name) {
    $min: map-get($grid-breakpoints, $name);
    @if $min and $min > 0 {
        @media (min-width: $min) {
            @content;
        }
    } @else {
        @content;
    }
}

@mixin bs5-media-breakpoint-down($name) {
    $max: map-get($grid-breakpoints, $name);
    @if $max {
        @media (max-width: calc(#{$max} - 0.02px)) {
            @content;
        }
    } @else {
        @content;
    }
}

@mixin bs5-media-breakpoint-between($lower, $upper) {
    $min: map-get($grid-breakpoints, $lower);
    $max: map-get($grid-breakpoints, $upper);
    @if $min and $max {
        @media (min-width: $min) and (max-width: calc(#{$max} - 0.02px)) {
            @content;
        }
    }
}

// --------- Utilities -----------

// Spacers

$section-spacer: rem-calc(50px);
$section-spacer-small: rem-calc(25px);

.section-spacer-both {
    padding-top: $section-spacer-small;
    padding-bottom: $section-spacer-small;
    @include bs5-media-breakpoint-up(lg) {
        padding-top: $section-spacer;
        padding-bottom: $section-spacer;
    }
    &--small {
        padding-top: $section-spacer-small;
        padding-bottom: $section-spacer-small;
        @include bs5-media-breakpoint-up(lg) {
            padding-top: $section-spacer-small;
            padding-bottom: $section-spacer-small;
        }
    }
}
.section-spacer {
    @extend .section-spacer-both;
    padding-bottom: unset;
    &--small {
        padding-bottom: unset;
    }
}
.section-spacer-bottom {
    @extend .section-spacer-both;
    padding-top: unset;
    &--small {
        padding-top: unset;
    }
}

// Hex to rgba function
@function hex-to-rgba($hex, $alpha) {
    $r: red($hex);
    $g: green($hex);
    $b: blue($hex);
    @return rgba($r, $g, $b, $alpha);
}

// --------- Components: Buttons -----------

.bootstrap-touchspin {
    flex-wrap: nowrap;

    .input-touchspin {
        height: rem-calc(50px);
        min-width: rem-calc(75px);
        border-left: 0px;
    }

    .input-group-btn-vertical {
        display: flex;
        flex-direction: column;
        button {
            border-radius: 0px;
        }
    }
}

.btn:focus {
    box-shadow: none !important;
}

// --------- Components: Forms -----------

.input-group.js-parent-focus {
    .input-group-append .btn {
        border-top-right-radius: $border-radius !important;
        border-bottom-right-radius: $border-radius !important;
    }
}

.input-group.js-parent-focus {
    height: $input-height;
}

// --------- Components: Swiper -----------

.swiper-slide {
    height: auto;
}

// --------- Layout: Header -----------
.header-top__row {
    flex-wrap: wrap;
    .header-top__block--search {
        @include media-breakpoint-down(sm) {
            order: 1;
        }
        .js-search-form {
            max-width: unset;
            width: 100%;
            margin: 0;
        }
    }

    .header-top__badge {
        right: -0.9em;
    }
}

// --------- Layout: Left column -----------
#left-column {
    .list-group-item,
    .list-group-item-action-dropdown-link,
    label {
        font-family: $font-family-base;
        font-size: $font-size-base;
        color: $secondary;
        font-weight: 400;
    }
}