@use './variables.scss' as *;
@use 'sass:map';
@use 'sass:math';
@use 'sass:list';

// MEDIA QUERYS
$mobile: 375px;
$small-tablet: 540px;
$medium-tablet: 768px;
$full-tablet: 1025px;
$small-desktop: 1280px;
$medium-desktop: 1366px;
$full-desktop: 1680px;
$full-desktop-xl: 1920px;

//-------------------- Responsive sizes -------------------- //
$extra-large-device-width: 1280px; // Large devices (desktops, less than 1280px)
$large-device-width: 1199px; // Large devices (desktops, less than 1200px)
$medium-device-width: 1025px; // Medium devices (tablets, less than 1025px)
$small-device-width: 767px; // Small devices (landscape phones, less than 768px)
$extra-small-device-width: 575px; // Extra small devices (portrait phones, less than 576px)

$container-max-widths: (
    sm: 540px,
    md: 768px,
    lg: 1025px,
    xl: 1280px,
    xxl: 1366px,
    xxxl: 1600px,
    xxxxl: 1921px,
) !default;
$grid-breakpoints: (
    xs: 0,
    sm: 540px,
    md: 768px,
    lg: 1025px,
    xl: 1280px,
    xxl: 1366px,
    xxxl: 1680px,
    xxxxl: 1921px,
) !default;

// breakpoints
$breakpoints: (
    'xs': 540px,
    'sm': 768px,
    'md': 1024px,
    'lg': 1280px,
    'xl': 1366px,
    '2xl': 1680px,
    '3xl': 1800px,
    '4xl': 1900px,
) !default;

//-------------------- MediaQuery --------//
@mixin full-desktop-xl {
    //1920px
    @media (max-width: #{$full-desktop-xl - 1px}) {
        @content;
    }
}
@mixin full-desktop {
    //1680px
    @media (max-width: #{$full-desktop - 1px}) {
        @content;
    }
}

@mixin medium-desktop {
    //1366px
    @media (max-width: #{$medium-desktop - 1px}) {
        @content;
    }
}

@mixin small-desktop {
    //1280px
    @media (max-width: #{$small-desktop - 1px}) {
        @content;
    }
}

@mixin full-tablet {
    //992
    @media (max-width: #{$full-tablet - 1px}) {
        @content;
    }
}

@mixin medium-tablet {
    //768px
    @media (max-width: #{$medium-tablet - 1px}) {
        @content;
    }
}

@mixin small-tablet {
    //540px
    @media (max-width: #{$small-tablet - 1px}) {
        @content;
    }
}

@mixin mobile {
    //375px
    @media (max-width: #{$mobile - 1px}) {
        @content;
    }
}
@mixin min-full-desktop-xl {
    @media (min-width: #{$full-desktop-xl}) {
        @content;
    }
}
@mixin min-full-desktop {
    @media (min-width: #{$full-desktop}) {
        @content;
    }
}

@mixin min-medium-desktop {
    @media (min-width: #{$medium-desktop}) {
        @content;
    }
}

@mixin min-small-desktop {
    @media (min-width: #{$small-desktop}) {
        @content;
    }
}

@mixin min-full-tablet {
    @media (min-width: #{$full-tablet}) {
        @content;
    }
}

@mixin min-medium-tablet {
    @media (min-width: #{$medium-tablet}) {
        @content;
    }
}

@mixin min-small-tablet {
    @media (min-width: #{$small-tablet}) {
        @content;
    }
}

@mixin min-mobile {
    @media (min-width: #{$mobile}) {
        @content;
    }
}

@mixin tablet {
    @media (max-width: #{$medium-device-width}) {
        @content;
    }
}

