/* stylelint-disable length-zero-no-unit, scss/dollar-variable-empty-line-before, order/order */

@use 'sass:color';
@use 'sass:list';
@use 'sass:map';
@use 'sass:math';
@use 'sass:meta';

$dark: false !default;

// https://www.w3.org/TR/WCAG21/#dfn-relative-luminance
@function get-relative-luminance($color) {
    /* stylelint-disable number-max-precision, scss/dollar-variable-pattern */
    $RsRGB: math.div(color.channel($color, "red", $space: rgb), 255);
    $GsRGB: math.div(color.channel($color, "green", $space: rgb), 255);
    $BsRGB: math.div(color.channel($color, "blue", $space: rgb), 255);

    $R: math.div($RsRGB, 12.92);
    $G: math.div($GsRGB, 12.92);
    $B: math.div($BsRGB, 12.92);

    @if $RsRGB > 0.03928 {
        $R: math.pow(math.div($RsRGB + 0.055, 1.055), 2.4);
    }

    @if $GsRGB > 0.03928 {
        $G: math.pow(math.div($GsRGB + 0.055, 1.055), 2.4);
    }

    @if $BsRGB > 0.03928 {
        $B: math.pow(math.div($BsRGB + 0.055, 1.055), 2.4);
    }

    @return 0.2126 * $R + 0.7152 * $G + 0.0722 * $B;

    /* eslint-enable number-max-precision, scss/dollar-variable-pattern */
}

// https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio
@function get-contrast-ratio($light, $dark) {
    @return math.div(get-relative-luminance($light) + 0.05, get-relative-luminance($dark) + 0.05);
}

@function get-offset-color($color, $is-light-color) {
    $offset: 0.05;
    $modifier: 1; // Для тёмного фона мы делаем цвет более светлым
    $light-color: color.adjust($color, $lightness: math.percentage($offset * $modifier));
    $dark-color: $color;

    @if $is-light-color {
        $modifier: -1; // Для светлого фона мы делаем цвет более тёмным
        $light-color: $color;
        $dark-color: color.adjust($color, $lightness: math.percentage($offset * $modifier));
    }
    // Если < 2 - контраста недостаточно, если > 2 - получается слишком чёрный/белый цвет, а нам нужно сохранить изначальный оттенок
    @while get-contrast-ratio($light-color, $dark-color) < 2 {
        $offset: $offset + 0.05;

        @if $is-light-color {
            $dark-color: color.adjust($color, $lightness: math.percentage($offset * $modifier));
        } @else {
            $light-color: color.adjust($color, $lightness: math.percentage($offset * $modifier));
        }
    }

    @return color.adjust($color, $lightness: math.percentage($offset * $modifier));
}

@function is-light-color($color) {
    $r: color.channel($color, "red", $space: rgb);
    $g: color.channel($color, "green", $space: rgb);
    $b: color.channel($color, "blue", $space: rgb);
    $luminance: 0.2126 * $r + 0.7152 * $g + 0.0722 * $b;

    @return $luminance >= 128;
}

@function autocolor($color, $background, $autocorrect: true) {
    @if meta.type-of($background) == 'list' {
        @if color.alpha(list.nth($background, 2)) > 0.5 {
            $background: list.nth($background, 2);
        } @else {
            $background: list.nth($background, 1);
        }
    }
    $is-light-color: is-light-color($background);

    @if meta.type-of($color) == 'map' {
        $c: map.get($color, 'dark');

        @if $dark and $c != $color-white and map.get($color, 'light') != $background {
            $c: map.get($color, 'light');
        }

        @if $is-light-color {
            $c: map.get($color, 'light');

            @if $dark and $c != $color-black and map.get($color, 'dark') != $background {
                $c: map.get($color, 'dark');
            }
        }
        // Корректируем слишком схожие цвета. Коэффициент 1.5 выбран, чтобы быть максимально толерантным к решениям дизайнеров и т. п., но есть возможность вообще выключить автоматическую корректировку
        @if $autocorrect {
            $min-ratio: 1.5;
            $ratio: get-contrast-ratio($background, $c);

            @if $ratio < $min-ratio {
                @if $ratio < 1 {
                    @if get-contrast-ratio($c, $background) < $min-ratio {
                        $c: get-offset-color($c, $is-light-color);
                    }
                } @else {
                    $c: get-offset-color($c, $is-light-color);
                }
            }
        }

        @return $c;
    }

    @return $color;
}

@function alphagrey($grey, $background) {
    $offset: 0;
    // https://www.viget.com/articles/equating-color-and-transparency/
    $alpha: math.div((color.channel($grey, "red", $space: rgb) - 255), (0 - 255));

    @if $background == white {
        $alpha: math.div((color.channel($grey, "red", $space: rgb) - 0), (255 - 0));
    }

    @if $dark and $background == black {
        $offset: 0.075;
    } @else if not $dark and $background == white {
        $offset: 0.025;
    }

    @return color.change($background, $alpha: $alpha - $offset);
}

/********** Основные **********/

$color-primary: #0e81c9 !default;

@if $dark {
    $color-primary: #1091e1 !default;
}

$color-primary-80: color.scale($color-primary, $lightness: 85%) !default;
$color-primary-70: color.scale($color-primary, $lightness: 20%) !default;
$color-primary-60: color.scale($color-primary, $lightness: 10%) !default;
$color-primary-40: color.scale($color-primary, $lightness: -15%) !default;
$color-primary-30: color.scale($color-primary, $lightness: -25%) !default;
$color-primary-20: color.scale($color-primary, $lightness: -35%) !default;

@if $dark {
    $color-primary-80: color.scale($color-primary, $lightness: -55%) !default;
    $color-primary-70: color.scale($color-primary, $lightness: -45%) !default;
    $color-primary-60: color.scale($color-primary, $lightness: -35%) !default;
    $color-primary-40: color.scale($color-primary, $lightness: 20%) !default;
    $color-primary-30: color.scale($color-primary, $lightness: 40%) !default;
    $color-primary-20: color.scale($color-primary, $lightness: 65%) !default;
}

$color-secondary: #1c2225 !default;

@if $dark {
    $color-secondary: #3e4549 !default;
}

$color-secondary-80: color.scale($color-secondary, $lightness: 85%) !default;
$color-secondary-70: color.scale($color-secondary, $lightness: 20%) !default;
$color-secondary-60: color.scale($color-secondary, $lightness: 10%) !default;
$color-secondary-40: color.scale($color-secondary, $lightness: -15%) !default;
$color-secondary-30: color.scale($color-secondary, $lightness: -25%) !default;
$color-secondary-20: color.scale($color-secondary, $lightness: -35%) !default;

