@mixin apply-text-formatting($font-weight, $heading) {
    @include apply-font-weight($font-weight);
    @include apply-font-style($heading);
}

@mixin apply-font-weight($font-weight) {
    @if $font-weight == semibold {
        font-weight: $fw-semibold;
    } @else if $font-weight == regular {
        font-weight: $fw-regular;
    } @else {
        @error "Unknown font-weight #{$font-weight}.";
    }
}

@mixin apply-font-style($heading) {
    @if $heading == h1 {
        font-size: $fs-1;
        line-height: $lh-30;
    } @else if $heading == h2 {
        font-size: $fs-2;
        line-height: $lh-24;
    } @else if $heading == h3 {
        font-size: $fs-3;
        line-height: $lh-24;
    } @else if $heading == h4 {
        font-size: $fs-4;
        line-height: $lh-16;
    } @else if $heading == h5 {
        font-size: $fs-5;
        line-height: $lh-16;
    } @else if $heading == h6 {
        font-size: $fs-6;
        line-height: $lh-16;
    } @else {
        @error "Unknown heading #{$heading}.";
    }
}

@function findNearest($list, $key) {
    $lastFound: nth($list, 1);

    @each $element in $list {
        @if $key <=$element {
            $lastFound: $element;
        }
    }

    @return $lastFound;
}

@mixin color-modifiers($attribute: 'color', $prefix: '-', $separator: '-') {

    @each $name,
    $color in $colors {
        &#{$prefix}#{$name} {

            & {
                #{$attribute}: map-get($color, nth(map-keys($color), 1));
            }

            @each $key in $colorRange {
                $found: findNearest(map-keys($color), $key);

                @if $found {
                    &#{$separator}#{$key} {
                        #{$attribute}: map-get($color, $found);
                    }
                }
            }
        }
    }
}

@mixin generate-btn-styles-types($prefix: '-') {

    @each $name,
    $color in $colors {
        &#{$prefix}#{$name} {
            @include generate-btn-type-solid($color);
            @include generate-btn-type-soft($color);
            @include generate-btn-type-outline($color);
            @include generate-btn-type-empty($color);
        }
    }
}

@mixin generate-btn-type-solid($color) {

    &.ngx-btn-solid {
        background-color: map-get($color, 500);

        &:hover {
            background-color: map-get($color, 600);
        }

        &:focus:active,
        &:focus,
        &:active {
            background-color: map-get($color, 500);
            box-shadow: 0 0 0 4px map-get($color, 200);
            outline: none;
        }

        &:disabled {
            background-color: $support-color-gray-100;
            color: $support-color-gray-400;
            outline: none;
            box-shadow: none;
            opacity: 100;
        }
    }
}

@mixin generate-btn-type-soft($color) {

    &.ngx-btn-soft {
        color: map-get($color, 500);
        background-color: map-get($color, 100);

        &:hover {
            color: map-get($color, 500);
            background-color: map-get($color, 200);
        }

        &:focus:active,
        &:focus,
        &:active {
            color: map-get($color, 600);
            background-color: map-get($color, 100);
            box-shadow: 0 0 0 4px map-get($color, 200);
            outline: none;
            border-color: 1px solid map-get($color, 200);
        }

        &:disabled {
            background-color: $support-color-gray-100;
            color: $support-color-gray-400;
            outline: none;
            box-shadow: none;
            opacity: 100;
        }
    }
}

@mixin generate-btn-type-outline($color) {

    &.ngx-btn-outline {
        color: map-get($color, 400);
        background-color: transparent;
        border: 1px solid map-get($color, 400);

        &:hover {
            color: map-get($color, 600);
            background-color: transparent;
            border: 1px solid map-get($color, 600);
        }

        &:focus:active,
        &:focus,
        &:active {
            outline: 4px solid map-get($color, 200);
            color: map-get($color, 500);
            box-shadow: none;
            background-color: transparent;
            border: 1px solid transparent;
        }

        &:disabled {
            color: $support-color-gray-300;
            background-color: transparent;
            border: 1px solid $support-color-gray-300;
            outline: none;
            box-shadow: none;
            opacity: 100;
        }
    }
}

@mixin generate-btn-type-empty($color) {

    &.ngx-btn-empty {
        color: map-get($color, 500);
        background-color: transparent;
        outline: none;

        &:hover {
            color: map-get($color, 600);
            background-color: transparent;
        }

        &:focus:active,
        &:focus,
        &:active {
            color: map-get($color, 700);
            box-shadow: none;
            background-color: transparent;
            outline: none;
        }

        &:disabled {
            color: $support-color-gray-400;
            background-color: transparent;
            outline: none;
            box-shadow: none;
            opacity: 100;
        }
    }
}