//-------------------- Font size Rem conversion --------//
@function calculateRem($size) {
    $remSize: calc($size / 16px);
    @return #{$remSize}rem;
}
@mixin fontSize($size) {
    font-size: $size; //Fallback in px
    font-size: calculateRem($size);
}
//-------------------- Border radius --------------------//
@mixin border-radius($top, $right, $bottom, $left) {
    -webkit-border-radius: $top $right $bottom $left;
    -moz-border-radius: $top $right $bottom $left;
    -ms-border-radius: $top $right $bottom $left;
    border-radius: $top $right $bottom $left;
}

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}

//-------------------- Transition --------------------//
@mixin transition-default($what: all, $length: 0.3s, $easing: '') {
    @if ($what == transform) {
        @if ($easing != '') {
            -moz-transition: -moz-transform $length $easing;
            -o-transition: -o-transform $length $easing;
            -webkit-transition: -webkit-transform $length $easing;
            -ms-transition: -ms-transform $length $easing;
            transition: transform $length $easing;
        } @else {
            -moz-transition: -moz-transform $length;
            -o-transition: -o-transform $length;
            -webkit-transition: -webkit-transform $length;
            -ms-transition: -ms-transform $length;
            transition: transform $length;
        }
    } @else {
        @if ($easing != '') {
            -moz-transition: $what $length $easing;
            -o-transition: $what $length $easing;
            -webkit-transition: $what $length $easing;
            -ms-transition: $what $length $easing;
            transition: $what $length $easing;
        } @else {
            -moz-transition: $what $length ease-in-out;
            -o-transition: $what $length ease-in-out;
            -webkit-transition: $what $length ease-in-out;
            -ms-transition: $what $length ease-in-out;
            transition: $what $length ease-in-out;
        }
    }
}
@mixin transition-default-cubic-bezier(
    $what: all,
    $length: 0.3s cubic-bezier(0.77, 0, 0.175, 1)
) {
    -webkit-transition: $what $length;
    -moz-transition: $what $length;
    -ms-transition: $what $length;
    -o-transition: $what $length;
    transition: $what $length;
}

//-------------------- Transform, Translate3d, TranslateX, TranslateY, Rotate --------------------//
@mixin transform($params) {
    -webkit-transform: $params;
    -moz-transform: $params;
    -ms-transform: $params;
    -o-transform: $params;
    transform: $params;
}
//--------------------  Center vertically and/or horizontally --------------------//
@mixin center($xy: xy) {
    @if $xy == xy {
        left: 50%;
        top: 50%;
        bottom: auto;
        right: auto;
        @include transform(translateX(-50%) translateY(-50%));
    } @else if $xy == x {
        left: 50%;
        right: auto;
        @include transform(translateX(-50%));
    } @else if $xy == y {
        top: 50%;
        bottom: auto;
        @include transform(translateY(-50%));
    }
}

//-------------------- Transform, Translate3d, TranslateX, TranslateY, Rotate --------------------//
@mixin translate3d($val, $val2, $val3) {
    -webkit-transform: translate3d($val, $val2, $val3);
    -ms-transform: translate3d($val, $val2, $val3);
    -o-transform: translate3d($val, $val2, $val3);
    transform: translate3d($val, $val2, $val3);
}
@mixin translateX($val...) {
    -webkit-transform: translateX($val);
    -ms-transform: translateX($val);
    -o-transform: translateX($val);
    transform: translateX($val);
}
@mixin translateY($val...) {
    -webkit-transform: translateY($val);
    -ms-transform: translateY($val);
    -o-transform: translateY($val);
    transform: translateY($val);
}
@mixin rotate($val) {
    -webkit-transform: rotate($val);
    -moz-transform: rotate($val);
    -ms-transform: rotate($val);
    -o-transform: rotate($val);
    transform: rotate($val);
}
@mixin perspective($val) {
    -webkit-perspective: $val;
    -moz-perspective: $val;
    -ms-perspective: $val;
    perspective: $val;
}
//-------------------- Background-size --------------------//
@mixin background-size($background-size) {
    -webkit-background-size: $background-size;
    -moz-background-size: $background-size;
    -o-background-size: $background-size;
    background-size: $background-size;
}

