ctt-babylon 0.8.6 → 0.8.7

package/lib/styles/styles/babylon/mixins.scss

@@ -1,1019 +0,0 @@
-@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;
-
-//-------------------- 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;
-}
-
-@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;