@mixin apply-icon-margin($margin) {
    soft-icon.left {
        margin-right: $margin;
    }

    soft-icon.right {
        margin-left: $margin;
    }

    soft-icon.center {
        margin: 0;
    }
}

@mixin generate-input-styles($prefix: '-') {

    @each $name,
    $color in $colors {
        &#{$prefix}#{$name} {
            @include generate-input-style($color);
        }
    }
}

@mixin generate-input-style($color) {

    &:focus:active,
    &:focus,
    &:active {
        border: 1px solid $other-color-white;
        box-shadow: none;
        outline: 4px solid map-get($color, 200);
    }
}

@mixin apply-input-padding-icon($icon-position : 'left') {

    &.#{$icon-position} {
        #{$icon-position}: 8px;

        & + soft-icon + .ngx-input {
            padding-#{$icon-position}: calc(16px + $fs-1);
        }

        & + soft-icon + .ngx-input-small {
            padding-#{$icon-position}: calc(16px + $fs-3);
        }

        & + .ngx-input {
            padding-#{$icon-position}: calc(16px + $fs-1);
        }

        & + .ngx-input-small {
            padding-#{$icon-position}: calc(16px + $fs-3);
        }
    }
}


@mixin apply-button-margin($margin) {
    soft-button.left {
        margin-right: $margin;
    }

    soft-button.right {
        margin-left: $margin;
    }
}

@mixin generate-bdg-styles-types($prefix: '-') {

    @each $name,
    $color in $colors {
        &#{$prefix}#{$name} {
            @include generate-bdg-type-solid($color, $name);
            @include generate-bdg-type-soft($color, $name);
            @include generate-bdg-type-solid-invert($color);
        }
    }
}

@mixin generate-bdg-type-solid($color, $color-name) {

    &.bdg-solid {
        $color-icon: 600;
        @if $color-name == 'support-red' or $color-name == 'support-gray' {
            background-color: map-get($color, 400);
            $color-icon: 500;
        } @else {
            background-color: map-get($color, 500);
        }

        &:hover {
            & .styleIcon {
                background-color: map-get($color, 700);
            }
        }

        &:disabled {
            background-color: $support-color-gray-100;
            color: $support-color-gray-400;
            outline: none;
            box-shadow: none;
            opacity: 100;
        }

        & .styleIcon {
            background-color: map-get($color, $color-icon);

            &:active {
                outline: 2px solid map-get($color, 700);
                box-shadow: none;
            }
        }
    }
}

@mixin generate-bdg-type-soft($color, $color-name) {

    &.bdg-soft {

        $color-icon: 300;
        $color-hover-icon: 400;
        @if $color-name == 'support-gray' or $color-name == 'support-red' {
            color: map-get($color, 400);
            $color-icon: 200;
            $color-hover-icon: 300;
        } @else {
            color: map-get($color, 500);
        }
        @if $color-name == 'secondary' {
            color: map-get($color, 600);
        }
        @if $color-name == 'support-gray' or $color-name == 'primary' {
            background-color: map-get($color, 100);
        } @else {
            background-color: map-get($color, 200);
            $color-icon: 300;
        }

        &:hover {
            & .styleIcon {
                background-color: map-get($color, $color-hover-icon);
            }
        }

        &:disabled {
            background-color: $support-color-gray-100;
            color: $support-color-gray-400;
            outline: none;
            box-shadow: none;
            opacity: 100;
        }

        & .styleIcon {
            background-color: map-get($color, $color-icon);

            &:active {
                color: map-get($color, 400);
                background-color: map-get($color, 400);
                outline: 2px solid map-get($color, 400);
                box-shadow: none;
            }
        }
    }
}

@mixin generate-bdg-type-solid-invert($color) {

    &.bdg-solid-invert {
        background-color: $other-color-white;
        color: map-get($color, 700);

        &:disabled {
            background-color: $support-color-gray-100;
            color: $support-color-gray-400;
            outline: none;
            box-shadow: none;
            opacity: 100;
        }

        & .styleIcon {
            background-color: map-get($color, 700);
            color: $other-color-white;

            &:active {
                background-color: map-get($color, 700);
                outline: 2px solid map-get($color, 700);
                box-shadow: none;
            }
        }
    }
}

@mixin apply-area() {
    min-width: 48px;
    width: 48px;
    max-width: 48px;
    height: 40px;
}

@mixin apply-spacer-style($spacer-border-color) {
    width: 8px;
    min-height: 32px;
    height: 100%;
    border: 1px solid $spacer-border-color;
    border-left: 0;
    border-right: 0;
}

@mixin apply-filter-style($filter-border-color) {
    min-width: 32px;
    min-height: 32px;
    height: 100%;
    align-items: center;
    display: flex;
    justify-content: center;
    border: 1px solid $filter-border-color;
}