//-------------------- Gradients --------------------//
@mixin linear-gradient($from, $to) {
    background: $to;
    background: -moz-linear-gradient(to right, $from 0%, $to 100%);
    background: -webkit-gradient(
        to right,
        color-stop(0%, $from),
        color-stop(100%, $to)
    );
    background: -webkit-linear-gradient(to right, $from 0%, $to 100%);
    background: -o-linear-gradient(to right, $from 0%, $to 100%);
    background: linear-gradient(to right, $from 0%, $to 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#{$from}, endColorstr=#{$to});
}
@mixin background-gradient($start-color, $end-color, $orientation) {
    background: $start-color;
    @if $orientation == 'vertical' {
        background: -webkit-linear-gradient(top, $start-color, $end-color);
        background: linear-gradient(to bottom, $start-color, $end-color);
    } @else if $orientation == 'horizontal' {
        background: -webkit-linear-gradient(left, $start-color, $end-color);
        background: linear-gradient(to right, $start-color, $end-color);
    } @else {
        background: -webkit-radial-gradient(
            center,
            ellipse cover,
            $start-color,
            $end-color
        );
        background: radial-gradient(
            ellipse at center,
            $start-color,
            $end-color
        );
    }
}

//-------------------- Background color and color --------------------//
@function solid-lighten($color, $percentage) {
    @return lighten($color, (1-$percentage) * 5%);
}
@function solid-darken($color, $percentage) {
    @return darken($color, (1-$percentage) * 5%);
}
@mixin rgba-main($type, $color, $percentage, $shade: ligthen) {
    @if $shade == lighten {
        @if $type == color {
            color: solid-lighten($color, $percentage);
            color: rgba($color, $percentage);
        }
        @if $type == bg {
            background-color: solid-lighten($color, $percentage);
            background-color: rgba($color, $percentage);
        }
    } @else {
        @if $type == color {
            color: solid-darken($color, $percentage);
            color: rgba($color, $percentage);
        }
        @if $type == bg {
            background-color: solid-darken($color, $percentage);
            background-color: rgba($color, $percentage);
        }
    }
}

//-------------------- Animation --------------------//
@mixin animation($animationname, $time) {
    animation: $animationname $time;
    -webkit-animation: $animationname $time;
    -moz-animation-name: $animationname $time;
}

@mixin animation-name($animationname) {
    animation-name: $animationname;
    -webkit-animation-name: $animationname;
    -moz-animation-name: $animationname;
}

@mixin animation-duration($time) {
    animation-duration: $time;
    -webkit-animation-duration: $time;
    -moz-animation-duration: $time;
}

@mixin animation-timing($timing) {
    animation-timing-function: $timing;
    -webkit-animation-timing-function: $timing;
    -moz-animation-timing-function: $timing;
}

@mixin animation-delay($delay) {
    animation-delay: $delay;
    -webkit-animation-delay: $delay;
    -moz-animation-delay: $delay;
}

@mixin animation-count($count) {
    animation-iteration-count: $count;
    -webkit-animation-iteration-count: $count;
    -moz-animation-iteration-count: $count;
}

@mixin animation-direction($direction) {
    animation-direction: $direction;
    -webkit-animation-direction: $direction;
}

@mixin animation-fill($fill-mode) {
    animation-fill-mode: $fill-mode;
    -webkit-animation-fill-mode: $fill-mode;
    -moz-animation-fill-mode: $fill-mode;
}

@mixin backface-visibility($arguments) {
    -webkit-backface-visibility: $arguments;
    -moz-backface-visibility: $arguments;
    -ms-backface-visibility: $arguments;
    -o-backface-visibility: $arguments;
    backface-visibility: $arguments;
}
//-------------------- Box shadow --------------------//
@mixin box-shadow($val...) {
    -webkit-box-shadow: $val;
    -moz-box-shadow: $val;
    box-shadow: $val;
}
@mixin box-shadow-main() {
    box-shadow: 0px 0px 10px 0px var(--cl_shadow);
}
@mixin box-shadow-bottom() {
    box-shadow: 0px 3px 4px 0px var(--cl_shadow);
}

//--------------------  Center vertically and/or horizontally --------------------//
@mixin center($xy: xy) {
    @if $xy == xy {
        left: 50%;
        top: 50%;
        bottom: auto;
        right: auto;
        @include transform(translateX(-50%) translateY(-50%));
    } @else if $xy == x {
        left: 50%;
        right: auto;
        @include transform(translateX(-50%));
    } @else if $xy == y {
        top: 50%;
        bottom: auto;
        @include transform(translateY(-50%));
    }
}

//-------------------- Responsive --------------------//
@mixin extra-desktop {
    @media (max-width: #{$extra-large-device-width}) {
        @content;
    }
}
@mixin desktop {
    @media (max-width: #{$large-device-width}) {
        @content;
    }
}
@mixin tablet {
    @media (max-width: #{$medium-device-width}) {
        @content;
    }
}
@mixin mobile {
    @media (max-width: #{$small-device-width}) {
        @content;
    }
}
@mixin extra-small-mobile {
    @media (max-width: #{$extra-small-device-width}) {
        @content;
    }
}

@media (min-width: 1280px) {
    .order-custom-xl-xxl-1 {
        order: 1;
    }
    .order-custom-xl-xxl-2 {
        order: 2;
    }
}

/// MIXIMS BREAKPOINTS
@function breakpoint-next(
    $name,
    $breakpoints: $grid-breakpoints,
    $breakpoint-names: map-keys($breakpoints)
) {
    $n: index($breakpoint-names, $name);
    @return if(
        $n != null and $n < length($breakpoint-names),
        nth($breakpoint-names, $n + 1),
        null
    );
}

@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
    $min: map.get($breakpoints, $name);
    @return if($min != 0, $min, null);
}