@if $dark {
    $color-secondary-80: color.scale($color-secondary, $lightness: -55%) !default;
    $color-secondary-70: color.scale($color-secondary, $lightness: -45%) !default;
    $color-secondary-60: color.scale($color-secondary, $lightness: -35%) !default;
    $color-secondary-40: color.scale($color-secondary, $lightness: 20%) !default;
    $color-secondary-30: color.scale($color-secondary, $lightness: 40%) !default;
    $color-secondary-20: color.scale($color-secondary, $lightness: 65%) !default;
}

$color-grey: #888888 !default;
$color-grey-100: #ffffff !default;
$color-grey-90: #f3f3f3 !default;
$color-grey-80: #dbdbdb !default;
$color-grey-70: #bbbbbb !default;
$color-grey-40: #727272 !default;
$color-grey-20: #333333 !default;
$color-grey-0: #0a0a0a !default;

@if $dark {
    // При добавлении !default возникает ошибка, поэтому пока что без него
    $color-grey: #8c8c8c;
    $color-grey-100: #080808;
    $color-grey-90: #262626;
    $color-grey-80: #565656;
    $color-grey-70: #666666;
    $color-grey-40: #a4a4a4;
    $color-grey-20: #b6b6b6;
    $color-grey-0: #e6e6e6;

    // Были получены так:
    // $color-grey: color.scale(#bbbbbb, $lightness: -25%);
    // $color-grey-100: color.scale(#0a0a0a, $lightness: -25%);
    // $color-grey-90: color.scale(#333333, $lightness: -25%);
    // $color-grey-80: color.scale(#727272, $lightness: -25%);
    // $color-grey-70: color.scale(#888888, $lightness: -25%);
    // $color-grey-40: color.scale(#dbdbdb, $lightness: -25%);
    // $color-grey-20: color.scale(#f3f3f3, $lightness: -25%);
    // $color-grey-0: color.scale(#ffffff, $lightness: -10%);
}

$color-grey-alpha: alphagrey($color-grey, black) !default;
$color-grey-alpha-90: alphagrey($color-grey-90, black) !default;
$color-grey-alpha-80: alphagrey($color-grey-80, black) !default;
$color-grey-alpha-70: alphagrey($color-grey-70, black) !default;
$color-grey-alpha-40: alphagrey($color-grey-40, black) !default;
$color-grey-alpha-20: alphagrey($color-grey-20, black) !default;

$color-grey-alpha-i: alphagrey($color-grey-70, white) !default;
$color-grey-alpha-i-90: alphagrey($color-grey-20, white) !default;
$color-grey-alpha-i-80: alphagrey($color-grey-40, white) !default;
$color-grey-alpha-i-70: alphagrey($color-grey, white) !default;
$color-grey-alpha-i-40: alphagrey($color-grey-80, white) !default;
$color-grey-alpha-i-20: alphagrey($color-grey-90, white) !default;

@if $dark {
    $color-grey-alpha: alphagrey($color-grey, white) !default;
    $color-grey-alpha-90: alphagrey($color-grey-90, white) !default;
    $color-grey-alpha-80: alphagrey($color-grey-80, white) !default;
    $color-grey-alpha-70: alphagrey($color-grey-70, white) !default;
    $color-grey-alpha-40: alphagrey($color-grey-40, white) !default;
    $color-grey-alpha-20: alphagrey($color-grey-20, white) !default;

    $color-grey-alpha-i: alphagrey($color-grey-70, black) !default;
    $color-grey-alpha-i-90: alphagrey($color-grey-20, black) !default;
    $color-grey-alpha-i-80: alphagrey($color-grey-40, black) !default;
    $color-grey-alpha-i-70: alphagrey($color-grey, black) !default;
    $color-grey-alpha-i-40: alphagrey($color-grey-80, black) !default;
    $color-grey-alpha-i-20: alphagrey($color-grey-90, black) !default;
}

$color-black: $color-grey-0 !default;
$color-white: $color-grey-100 !default;

@if $dark {
    $color-black: $color-grey-100 !default;
    $color-white: $color-grey-0 !default;
}

$color-error: #d70909 !default;
$color-warning: #ff8f00 !default;
$color-success: #4bb250 !default;

$bg-color-primary: $color-grey-100 !default;
$bg-color-secondary: $color-grey-90 !default;
$bg-color-tertiary: $color-grey-100 !default;
$bg-color-dark: $color-black !default;
$bg-color-info: $color-primary !default;

@if $dark {
    $bg-color-tertiary: #212223 !default;
}

$backdrop-color: rgba($color-black, 30%) !default;

@if $dark {
    $backdrop-color: rgba($color-black, 75%) !default;
}

$font-color-primary: $color-grey-20 !default;
$font-color-secondary: $color-grey-40 !default;
$font-color-tertiary: $color-grey-70 !default;
$font-color-action: $color-primary !default;
$font-color-inverted: $color-grey-100 !default;
$font-color-error: $color-error !default;

@if $dark {
    $font-color-primary: $color-grey-0 !default;
    $font-color-tertiary: $color-grey-80 !default;
}

$font-family: 'PT Sans', system-ui !default;

// При изменении значений $font-size/$line-height их так же нужно поменять в FontInput

$font-size: 16px !default;
$font-size-3xs: 8px !default; // Надо будет избавиться от этого размера
$font-size-2xs: 10px !default;
$font-size-xs: 12px !default;
$font-size-s: 14px !default;
$font-size-l: 20px !default;
$font-size-xl: 24px !default;
$font-size-2xl: 28px !default;

$line-height: 1.4 !default;
$line-height-s: 1.2 !default;
$line-height-l: 1.6 !default;

$font-h1-mobile: ('font-style': normal, 'font-weight': bold, 'font-size': $font-size-xl, 'line-height': $line-height-s) !default;
$font-h1-desktop: ('font-size': $font-size-2xl) !default;

$font-h2-mobile: ('font-style': normal, 'font-weight': bold, 'font-size': $font-size-l, 'line-height': $line-height-s) !default;
$font-h2-desktop: ('font-size': $font-size-xl) !default;

$font-h3-mobile: ('font-style': normal, 'font-weight': bold, 'font-size': $font-size-l, 'line-height': $line-height-s) !default;
$font-h3-desktop: () !default;

$font-h4-mobile: ('font-style': normal, 'font-weight': bold, 'font-size': $font-size, 'line-height': $line-height-s) !default;
$font-h4-desktop: () !default;

$font: ('font-size': $font-size, 'line-height': $line-height) !default;

$radius: 4px * 2 !default;
$radius-s: 4px !default;
$radius-l: 10000px !default;

$shadow: 0 2px 16px 0 rgba($color-black, 10%) !default;
$shadow-s: 0 2px 8px 0 rgba($color-black, 10%) !default;

@if $dark {
    $shadow: none !default;
    $shadow-s: none !default;
}

