@use 'sass:color';
@use '../../styles/bootstrap/mixins/gradients';
@use '../../styles/mixins/hover';
@use '../../styles/bootstrap/variables' as bootstrap-variables;
@use '../../styles/mixins/shadow';
@use '../../styles/variables';

// Button variants
//
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
@mixin button-variant(
    $color,
    $hover-color,
    $background,
    $hover-background,
    $border,
    $hover-border: color.adjust($border, $lightness: -10%),
    $active-background: color.adjust($background, $lightness: -10%),
    $active-border: color.adjust($border, $lightness: -12.5%)
) {
    color: $color;
    @include gradients.gradient-bg($background);
    border-color: $border;
    @include hover.hover {
        color: $hover-color;
        @include gradients.gradient-bg($hover-background);
        border-color: $hover-border;
        @include shadow.box-shadow(variables.$btn-box-shadow);
    }
    &.disabled,
    &:disabled {
        &:hover {
            @include button-disabled(variables.$btn-disabled-border-color);
        }
        @include button-disabled(variables.$btn-disabled-border-color);
    }
}

@mixin button-outline-variant($color, $border-color, $hover-color, $hover-background, $hover-border, $active-background, $active-border) {
    color: $color;
    background-color: transparent;
    background-image: none;
    border-color: $border-color;
    &:hover {
        color: $hover-color;
        background-color: $hover-background;
        border-color: $hover-border;
    }
    &.disabled,
    &:disabled {
        &:hover {
            @include button-disabled(variables.$btn-outline-disabled-border-color);
        }
        @include button-disabled(variables.$btn-outline-disabled-border-color);
    }
    &:not(:disabled):not(.disabled):active,
    &:not(:disabled):not(.disabled).active,
    .show > &.dropdown-toggle {
        color: $hover-color;
        background-color: $active-background;
        border-color: $active-border;
    }
}

// Button sizes
@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius, $min-width) {
    & {
        padding: $padding-y $padding-x;
        font-size: $font-size;
        line-height: $line-height; // Manually declare to provide an override to the browser default

        @if $min-width {
            min-width: $min-width;
        }
        @if bootstrap-variables.$enable-rounded {
            border-radius: $border-radius;
        } @else {
            border-radius: 0;
        }
    }

    &.btn-link {
        padding: $padding-y 10px;
    }
}

@mixin button-hover-box-shadow($color) {
    &:hover {
        @include shadow.box-shadow(0px 2px 5px 1px rgba($color, 0.6));
    }
}

@mixin button-disabled($color) {
    & {
        color: variables.$btn-disabled-color;
        background-color: variables.$btn-disabled-bg-color;
        border-color: $color;
    }

    @include shadow.box-shadow(none);
}

@mixin button-icon-spacing($spacing) {
    & > .thy-icon + span,
    & > span + .thy-icon {
        margin-left: $spacing;
    }
}

@mixin btn-link-variant($link-color, $link-hover-color, $link-hover-decoration) {
    color: $link-color;
    background-color: transparent;
    @include hover.hover {
        color: $link-hover-color;
        text-decoration: $link-hover-decoration;
    }
    &:focus,
    &.focus {
        text-decoration: $link-hover-decoration;
    }
    &:disabled,
    &.disabled {
        color: variables.$btn-link-disabled-color;
        @include hover.hover {
            color: variables.$btn-link-disabled-color;
            text-decoration: none;
        }
    } // No need for an active state here
}

@mixin btn-link-theme-variant($link-hover-color) {
    @include hover.hover {
        color: $link-hover-color;
    }
}

@mixin btn-square-radius {
    // 设置大小也不影响 border-radius
    border-radius: variables.$border-radius;
    &.btn-lg,
    &.btn-md,
    &.btn-sm,
    &.btn-xs {
        border-radius: variables.$border-radius;
    }
}

@mixin btn-icon-circle-hover-variant($round-padding, $btn-icon-circle-font-size, $diameter) {
    &.btn-icon-circle {
        i,
        .wtf,
        .thy-icon {
            padding: $round-padding - variables.$btn-icon-circle-padding-difference;
            font-size: $btn-icon-circle-font-size;
            width: $diameter;
            height: $diameter;
        }
        &.border-thick {
            @include hover.hover-focus {
                i,
                .wtf {
                    padding: $round-padding - variables.$btn-icon-circle-padding-difference;
                }
            }
        }
        @include hover.hover-focus {
            i,
            .wtf,
            .thy-icon {
                border-width: 2px;
                padding: $round-padding - variables.$btn-icon-circle-padding-difference;
            }
        }
    }
}

@mixin btn-icon-size-variant($font-size, $round-padding, $btn-icon-circle-font-size, $diameter) {
    i,
    .wtf,
    .thy-icon {
        font-size: $font-size;
    }

    @include btn-icon-circle-hover-variant($round-padding, $btn-icon-circle-font-size, $diameter);
}

@mixin btn-icon-only-variant($padding-y, $padding-x, $font-size: variables.$font-size-base) {
    min-width: unset;
    padding: $padding-y $padding-x;
    .thy-icon {
        font-size: $font-size;
    }
}

@mixin btn-icon-active($active-color) {
    color: $active-color;
    .thy-icon {
        color: $active-color;
        border-color: $active-color;
    }
}

@mixin btn-icon-circle-active($active-color, $round-padding) {
    @include btn-icon-active($active-color);
    .thy-icon {
        border-style: solid;
        border-width: 2px;
        outline: 0 none;
        padding: $round-padding - variables.$btn-icon-circle-padding-difference;
    }
}