@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
    $next: breakpoint-next($name, $breakpoints);
    @return if($next, breakpoint-min($next, $breakpoints) - 0.02, null);
}

@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
    @return if(breakpoint-min($name, $breakpoints) == null, '', '-#{$name}');
}

@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
    $min: breakpoint-min($name, $breakpoints);
    @if $min {
        @media (min-width: $min) {
            @content;
        }
    } @else {
        @content;
    }
}

@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
    $max: breakpoint-max($name, $breakpoints);
    @if $max {
        @media (max-width: $max) {
            @content;
        }
    } @else {
        @content;
    }
}

@mixin media-breakpoint-between(
    $lower,
    $upper,
    $breakpoints: $grid-breakpoints
) {
    $min: breakpoint-min($lower, $breakpoints);
    $max: breakpoint-max($upper, $breakpoints);

    @if $min != null and $max != null {
        @media (min-width: $min) and (max-width: $max) {
            @content;
        }
    } @else if $max == null {
        @include media-breakpoint-up($lower, $breakpoints) {
            @content;
        }
    } @else if $min == null {
        @include media-breakpoint-down($upper, $breakpoints) {
            @content;
        }
    }
}

@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
    $min: breakpoint-min($name, $breakpoints);
    $max: breakpoint-max($name, $breakpoints);

    @if $min != null and $max != null {
        @media (min-width: $min) and (max-width: $max) {
            @content;
        }
    } @else if $max == null {
        @include media-breakpoint-up($name, $breakpoints) {
            @content;
        }
    } @else if $min == null {
        @include media-breakpoint-down($name, $breakpoints) {
            @content;
        }
    }
}

/// MIXIMS Grid system

@mixin make-container($gutter: $grid-gutter-width) {
    width: 100%;
    // padding-right: $gutter / 2;
    // padding-left: $gutter / 2;
    margin-right: auto;
    margin-left: auto;
}