/********** Цвета для кастомного скроллбара **********/

$custom-scroll-color: $color-primary !default;
$custom-scroll-track-color: $color-grey-90 !default;

/********** Общие токены для таблиц **********/

$table-font: ('font-size': $font-size-s, 'line-height': $line-height-s) !default;
$table-border-width: 1px !default;
$table-border-color: transparent !default;
$table-radius: $radius !default;
$table-shadow: $shadow !default;

$table-header-bg: $color-grey-40 !default;
$table-header-color: $color-white !default;
$table-header-font: ('font-weight': bold, 'font-size': $font-size-s, 'line-height': $line-height-s) !default;
$table-header-small-font: ('font-size': $font-size-xs) !default;
$table-header-icon-bg: $color-grey-20 !default;
$table-header-icon-color: $color-white !default;

$table-resizer-active-color: $color-grey !default;
$table-resizer-color: color.change($table-resizer-active-color, $alpha: 0.25) !default;

$table-line-bg: $bg-color-tertiary !default;
$table-line-even-bg: $color-grey-90 !default;

// .table-sort

$table-sort-color: $color-grey-70 !default;
$table-sort-selected-color: $color-white !default;

// .table-settings

$table-settings-item-bg: $color-grey-90 !default;

$table-settings-icon-color: $color-grey-40 !default;

$table-settings-dnd-color: $color-grey-70 !default;

$table-settings-pin-color: $color-grey-70 !default;
$table-settings-pin-selected-color: $color-primary !default;

/********** Стили визуального редактора (.wysiwyg) **********/

$wysiwyg-color: $font-color-secondary !default;
$wysiwyg-font: $font !default;

$wysiwyg-link-color: $color-primary !default;
$wysiwyg-link-active-color: $color-primary-40 !default;

$wysiwyg-h1-color: $font-color-primary !default;
$wysiwyg-h1-mobile-font: $font-h1-mobile !default;
$wysiwyg-h1-desktop-font: $font-h1-desktop !default;

$wysiwyg-h2-color: $font-color-primary !default;
$wysiwyg-h2-mobile-font: $font-h2-mobile !default;
$wysiwyg-h2-desktop-font: $font-h2-desktop !default;

$wysiwyg-h3-color: $font-color-primary !default;
$wysiwyg-h3-mobile-font: $font-h3-mobile !default;
$wysiwyg-h3-desktop-font: $font-h3-desktop !default;

$wysiwyg-h4-color: $font-color-primary !default;
$wysiwyg-h4-mobile-font: $font-h4-mobile !default;
$wysiwyg-h4-desktop-font: $font-h4-desktop !default;

$wysiwyg-image-radius: $radius !default;

$wysiwyg-table-font: ('font-size': $font-size-s, 'line-height': $line-height-s) !default;
$wysiwyg-table-radius: $radius !default;
$wysiwyg-table-header-bg: $color-grey-40 !default;
$wysiwyg-table-header-color: $color-white !default;
$wysiwyg-table-header-font: ('font-weight': bold) !default;
$wysiwyg-table-separator-color: $color-grey-80 !default;
$wysiwyg-table-separator-width: 1px !default;
$wysiwyg-table-zebra-bg: $bg-color-tertiary !default;
$wysiwyg-table-zebra-td-bg: $color-grey-90 !default;
$wysiwyg-table-zebra-shadow: $shadow !default;

$wysiwyg-alert-bg: $color-grey-40 !default;
$wysiwyg-alert-warning-bg: $color-primary !default;
$wysiwyg-alert-color: $color-white !default;
$wysiwyg-alert-radius: $radius !default;
$wysiwyg-alert-link-color: $wysiwyg-alert-color !default;
$wysiwyg-alert-active-link-color: $color-primary-40 !default;

/********** Встроенные изображения (.image) **********/

$image-bg: $bg-color-secondary !default;
$image-fill: $bg-color-tertiary !default;
$image-line: $color-grey-0 !default;
$image-primary: $color-primary !default;

/********** Ссылка (.link) **********/

// Primary

$link-color: $font-color-primary !default;
$link-active-color: $color-primary-40 !default;

// Secondary (.link_alt)

$link-alt-color: $color-primary !default;
$link-alt-active-color: $color-primary-40 !default;

// Grey (.link_grey)

$link-grey-color: $font-color-secondary !default;
$link-grey-active-color: $color-primary-40 !default;

// Inverted (.link_inverted)

$link-inverted-color: $font-color-inverted !default;
$link-inverted-active-color: $color-primary-40 !default;

/********** Кнопка (.button) **********/

// Primary

$button-bg: $color-primary !default;
$button-border-width: 1px !default;
$button-border-color: $color-primary !default;
$button-radius: $radius-l !default;
$button-color: $color-white !default;
$button-font: ('font-weight': bold, 'font-size': $font-size, 'line-height': 1) !default;
$button-height: 4px * 12 !default;
$button-min-width: 4px * 38 !default;
$button-padding: 0 4px * 7 !default;

$button-disabled-bg: rgba($color-primary, 35%) !default;
$button-disabled-border-color: rgba($color-primary, 35%) !default;
$button-disabled-color: $color-white !default;

$button-active-bg: $color-primary-40 !default;
$button-active-border-color: $color-primary-40 !default;
$button-active-color: $color-white !default;

$button-icon-size: 4px * 6 !default;
$button-icon-space-before: 4px * 2 !default;
$button-icon-space-after: 4px * 2 !default;

$button-small-font: ('font-weight': bold, 'font-size': $font-size-s, 'line-height': 1) !default;
$button-small-height: 4px * 10 !default;
$button-small-min-width: 4px * 18 !default;
$button-small-padding: 0 4px * 4 !default;

$button-square-radius: $radius !default;

$button-wide-min-width: 4px * 52 !default;
$button-small-wide-min-width: 4px * 32 !default;

// Secondary (.button_alt)

$button-alt-bg: transparent !default;
$button-alt-border-width: 1px !default;
$button-alt-border-color: $color-primary !default;
$button-alt-color: $color-primary !default;

$button-alt-disabled-bg: transparent !default;
$button-alt-disabled-border-color: rgba($color-primary, 35%) !default;
$button-alt-disabled-color: rgba($color-primary, 35%) !default;

$button-alt-active-bg: $color-primary-40 !default;
$button-alt-active-border-color: $color-primary-40 !default;
$button-alt-active-color: $color-white !default;

// Ghost (.button_ghost)

$button-ghost-bg: $color-grey-90 !default;
$button-ghost-border-width: 1px !default;
$button-ghost-border-color: $color-grey-90 !default;
$button-ghost-color: $color-primary !default;

$button-ghost-disabled-bg: $color-grey-90 !default;
$button-ghost-disabled-border-color: $color-grey-90 !default;
$button-ghost-disabled-color: rgba($color-primary, 35%) !default;

