@use 'sass:color';
@use '../../variables' as *;

@mixin button(
    $radius: $button-radius,
    $font: $button-font,
    $height: $button-height,
    $min-width: $button-min-width,
    $padding: $button-padding,
    $bg: $button-bg,
    $color: $button-color,
    $border-width: $button-border-width,
    $border-color: $button-border-color,
    $disabled-bg: $button-disabled-bg,
    $disabled-color: $button-disabled-color,
    $disabled-border-color: $button-disabled-border-color,
    $active-bg: $button-active-bg,
    $active-color: $button-active-color,
    $active-border-color: $button-active-border-color
) {
    align-items: center;
    background-color: $disabled-bg;
    border-radius: $radius;
    color: $disabled-color;
    cursor: default;
    display: inline-flex;
    height: $height;
    justify-content: center;
    min-width: $min-width;
    padding: $padding;
    text-align: center;
    text-decoration: none;
    transition-duration: var(--duration-micro-s);
    transition-property: background-color, border-color, color;
    transition-timing-function: var(--easing-standard);
    user-select: none;
    white-space: nowrap;

    @include font($font);

    @if color.alpha($disabled-bg) == 1 or color.alpha($disabled-bg) == 0 {
        border: $border-width solid $disabled-border-color;
    } @else {
        border: $border-width solid transparent;
    }

    &:enabled,
    &:any-link {
        background-color: $bg;
        color: $color;
        cursor: pointer;

        @if color.alpha($bg) == 1 or color.alpha($bg) == 0 {
            border: $border-width solid $border-color;
        } @else {
            border: $border-width solid transparent;
        }

        &:hover,
        &:focus-visible {
            background-color: $active-bg;
            color: $active-color;

            @if color.alpha($active-bg) == 1 or color.alpha($active-bg) == 0 {
                border: $border-width solid $active-border-color;
            } @else {
                border: $border-width solid transparent;
            }
        }
    }
}

@mixin only-icon($height: $button-height) {
    min-width: auto;
    padding-left: 0;
    padding-right: 0;
    width: $button-height;
}

@mixin icon(
    $size: $button-icon-size,
    $space-after: $button-icon-space-after,
    $space-before: $button-icon-space-before
) {
    display: block; // Для случаев, когда иконка обёрнута в другой блок
    fill: currentcolor;
    flex-shrink: 0;
    height: $size;
    margin-right: $space-after;
    width: $size;

    &_after {
        margin-left: $space-before;
        margin-right: 0;
    }
}

$b: '.button';

#{$b} {
    @include button;

    &_alt {
        background-color: $button-alt-disabled-bg;
        border: $button-alt-border-width solid $button-alt-disabled-border-color;
        color: $button-alt-disabled-color;

        &:enabled,
        &:any-link {
            background-color: $button-alt-bg;
            border-color: $button-alt-border-color;
            color: $button-alt-color;

            &:hover,
            &:focus-visible {
                background-color: $button-alt-active-bg;
                border-color: $button-alt-active-border-color;
                color: $button-alt-active-color;
            }
        }
    }

    &_ghost {
        background-color: $button-ghost-disabled-bg;
        border: $button-ghost-border-width solid $button-ghost-disabled-border-color;
        color: $button-ghost-disabled-color;

        &:enabled,
        &:any-link {
            background-color: $button-ghost-bg;
            border-color: $button-ghost-border-color;
            color: $button-ghost-color;

            &:hover,
            &:focus-visible {
                background-color: $button-ghost-active-bg;
                border-color: $button-ghost-active-border-color;
                color: $button-ghost-active-color;
            }
        }
    }

    &_grey {
        background-color: $button-grey-disabled-bg;
        border: $button-grey-border-width solid $button-grey-disabled-border-color;
        color: $button-grey-disabled-color;

        &:enabled,
        &:any-link {
            background-color: $button-grey-bg;
            border-color: $button-grey-border-color;
            color: $button-grey-color;

            &:hover,
            &:focus-visible {
                background-color: $button-grey-active-bg;
                border-color: $button-grey-active-border-color;
                color: $button-grey-active-color;
            }
        }
    }

    &_inverted {
        background-color: $button-inverted-disabled-bg;
        border: $button-inverted-border-width solid $button-inverted-disabled-border-color;
        color: $button-inverted-disabled-color;

        &:enabled,
        &:any-link {
            background-color: $button-inverted-bg;
            border-color: $button-inverted-border-color;
            color: $button-inverted-color;

            &:hover,
            &:focus-visible {
                background-color: $button-inverted-active-bg;
                border-color: $button-inverted-active-border-color;
                color: $button-inverted-active-color;
            }
        }
    }

    &_fluid {
        width: 100%;
    }

    &_wide {
        min-width: $button-wide-min-width;

        &#{$b}_small {
            min-width: $button-small-wide-min-width;
        }
    }

    &_narrow {
        min-width: 4px * 18;
        padding: 0 4px * 4;
    }

    &_small {
        height: $button-small-height;
        min-width: $button-small-min-width;
        padding: $button-small-padding;

        @include font($button-small-font);
    }

    &_square {
        border-radius: $button-square-radius;
    }

    &_only-icon {
        @include only-icon;
    }

    &__icon {
        @include icon;

        #{$b}_only-icon & {
            margin-right: 0;
        }
    }
}