@mixin make-row($gutter: $grid-gutter-width) {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(-#{$gutter} / 2);
    margin-left: calc(-#{$gutter} / 2);
}

// For each breakpoint, define the maximum width of the container in a media query
@mixin make-container-max-widths(
    $max-widths: $container-max-widths,
    $breakpoints: $grid-breakpoints
) {
    @each $breakpoint, $container-max-width in $max-widths {
        @include media-breakpoint-up($breakpoint, $breakpoints) {
            max-width: $container-max-width;
        }
    }
    @include deprecate('The `make-container-max-widths` mixin', 'v4.5.2', 'v5');
}

@mixin make-col-ready($gutter: $grid-gutter-width) {
    position: relative;
    width: 100%;
    padding-right: calc($gutter / 2);
    padding-left: calc($gutter / 2);
}

@mixin make-col($size, $columns: $grid-columns) {
    flex: 0 0 percentage(calc($size / $columns));
    max-width: percentage(calc($size / $columns));
}

@mixin make-col-auto() {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%; // Reset earlier grid tiers
}

@mixin make-col-offset($size, $columns: $grid-columns) {
    $num: calc($size / $columns);
    margin-left: if($num == 0, 0, percentage($num));
}

@mixin row-cols($count) {
    & > * {
        flex: 0 0 calc(100% / $count);
        max-width: calc(100% / $count);
    }
}

@mixin make-grid-columns(
    $columns: $grid-columns,
    $gutter: $grid-gutter-width,
    $breakpoints: $grid-breakpoints
) {
    // Common properties for all breakpoints
    %grid-column {
        position: relative;
        width: 100%;
        padding-right: calc($gutter / 2);
        padding-left: calc($gutter / 2);
    }

    @each $breakpoint in map.keys($breakpoints) {
        $infix: breakpoint-infix($breakpoint, $breakpoints);

        @if $columns > 0 {
            // Allow columns to stretch full width below their breakpoints
            @for $i from 1 through $columns {
                .col#{$infix}-#{$i} {
                    @extend %grid-column;
                }
            }
        }

        .col#{$infix},
        .col#{$infix}-auto {
            @extend %grid-column;
        }

        @include media-breakpoint-up($breakpoint, $breakpoints) {
            // Provide basic `.col-{bp}` classes for equal-width flexbox columns
            .col#{$infix} {
                flex-basis: 0;
                flex-grow: 1;
                max-width: 100%;
            }

            @if $grid-row-columns > 0 {
                @for $i from 1 through $grid-row-columns {
                    .row-cols#{$infix}-#{$i} {
                        @include row-cols($i);
                    }
                }
            }

            .col#{$infix}-auto {
                @include make-col-auto();
            }

            @if $columns > 0 {
                @for $i from 1 through $columns {
                    .col#{$infix}-#{$i} {
                        @include make-col($i, $columns);
                    }
                }
            }

            .order#{$infix}-first {
                order: -1;
            }

            .order#{$infix}-last {
                order: $columns + 1;
            }

            @for $i from 0 through $columns {
                .order#{$infix}-#{$i} {
                    order: $i;
                }
            }

            @if $columns > 0 {
                // `$columns - 1` because offsetting by the width of an entire row isn't possible
                @for $i from 0 through ($columns - 1) {
                    @if not($infix == '' and $i == 0) {
                        // Avoid emitting useless .offset-0
                        .offset#{$infix}-#{$i} {
                            @include make-col-offset($i, $columns);
                        }
                    }
                }
            }
        }
    }
}