$button-ghost-active-bg: $color-primary-80 !default;
$button-ghost-active-border-color: $color-primary-80 !default;
$button-ghost-active-color: $color-primary !default;

// Grey (.button_grey)

$button-grey-bg: $color-grey-40 !default;
$button-grey-border-width: 1px !default;
$button-grey-border-color: $color-grey-40 !default;
$button-grey-color: $color-white !default;

$button-grey-disabled-bg: $color-grey-80 !default;
$button-grey-disabled-border-color: $color-grey-80 !default;
$button-grey-disabled-color: $color-white !default;

$button-grey-active-bg: $color-primary-40 !default;
$button-grey-active-border-color: $color-primary-40 !default;
$button-grey-active-color: $color-white !default;

// Inverted (.button_inverted)

$button-inverted-bg: transparent !default;
$button-inverted-border-width: 1px !default;
$button-inverted-border-color: $color-white !default;
$button-inverted-color: $color-white !default;

$button-inverted-disabled-bg: transparent !default;
$button-inverted-disabled-border-color: rgba($color-white, 50%) !default;
$button-inverted-disabled-color: rgba($color-white, 50%) !default;

$button-inverted-active-bg: $color-white !default;
$button-inverted-active-border-color: $color-white !default;
$button-inverted-active-color: $color-primary !default;

/********** Поле ввода (.input) **********/

$input-bg: $bg-color-tertiary !default;
$input-border-width: 1px !default;
$input-border-color: $color-grey-80 !default;
$input-radius: $radius !default;
$input-color: $font-color-primary !default;
$input-font: ('font-size': $font-size, 'line-height': $line-height-s, 'font-family': $font-family) !default;
$input-placeholder-color: rgba($input-color, 50%) !default;
$input-height: 4px * 12 !default;
$input-padding-x: 4px * 4 !default;
$input-padding-y: 4px * 3 !default;

$input-filled-border-color: $color-primary !default;

$input-active-bg: $input-bg !default;
$input-active-border-color: $color-primary !default;
$input-active-outline-color: $input-active-border-color !default;
$input-active-color: $input-color !default;

$input-disabled-bg: rgba($color-primary-20, 7%) !default;
$input-disabled-border-color: rgba($color-primary-20, 14%) !default;
$input-disabled-color: rgba($input-color, 50%) !default;
$input-disabled-placeholder-color: rgba($input-color, 25%) !default;

$input-error-bg: $input-bg !default;
$input-error-border-color: $color-error !default;
$input-error-color: $input-color !default;

$input-small-font: () !default;
$input-small-height: 4px * 10 !default;
$input-small-padding-x: 4px * 4 !default;
$input-small-padding-y: 4px !default;

$input-textarea-font: ('line-height': $line-height) !default;
$input-textarea-min-height: 4px * 36 !default;

$input-textarea-small-min-height: 4px * 18 !default;

/********** Поле ввода с подсказкамми (.suggest-input) **********/

$suggest-input-item-height: 4px * 10 !default;
$suggest-input-item-color: $color-grey-20 !default;
$suggest-input-item-font: ('font-size': $font-size, 'line-height': $line-height) !default;
$suggest-input-item-mark-color: inherit !default;
$suggest-input-item-mark-font: ('font-weight': bold) !default;

$suggest-input-item-active-bg: $color-grey-90 !default;
$suggest-input-item-active-color: $font-color-action !default;

$suggest-input-list-bg: $bg-color-primary !default;
$suggest-input-list-radius: $input-radius !default;
$suggest-input-list-shadow: $shadow-s !default;

$suggest-input-not-found-color: $color-grey-20 !default;
$suggest-input-not-found-font: ('font-style': italic, 'font-size': $font-size, 'line-height': $line-height) !default;

$suggest-input-clear-color: $color-grey-70 !default;
$suggest-input-clear-active-color: $color-grey-40 !default;

/********** Поле ввода даты (.date-input) **********/

$date-input-icon-color: $color-grey-70 !default;
$date-input-disabled-icon-color: $color-grey-80 !default;
$date-input-icon-size: 4px * 6 !default;
$date-input-small-icon-size: 4px * 5 !default;

$date-input-bg: $bg-color-primary !default;
$date-input-radius: $input-radius !default;
$date-input-shadow: $shadow-s !default;
$date-input-color: $font-color-primary !default;
$date-input-disabled-color: $font-color-tertiary !default;

$date-input-title-color: $date-input-color !default;
$date-input-weekday-color: $font-color-secondary !default;

$date-input-arrow-color: $color-grey-40 !default;
$date-input-arrow-active-bg: $color-grey-90 !default;

$date-input-solid-bg: $color-primary !default;
$date-input-solid-color: $font-color-inverted !default;

$date-input-light-bg: $color-primary-80 !default;
$date-input-light-color: $date-input-color !default;

$date-input-outline-bg: $color-primary-80 !default;
$date-input-outline-border-color: $color-primary !default;
$date-input-outline-color: $date-input-color !default;

/********** Чекбокс (.checkbox) **********/

$checkbox-bg: $input-bg !default;
$checkbox-border-width: $input-border-width !default;
$checkbox-border-color: $color-grey-70 !default;
$checkbox-radius: 2px !default;
$checkbox-size: 16px !default;

$checkbox-disabled-bg: $input-disabled-bg !default;
$checkbox-disabled-border-color: $input-disabled-border-color !default;

$checkbox-active-bg: $color-grey-90 !default;
$checkbox-active-border-color: $color-grey !default;

$checkbox-check-color: $color-success !default;

$checkbox-label-color: $font-color-secondary !default;
$checkbox-label-font: ('font-size': $font-size, 'line-height': $line-height-s) !default;

$checkbox-disabled-label-color: $input-disabled-color !default;

/********** Радикнопка (.radio) **********/

$radio-bg: $input-bg !default;
$radio-border-width: $input-border-width !default;
$radio-border-color: $color-grey-70 !default;
$radio-size: 16px !default;

$radio-disabled-bg: $input-disabled-bg !default;
$radio-disabled-border-color: $input-disabled-border-color !default;

$radio-active-bg: $color-grey-90 !default;
$radio-active-border-color: $color-grey !default;

$radio-dot-color: $color-success !default;

$radio-label-color: $font-color-secondary !default;
$radio-label-font: ('font-size': $font-size, 'line-height': $line-height-s) !default;

$radio-disabled-label-color: $input-disabled-color !default;

/********** Выпадающий список (.select) **********/

$select-bg: $input-bg !default;
$select-border-width: $input-border-width !default;
$select-border-color: $input-border-color !default;
$select-radius: $input-radius !default;
$select-color: $input-color !default;
$select-font: $input-font !default;
$select-placeholder-color: $input-placeholder-color !default;
$select-height: $input-height !default;
$select-padding: $input-padding-x !default;

$select-active-bg: $input-active-bg !default;
$select-active-border-color: $input-active-border-color !default;
$select-active-color: $input-active-color !default;

$select-disabled-bg: $input-disabled-bg !default;
$select-disabled-border-color: $input-disabled-border-color !default;
$select-disabled-color: $input-disabled-color !default;

$select-error-bg: $input-error-bg !default;
$select-error-border-color: $input-error-border-color !default;
$select-error-color: $input-error-color !default;

$select-small-font: $input-small-font !default;
$select-small-height: $input-small-height !default;
$select-small-padding: $input-small-padding-x !default;

/********** Выбор времени (.time-select) **********/

$time-select-dash-color: $color-grey-40 !default;

/********** Выбор файла (.file-input) **********/

$file-input-bg: $input-bg !default;
$file-input-border-width: $input-border-width !default;
$file-input-border-color: $input-border-color !default;
$file-input-radius: $input-radius !default;
$file-input-dragover-bg: $color-grey-90 !default;
$file-input-dragover-border-color: $file-input-dragover-bg !default;

$file-input-descr-font: ('font-size': $font-size-s, 'line-height': $line-height) !default;
$file-input-descr-color: $font-color-secondary !default;

$file-input-file-bg: $color-grey-90 !default;
$file-input-file-radius: $file-input-radius !default;
$file-input-dragover-file-bg: $color-grey-80 !default;

$file-input-file-name-color: $font-color-secondary !default;
$file-input-file-name-font: ('font-size': $font-size, 'line-height': $line-height-s) !default;

$file-input-file-error-color: $color-error !default;
$file-input-file-error-font: ('font-style': italic, 'font-size': $font-size-s, 'line-height': $line-height-s) !default;

$file-input-remove-color: $color-grey-70 !default;
$file-input-remove-active-color: $color-primary-40 !default;

/********** Выбор цвета (.color-input) **********/

$color-input-radius: $radius-l !default;
$color-input-border-width: 2px !default;
$color-input-border-color: $color-grey-80 !default;

$color-input-active-border-color: $color-primary !default;

$color-input-icon-dark-color: $color-black !default;
$color-input-icon-light-color: $color-white !default;

/********** Выбор шрифта (.font-input) **********/

$font-input-label-color: $font-color-secondary !default;
$font-input-label-font: ('font-size': $font-size-xs) !default;

/********** Список радиокнопок (.radio-list) **********/

$radio-list-bg: $bg-color-tertiary !default;
$radio-list-border-width: 1px !default;
$radio-list-border-color: $color-primary !default;
$radio-list-radius: $radius-l !default;
$radio-list-color: $color-primary !default;
$radio-list-font: ('font-weight': bold, 'font-size': $font-size-s, 'line-height': 1) !default;

$radio-list-disabled-bg: $bg-color-tertiary !default;
$radio-list-disabled-border-color: rgba($color-primary, 35%) !default;
$radio-list-disabled-color: rgba($color-primary, 35%) !default;

$radio-list-active-bg: $color-primary !default;
$radio-list-active-border-color: $color-primary !default;
$radio-list-active-color: $color-white !default;

$radio-list-selected-bg: $color-primary-40 !default;
$radio-list-selected-border-color: $color-primary-40 !default;
$radio-list-selected-color: $color-white !default;

$radio-list-selected-disabled-bg: rgba($color-primary, 35%) !default;
$radio-list-selected-disabled-border-color: rgba($color-primary, 35%) !default;
$radio-list-selected-disabled-color: $color-white !default;

/********** Переключатель (.toggle) **********/

$toggle-bg: $bg-color-tertiary !default;
$toggle-border-width: 1px !default;
$toggle-border-color: $color-grey-70 !default;
$toggle-radius: $radius-l !default;
$toggle-check-color: $color-grey-70 !default;
$toggle-check-radius: $radius-l !default;

$toggle-disabled-bg: $input-disabled-bg !default;
$toggle-disabled-border-color: $input-disabled-border-color !default;
$toggle-disabled-check-color: $color-grey-80 !default;

$toggle-active-bg: $color-success !default;
$toggle-active-border-color: $color-success !default;
$toggle-active-check-color: $color-white !default;

$toggle-active-disabled-bg: $color-success !default;
$toggle-active-disabled-border-color: $color-success !default;
$toggle-active-disabled-check-color: rgba($color-white, 50%) !default;

$toggle-label-color: $font-color-secondary !default;
$toggle-label-font: ('font-size': $font-size, 'line-height': $line-height-s) !default;

/********** Ползунок (.range-input) **********/

$range-input-track-height: 4px !default;
$range-input-track-color: $color-grey-80 !default;
$range-input-track-disabled-color: $input-disabled-bg !default;

$range-input-connect-color: $color-grey-20 !default;
$range-input-connect-disabled-color: $color-grey-80 !default;

$range-input-handle-size: 16px !default;
$range-input-handle-color: $color-primary !default;
$range-input-handle-disabled-color: $color-grey-80 !default;
$range-input-handle-active-color: $color-primary-40 !default;

$range-input-separator-color: $input-border-color !default;

/********** Установка рейтинга (.rating-input) **********/

$rating-input-star-icon-color: $color-grey-80 !default;
$rating-input-star-icon-active-color: $color-primary !default;

/********** Ввод количества (.quantity) **********/

$quantity-input-radius: $radius !default;
$quantity-input-medium-radius: $radius-l !default;
$quantity-input-big-radius: $radius-l !default;

$quantity-input-button-bg: $color-primary !default;
$quantity-input-button-border-color: $color-primary !default;
$quantity-input-button-border-disabled-color: $color-grey-80 !default;
$quantity-input-button-border-active-color: $color-primary-40 !default;
$quantity-input-button-border-width: 1px !default;
$quantity-input-button-color: $color-white !default;
$quantity-input-button-disabled-bg: $color-grey-80 !default;

$quantity-input-bg: $input-bg !default;
$quantity-input-color: $font-color-primary !default;
$quantity-input-font: ('font-size': $font-size-s, 'line-height': 1, 'font-family': $font-family) !default;
$quantity-input-border-color: $color-grey-80 !default;
$quantity-input-border-width: 1px !default;
$quantity-input-disabled-border-color: $color-grey-90 !default;
$quantity-input-disabled-color: $color-grey-80 !default;
$quantity-input-disabled-focus-visible-border-color: $color-grey-70 !default;

$quantity-input-medium-font: ('font-weight': bold) !default;

$quantity-input-big-font: ('font-weight': bold) !default;

/********** Оверлей (.overlay) **********/

$overlay-bg: $backdrop-color !default;