@each $breakpoint in map.keys($grid-breakpoints) {
    @include media-breakpoint-up($breakpoint) {
        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

        .flex#{$infix}-row {
            flex-direction: row !important;
        }
        .flex#{$infix}-column {
            flex-direction: column !important;
        }
        .flex#{$infix}-row-reverse {
            flex-direction: row-reverse !important;
        }
        .flex#{$infix}-column-reverse {
            flex-direction: column-reverse !important;
        }

        .flex#{$infix}-wrap {
            flex-wrap: wrap !important;
        }
        .flex#{$infix}-nowrap {
            flex-wrap: nowrap !important;
        }
        .flex#{$infix}-wrap-reverse {
            flex-wrap: wrap-reverse !important;
        }
        .flex#{$infix}-fill {
            flex: 1 1 auto !important;
        }
        .flex#{$infix}-grow-0 {
            flex-grow: 0 !important;
        }
        .flex#{$infix}-grow-1 {
            flex-grow: 1 !important;
        }
        .flex#{$infix}-shrink-0 {
            flex-shrink: 0 !important;
        }
        .flex#{$infix}-shrink-1 {
            flex-shrink: 1 !important;
        }

        .justify-content#{$infix}-start {
            justify-content: flex-start !important;
        }
        .justify-content#{$infix}-end {
            justify-content: flex-end !important;
        }
        .justify-content#{$infix}-center {
            justify-content: center !important;
        }
        .justify-content#{$infix}-between {
            justify-content: space-between !important;
        }
        .justify-content#{$infix}-around {
            justify-content: space-around !important;
        }

        .align-items#{$infix}-start {
            align-items: flex-start !important;
        }
        .align-items#{$infix}-end {
            align-items: flex-end !important;
        }
        .align-items#{$infix}-center {
            align-items: center !important;
        }
        .align-items#{$infix}-baseline {
            align-items: baseline !important;
        }
        .align-items#{$infix}-stretch {
            align-items: stretch !important;
        }

        .align-content#{$infix}-start {
            align-content: flex-start !important;
        }
        .align-content#{$infix}-end {
            align-content: flex-end !important;
        }
        .align-content#{$infix}-center {
            align-content: center !important;
        }
        .align-content#{$infix}-between {
            align-content: space-between !important;
        }
        .align-content#{$infix}-around {
            align-content: space-around !important;
        }
        .align-content#{$infix}-stretch {
            align-content: stretch !important;
        }

        .align-self#{$infix}-auto {
            align-self: auto !important;
        }
        .align-self#{$infix}-start {
            align-self: flex-start !important;
        }
        .align-self#{$infix}-end {
            align-self: flex-end !important;
        }
        .align-self#{$infix}-center {
            align-self: center !important;
        }
        .align-self#{$infix}-baseline {
            align-self: baseline !important;
        }
        .align-self#{$infix}-stretch {
            align-self: stretch !important;
        }

        // Some special margin utils
        .m#{$infix}-auto {
            margin: auto !important;
        }
        .mt#{$infix}-auto,
        .my#{$infix}-auto {
            margin-top: auto !important;
        }
        .mr#{$infix}-auto,
        .mx#{$infix}-auto {
            margin-right: auto !important;
        }
        .mb#{$infix}-auto,
        .my#{$infix}-auto {
            margin-bottom: auto !important;
        }
        .ml#{$infix}-auto,
        .mx#{$infix}-auto {
            margin-left: auto !important;
        }
    }
}

/* Margenes  Padding*/
$sizes: 0, 10, 20, 25, 30, 40, 50, 60, 70, 80, 90, 100, 150, 180;
@each $size in $sizes {
    .mt--#{$size} {
        margin-top: #{$size}px !important;
    }
    .mb--#{$size} {
        margin-bottom: #{$size}px !important;
    }
    .pt--#{$size} {
        padding-top: #{$size}px;
    }
    .pb--#{$size} {
        padding-bottom: #{$size}px;
    }
    .mblock--#{$size} {
        margin-block: #{$size}px;
    }
    .pblock--#{$size} {
        padding-block: #{$size}px;
    }
}

@mixin fade-animation(
    $fromOpacity: 0,
    $toOpacity: 1,
    $fromPosition: 20%,
    $toPosition: 0,
    $duration: 0.7s,
    $transition: cubic-bezier(0.785, 0.135, 0.15, 0.86)
) {
    @keyframes opacity-animation {
        from {
            opacity: $fromOpacity;
            top: $fromPosition;
        }
        to {
            opacity: $toOpacity;
            top: $toPosition;
        }
    }

    animation: opacity-animation $duration $transition;
}