/********** Глобальный индикатор загрузки (.loader) **********/

$loader-bg: $backdrop-color !default;
$loader-color: $color-primary !default;

$loader-label-color: $color-white !default;
$loader-label-mobile-font: ('font-weight': bold, 'font-size': $font-size, 'line-height': $line-height) !default;
$loader-label-desktop-font: ('font-size': $font-size-xl) !default;

/********** Локальный индикатор загрузки (.spinner) **********/

$spinner-speed: 500ms !default;

$spinner-size: 2px !default;
$spinner-l-container-size: 20px !default;
$spinner-l-size: 3px !default;

$spinner-color: $color-primary !default;
$spinner-inverted-color: $color-grey-100 !default;

/********** Форма (.form) **********/

$form-group-title-color: $font-color-primary !default;
$form-group-title-font: ('font-weight': bold, 'font-size': $font-size, 'line-height': $line-height-s) !default;

$form-label-color: $font-color-secondary !default;
$form-label-font: ('font-size': $font-size, 'line-height': $line-height-s) !default;

$form-required-color: $color-error !default;
$form-required-font: ('font-weight': bold, 'font-size': $font-size, 'line-height': $line-height-s) !default;

$form-value-color: $font-color-primary !default;
$form-value-font: ('font-size': $font-size, 'line-height': $line-height-s) !default;

$form-help-icon-color: $color-grey-70 !default;
$form-help-icon-active-color: $color-primary-40 !default;

$form-input-error-color: $font-color-error !default;
$form-input-error-font: ('font-size': $font-size-xs, 'line-height': $line-height-s) !default;

$form-input-descr-color: $font-color-tertiary !default;
$form-input-descr-font: ('font-size': $font-size-xs, 'line-height': $line-height-s) !default;

$form-submit-descr-color: $font-color-secondary !default;
$form-submit-descr-font: ('font-size': $font-size-xs, 'line-height': $line-height-s) !default;

$form-submit-error-bg: $bg-color-tertiary !default;
$form-submit-error-radius: $radius !default;
$form-submit-error-shadow: $shadow !default;
$form-submit-error-color: $font-color-error !default;
$form-submit-error-mobile-font: ('font-size': $font-size-xs, 'line-height': $line-height) !default;
$form-submit-error-desktop-font: ('font-size': $font-size-s) !default;
$form-submit-error-padding: 4px * 4 4px * 6 !default;

/********** Диалоговое окно (.dialog) **********/

$dialog-backdrop-color: $backdrop-color !default;
$dialog-bg: $bg-color-tertiary !default;
$dialog-color: $font-color-primary !default;
$dialog-shadow: $shadow !default;
$dialog-radius: $radius !default;
$dialog-s-max-width: 592px !default;
$dialog-m-max-width: 672px !default;
$dialog-l-max-width: 912px !default;

$dialog-close-radius: 50% !default;
$dialog-close-color: $color-grey-40 !default;
$dialog-close-active-color: $color-primary !default;

$dialog-header-image-border-width: 1px !default;
$dialog-header-image-border-color: $color-grey-80 !default;

$dialog-title-mobile-font: ('font-weight': bold, 'font-size': $font-size-l, 'line-height': $line-height-s) !default;
$dialog-title-desktop-font: ('font-size': $font-size-2xl) !default;

/********** Боковая панель **********/

// .sidebar

$sidebar-bg: $bg-color-tertiary !default;

$sidebar-button-bg: $color-grey-90 !default;
$sidebar-button-color: $color-grey-70 !default;
$sidebar-button-label-color: $color-grey-20 !default;
$sidebar-button-label-font: ('line-height': $line-height-s) !default;
$sidebar-disabled-button-bg: $color-primary !default;
$sidebar-disabled-button-color: $color-white !default;
$sidebar-disabled-button-label-color: $sidebar-disabled-button-color !default;
$sidebar-active-button-bg: $sidebar-button-bg !default;
$sidebar-active-button-color: $color-primary !default;
$sidebar-active-button-label-color: $sidebar-active-button-color !default;

$sidebar-close-bg: $sidebar-button-bg !default;
$sidebar-close-color: $color-grey-20 !default;

$sidebar-notification-bg: $color-error !default;
$sidebar-notification-color: $color-white !default;
$sidebar-notification-font: ('font-weight': bold, 'font-size': $font-size-3xs, 'line-height': 1) !default;

$sidebar-header-separator-color: autocolor(('light': $color-grey-alpha-80, 'dark': $color-grey-alpha-i-90), $sidebar-bg) !default;
$sidebar-header-separator-width: 1px !default;
$sidebar-header-icon-border-color: $color-primary !default;
$sidebar-header-icon-border-width: 1px !default;
$sidebar-header-icon-bg: $color-primary-80 !default;
$sidebar-header-icon-color: $color-primary !default;
$sidebar-header-title-color: $color-primary !default;
$sidebar-header-title-font: ('font-weight': bold, 'font-size': $font-size, 'line-height': $line-height) !default;

$sidebar-sub-title-bg: $color-primary !default;
$sidebar-sub-title-color: $color-white !default;
$sidebar-sub-title-font: ('font-weight': bold, 'font-size': $font-size, 'line-height': $line-height) !default;

$sidebar-title-mobile-font: ('font-weight': bold, 'font-size': $font-size-l, 'line-height': $line-height-s) !default;
$sidebar-title-desktop-font: ('font-size': $font-size-xl) !default;

$sidebar-descr-color: $font-color-secondary !default;
$sidebar-descr-font: ('font-size': $font-size, 'line-height': $line-height) !default;
$sidebar-descr-icon-color: $color-grey-70 !default;

$sidebar-catalog-disabled-button-bg: $color-grey-80 !default;
$sidebar-catalog-disabled-button-color: $sidebar-button-label-color !default;
$sidebar-catalog-header-bg: $sidebar-button-bg !default;

/********** Табы (.tabs) **********/

$tabs-border-width: 2px !default;
$tabs-border-color: $color-grey-80 !default;

$tabs-line-color: $color-primary !default;

$tabs-label-font: ('font-weight': bold, 'font-size': $font-size, 'line-height': 1) !default;

$tabs-counter-bg: $color-grey-80 !default;
$tabs-counter-color: $font-color-primary !default;
$tabs-counter-font: ('font-size': $font-size-xs) !default;
$tabs-counter-radius: $radius-s !default;

/********** Всплывающие подсказки / Tooltips **********/

$tooltip-shadow: $shadow !default;
$tooltip-radius: $radius !default;

$tooltip-font: ('font-size': $font-size, 'line-height': $line-height) !default;
$tooltip-small-font: ('font-size': $font-size-s, 'line-height': $line-height) !default;

$tooltip-light-bg: $bg-color-tertiary !default;
$tooltip-light-color: $font-color-secondary !default;

$tooltip-dark-bg: $color-grey-0 !default;
$tooltip-dark-color: $font-color-inverted !default;

$tooltip-title-font: ('font-size': $font-size) !default;

$tooltip-image-max-height: 300px !default;

// .action-list

$action-list-link-color: $color-grey-70 !default;

$action-list-link-separator-color: autocolor(('light': $color-grey-alpha-80, 'dark': $color-grey-alpha-i-90), $tooltip-light-bg) !default;
$action-list-link-separator-width: 1px !default;

/********** Панель с предупреждением (.warning) **********/

$warning-message-bg: $bg-color-tertiary !default;
$warning-message-radius: $radius !default;
$warning-message-shadow: $shadow !default;
$warning-message-color: $color-warning !default;

$warning-message-small-shadow: $shadow-s !default;

$warning-message-success-color: $color-success !default;
$warning-message-info-color: $color-primary !default;
$warning-message-light-info-color: $color-primary-70 !default;
$warning-message-error-color: $color-error !default;

$warning-message-solid-bg: $warning-message-color !default;
$warning-message-solid-color: $font-color-inverted !default;
$warning-message-solid-success-bg: $warning-message-success-color !default;
$warning-message-solid-success-color: $warning-message-solid-color !default;
$warning-message-solid-info-bg: $warning-message-info-color !default;
$warning-message-solid-info-color: $warning-message-solid-color !default;
$warning-message-solid-light-info-bg: $color-primary-80 !default;
$warning-message-solid-light-info-color: $font-color-secondary !default;
$warning-message-solid-error-bg: $warning-message-error-color !default;
$warning-message-solid-error-color: $warning-message-solid-color !default;

$warning-message-title-font: ('font-weight': bold, 'font-size': $font-size-l, 'line-height': $line-height-s) !default;
$warning-message-small-title-font: ('font-weight': bold, 'font-size': $font-size-s, 'line-height': $line-height-s) !default;

$warning-message-descr-font: ('font-size': $font-size, 'line-height': $line-height) !default;
$warning-message-small-descr-font: ('font-size': $font-size-xs, 'line-height': $line-height) !default;

$warning-message-descr-color: $font-color-secondary !default;

$warning-message-icon-color: $warning-message-color !default;
$warning-message-solid-icon-color: $warning-message-solid-color !default;
$warning-message-success-icon-color: $warning-message-success-color !default;
$warning-message-solid-success-icon-color: $warning-message-solid-success-color !default;
$warning-message-info-icon-color: $warning-message-info-color !default;
$warning-message-solid-info-icon-color: $warning-message-solid-info-color !default;
$warning-message-light-info-icon-color: $warning-message-light-info-color !default;
$warning-message-solid-light-info-icon-color: $color-primary !default;
$warning-message-error-icon-color: $warning-message-error-color !default;
$warning-message-solid-error-icon-color: $warning-message-solid-error-color !default;

/********** Панель пустого состояния (.empty-list) **********/

$empty-list-bg: $bg-color-tertiary !default;
$empty-list-radius: $radius !default;
$empty-list-icon-color: $color-grey-90 !default;

$empty-list-title-mobile-font: ('font-weight': bold, 'font-size': $font-size-l, 'line-height': $line-height-s) !default;
$empty-list-title-desktop-font: ('font-size': $font-size-xl) !default;

$empty-list-footer-separator-color: autocolor(('light': $color-grey-alpha-80, 'dark': $color-grey-alpha-i-90), $empty-list-bg) !default;
$empty-list-footer-separator-width: 1px !default;

$empty-list-action-icon-color: $color-grey-40 !default;
$empty-list-action-icon-active-color: $color-primary-40 !default;

/********** Навигация слайдеров (.slider-nav) **********/

$slider-nav-button-bg: transparent !default;
$slider-nav-button-border-color: transparent !default;
$slider-nav-button-border-width: 1px !default;
$slider-nav-button-radius: 50% !default;

$slider-nav-button-fill-white-bg: $color-white !default;
$slider-nav-button-fill-white-border-color: $color-white !default;
$slider-nav-button-fill-white-shadow: $shadow !default;
$slider-nav-button-fill-white-color: $color-grey-70 !default;

$slider-nav-button-fill-white-active-bg: $slider-nav-button-fill-white-bg !default;
$slider-nav-button-fill-white-active-color: $color-grey-40 !default;
$slider-nav-button-fill-white-active-border-color: $slider-nav-button-fill-white-border-color !default;

/********** Пагинация слайдеров (.slider-pagination) **********/

$slider-pagination-bullet-size: 8px !default;
$slider-pagination-bullet-gap: 8px !default;

$slider-pagination-bullet-light-bg: $color-grey-90 !default;
$slider-pagination-bullet-light-border-color: $color-grey-90 !default;
$slider-pagination-bullet-light-active-bg: $slider-pagination-bullet-light-bg !default;
$slider-pagination-bullet-light-active-border-color: $slider-pagination-bullet-light-border-color !default;
$slider-pagination-bullet-light-selected-bg: $color-primary !default;
$slider-pagination-bullet-light-selected-border-color: $color-primary !default;

$slider-pagination-bullet-dark-bg: $color-grey-80 !default;
$slider-pagination-bullet-dark-border-color: $color-grey-80 !default;
$slider-pagination-bullet-dark-active-bg: $slider-pagination-bullet-dark-bg !default;
$slider-pagination-bullet-dark-active-border-color: $slider-pagination-bullet-dark-border-color !default;
$slider-pagination-bullet-dark-selected-bg: $color-primary !default;
$slider-pagination-bullet-dark-selected-border-color: $color-primary !default;

/********** Баннер (.banner) **********/

$banner-radius: $radius;

/********** Хлебные крошки (.breadcrumbs) **********/

$breadcrumbs-item-arrow-color: $color-grey-80 !default;
$breadcrumbs-color: $link-grey-color !default;
$breadcrumbs-font: ('font-size': $font-size-xs, 'line-height': $line-height) !default;

$breadcrumbs-mobile-toggle-color: $breadcrumbs-color !default;

/********** Пагинация **********/

// .pagination

$pagination-item-color: $font-color-primary !default;
$pagination-item-font: ('font-weight': bold, 'font-size': $font-size, 'line-height': 1) !default;
$pagination-item-active-color: $color-primary !default;
$pagination-item-disabled-color: $color-grey-70 !default;

// .pagination-group

$pagination-group-color: $font-color-secondary;

/********** Блок "Итого" (.total) **********/

$total-bg: $bg-color-tertiary !default;
$total-radius: $radius !default;
$total-font: ('font-size': $font-size, 'line-height': $line-height-s) !default;
$total-shadow: $shadow !default;