@mixin position-animation(
    $fromValue: 100%,
    $toValue: 0,
    $duration: 0.7s,
    $transition: cubic-bezier(0.785, 0.135, 0.15, 0.86)
) {
    @keyframes position-animation {
        from {
            top: $fromValue;
        }
        to {
            top: $toValue;
        }
    }

    animation: position-animation $duration $transition;
}

$transition: all 0.5s;
$transition-linear: linear 0.5s;

@keyframes move-right {
    0% {
        right: 30px;
    }
    50% {
        right: 20px;
    }
    100% {
        right: 30px;
    }
}

//-------------------- Blanco --------------------//

// breakpoints Mixin
@mixin mq-min($key) {
    $size: map.get($breakpoints, $key);
    @media (min-width: $size) {
        @content;
    }
}
@mixin mq-max($key) {
    $size: map.get($breakpoints, $key);
    @media (max-width: ($size - 0.02)) {
        @content;
    }
}

//Border Radius
$list-of-directions: (
    'top',
    'top-right',
    'right',
    'bottom-right',
    'bottom',
    'bottom-left',
    'left',
    'top-left'
) !default;

//Border Radius Mixin
@mixin border-radius($args...) {
    $list: list.join($list-of-directions, ('cross-left', 'cross-right', 'all'));
    @if list.length($args) == 1 {
        $value: list.nth($args, 1);
        border-radius: $value;
    } @else if list.length($args) == 2 {
        $corner: list.nth($args, 1);
        $value: list.nth($args, 2);
        @if index($list, $corner) {
            @if $corner == 'top' {
                border-top-left-radius: $value;
                border-top-right-radius: $value;
            } @else if $corner == 'top-right' {
                border-top-right-radius: $value;
            } @else if $corner == 'right' {
                border-top-right-radius: $value;
                border-bottom-right-radius: $value;
            } @else if $corner == 'bottom-right' {
                border-bottom-right-radius: $value;
            } @else if $corner == 'bottom' {
                border-bottom-left-radius: $value;
                border-bottom-right-radius: $value;
            } @else if $corner == 'bottom-left' {
                border-bottom-left-radius: $value;
            } @else if $corner == 'left' {
                border-top-left-radius: $value;
                border-bottom-left-radius: $value;
            } @else if $corner == 'top-left' {
                border-top-left-radius: $value;
            } @else if $corner == 'all' {
                border-radius: $value;
            } @else if $corner == 'cross-left' {
                border-top-left-radius: $value;
                border-bottom-right-radius: $value;
            } @else if $corner == 'cross-right' {
                border-top-right-radius: $value;
                border-bottom-left-radius: $value;
            }
        } @else {
            @error "Corner value must be one of the followings: #{quote($list)}.";
        }
    } @else if list.length($args) == 4 {
        $args: __null($args, space, true);
        border-top-left-radius: list.nth($args, 1);
        border-top-right-radius: list.nth($args, 2);
        border-bottom-right-radius: list.nth($args, 3);
        border-bottom-left-radius: list.nth($args, 4);
    }
}

//Line Height Mixin
@mixin lineHeight($lhv, $fs) {
    font-size: #{math.div($fs, 10)}rem;
    line-height: math.div($lhv, $fs);
}

//Letter Spacing Mixin
@mixin letterSpacingPercent($ls, $fs) {
    letter-spacing: #{math.div(($ls * $fs), 1000)}rem;
}

$header-height-xxs: 6rem;
$header-height-xs: 7rem;
$header-height-sm: 8rem;
$header-height-xxl: 9rem;
$header-mobile-nav-height-xxs: 6.6rem;
$header-mobile-nav-height-xs: 7.6rem;
$header-mobile-nav-height-sm: 8.6rem;