$total-title-mobile-font: ('font-weight': bold, 'font-size': $font-size-l, 'line-height': $line-height-s) !default;
$total-title-desktop-font: ('font-size': $font-size-xl) !default;

$total-specs-label-color: $font-color-secondary !default;
$total-specs-label-font: ('font-size': $font-size-s, 'line-height': $line-height-s) !default;

$total-specs-value-font: ('font-weight': bold) !default;
$total-specs-value-error-color: $color-error !default;

$total-amount-list-separator-color: autocolor(('light': $color-grey-alpha-80, 'dark': $color-grey-alpha-i-90), $total-bg) !default;
$total-amount-list-separator-width: 1px !default;

$total-amount-label-color: $font-color-secondary !default;
$total-amount-label-font: ('font-size': $font-size-s, 'line-height': $line-height-s) !default;

$total-amount-value-color: $font-color-secondary !default;
$total-amount-value-font: ('font-size': $font-size-s, 'line-height': $line-height-s) !default;

$total-amount-value-s-color: $font-color-secondary !default;
$total-amount-value-s-font: ('font-size': $font-size-xs) !default;

$total-amount-value-b-color: $font-color-primary !default;
$total-amount-value-b-mobile-font: ('font-weight': bold, 'font-size': $font-size-l) !default;
$total-amount-value-b-desktop-font: ('font-size': $font-size-xl) !default;

$total-amount-tax-color: $font-color-tertiary !default;
$total-amount-tax-font: ('font-size': $font-size-xs, 'line-height': $line-height-s) !default;

/********** Удалить всё (.delete-all) **********/

$delete-all-color: $font-color-secondary !default;
$delete-all-active-color: $color-error !default;

$delete-all-icon-color: $color-grey-70 !default;
$delete-all-icon-active-color: $delete-all-active-color !default;

$deleta-all-action-list-color: $link-grey-color !default;
$delete-all-action-list-icon-color: $link-grey-color !default;

/********** Шаги (.steps) **********/

$steps-item-number-border-width: 1px !default;
$steps-item-number-border-color: $color-grey-90 !default;
$steps-item-number-bg: $bg-color-tertiary !default;
$steps-item-number-color: $font-color-secondary !default;

$steps-item-active-number-bg: $color-primary !default;
$steps-item-active-number-color: $color-white !default;

$steps-item-arrow-bg: $color-grey-70 !default;

$steps-item-active-arrow-bg: $color-grey-20 !default;

$steps-label-color: $font-color-primary !default;
$steps-label-font: ('font-weight': bold, 'font-size': $font-size, 'line-height': $line-height) !default;

/********** Шапка **********/

// .header-announcement

$header-announcement-bg: $color-primary-60 !default;
$header-announcement-color: autocolor(('light': $font-color-primary, 'dark': $font-color-inverted), $header-announcement-bg) !default;
$header-announcement-font: ('font-size': $font-size-s, 'line-height': $line-height-s) !default;

$header-announcement-secondary-bg: $bg-color-secondary !default;
$header-announcement-secondary-color: $font-color-primary !default;

$header-announcement-error-bg: $color-error !default;
$header-announcement-error-color: $header-announcement-color !default;

$header-announcement-warning-bg: $color-warning !default;
$header-announcement-warning-color: $header-announcement-color !default;

$header-announcement-success-bg: $color-success !default;
$header-announcement-success-color: $header-announcement-color !default;

/********** Основной каркас (.content) **********/

$content-bg: $bg-color-primary !default;
$content-bg-grey: $bg-color-secondary !default;

$content-header-link-mobile-font: ('font-size': $font-size-xs, 'line-height': 1) !default;
$content-header-link-desktop-font: ('font-size': $font-size) !default;

$content-title-mobile-font: $font-h1-mobile !default;
$content-title-desktop-font: $font-h1-desktop !default;
$content-title-small-mobile-font: $font-h2-mobile !default;
$content-title-small-desktop-font: $font-h2-desktop !default;

/********** Адаптивные точки **********/

// При изменении устройств изменить их так же в mm.js

$breakpoints: (
    'phone': 0,
    'tablet-portrait': 600px,
    'tablet-landscape': 900px,
    'desktop': 1200px,
    'big-desktop': 1500px,
) !default;
$breakpoints-keys: map.keys($breakpoints);

@each $key, $value in $breakpoints {
    $key-index: list.index($breakpoints-keys, $key);
    $next-value: 0;

    @if $key-index < list.length($breakpoints-keys) {
        $next-value: map.get($breakpoints, list.nth($breakpoints-keys, $key-index + 1));
    }

    @if $key-index == 1 {
        @custom-media --#{$key}-only (max-width: #{$next-value - 1});
    } @else if $key-index == list.length($breakpoints-keys) {
        @custom-media --#{$key}-up (min-width: #{$value});
    } @else {
        @custom-media --#{$key}-only (min-width: #{$value}) and (max-width: #{$next-value - 1});
        @custom-media --#{$key}-up (min-width: #{$value});
        @custom-media --#{$key}-down (max-width: #{$next-value - 1});
    }
}

/********** Миксины **********/

@mixin font($font) {
    @each $prop, $value in $font {
        #{$prop}: $value;
    }
}

@mixin dark-border($width: 2px, $color: color.scale($bg-color-tertiary, $lightness: 10%)) {
    @if $dark {
        border: $width solid $color;
    } @else {
        border: none;
    }
}

@mixin dark-border-disable($sides: (top, right, bottom, left)) {
    @each $side in $sides {
        border-#{$side}-style: none;
    }
}

@mixin ul-solid($color) {
    background-image: linear-gradient(90deg, $color, $color 100%);
    background-position-x: 0;
    background-position-y: 95%;
    background-repeat: repeat-x;
    background-size: 10px 1px;
}

@mixin ul-dashed($color) {
    background-image: linear-gradient(90deg, $color, $color 50%, transparent 50%);
    background-position-x: 0;
    background-position-y: 95%;
    background-repeat: repeat-x;
    background-size: 6px 1px;
}

@mixin ul-dotted($color) {
    background-image: linear-gradient(90deg, $color, $color 50%, transparent 50%);
    background-position-x: 0;
    background-position-y: 95%;
    background-repeat: repeat-x;
    background-size: 2px 1px;
}

@mixin custom-scroll() {
    @media (--desktop-up) {
        scrollbar-color: $custom-scroll-color $custom-scroll-track-color;
        scrollbar-width: thin;
    }

    &::-webkit-scrollbar {
        @media (--desktop-up) {
            width: 4px;
        }
    }

    &::-webkit-scrollbar-thumb {
        @media (--desktop-up) {
            background-color: $custom-scroll-color;
        }
    }

    &::-webkit-scrollbar-track {
        @media (--desktop-up) {
            background-color: $custom-scroll-track-color;
        }
    }
}