@use 'sass:meta';
@use '../../styles/bootstrap/functions-variables';
@use '../../styles/mixins/hover';
@use '../../styles/bootstrap/mixins/transition';
@use '../../styles/bootstrap/variables' as bootstrap-variables;
@use '../../styles/mixins/shadow';
@use '../../styles/variables';
@use 'mixin';

// stylelint-disable selector-no-qualifying-type
//
// Base styles
//
.btn {
    display: inline-block;
    font-weight: bootstrap-variables.$btn-font-weight;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: bootstrap-variables.$btn-border-width solid transparent;

    // 设置 icon 字体大小
    i,
    .wtf,
    .thy-icon {
        font-size: variables.$font-size-base;
        line-height: 1rem;
    }

    @include mixin.button-size(
        variables.$btn-padding-y,
        variables.$btn-padding-x,
        variables.$btn-font-size-base,
        variables.$btn-line-height,
        variables.$btn-border-radius,
        variables.$btn-base-min-width
    );

    // icon space
    @include mixin.button-icon-spacing(7px);

    &.thy-btn-icon-only {
        @include mixin.btn-icon-only-variant(variables.$btn-padding-y, 0.625rem);
    }

    @include transition.transition(bootstrap-variables.$btn-transition); // Share hover and focus styles

    @include hover.hover-focus {
        text-decoration: none;
    }

    &:focus,
    &.focus {
        outline: 0;
    }

    // Disabled comes first so active can properly restyle
    &.disabled,
    &:disabled {
        cursor: variables.$disabled-cursor;
        color: variables.$btn-disabled-color;
        background-color: variables.$btn-disabled-bg-color;
        border-color: variables.$btn-disabled-border-color; // opacity: $btn-disabled-opacity;
        @include shadow.box-shadow(none);
    }

    // Opinionated: add "hand" cursor to non-disabled .btn elements
    &:not(:disabled):not(.disabled) {
        cursor: variables.$hand-cursor;
    }

    &:not(:disabled):not(.disabled):active,
    &:not(:disabled):not(.disabled).active {
        background-image: none;
    }

    &:not(:disabled):not(.disabled).loading {
        opacity: 0.65;
        pointer-events: none;
    }
}

// Future-proof disabling of clicks on `<a>` elements
a.btn.disabled,
fieldset:disabled a.btn {
    pointer-events: none;
}

//
// Alternate buttons
//
@each $color, $value in functions-variables.$theme-colors {
    .btn-#{$color} {
        @include mixin.button-variant(variables.$white, variables.$white, $value, $value, $value, $value, $value, $value);
        @include mixin.button-hover-box-shadow($value);
    }
}

@each $color, $value in functions-variables.$theme-colors {
    .btn-outline-#{$color} {
        @include mixin.button-outline-variant($value, $value, variables.$white, $value, null, $value, null);
    }
}

.btn-outline-default {
    @include mixin.button-outline-variant(
        variables.$gray-700,
        variables.$gray-300,
        variables.$gray-700,
        variables.$gray-100,
        variables.$gray-300,
        variables.$gray-100,
        variables.$gray-300
    );
}

// 圆角方正，回归正常的圆角
.btn-square {
    @include mixin.btn-square-radius();
}

//
// Button Sizes
//

.btn-lg {
    @include mixin.button-size(
        variables.$btn-padding-y-lg,
        variables.$btn-padding-x-lg,
        variables.$btn-font-size-lg,
        variables.$btn-line-height-lg,
        variables.$btn-border-radius-lg,
        variables.$btn-lg-min-width
    );
    &.thy-btn-icon-only {
        @include mixin.btn-icon-only-variant(variables.$btn-padding-y-lg, 0.875rem);
    }
}

.btn-md {
    @include mixin.button-size(
        variables.$btn-padding-y-md,
        variables.$btn-padding-x-md,
        variables.$btn-font-size-md,
        variables.$btn-line-height,
        variables.$btn-border-radius,
        variables.$btn-md-min-width
    );
    &.thy-btn-icon-only {
        @include mixin.btn-icon-only-variant(variables.$btn-padding-y-md, 0.5rem);
    }
}

.btn-sm {
    @include mixin.button-size(
        variables.$btn-padding-y-sm,
        variables.$btn-padding-x-sm,
        variables.$btn-font-size-sm,
        variables.$btn-line-height-sm,
        variables.$btn-border-radius-sm,
        variables.$btn-sm-min-width
    );
    @include mixin.button-icon-spacing(5px);
    &.thy-btn-icon-only {
        @include mixin.btn-icon-only-variant(variables.$btn-padding-y-sm, 0.375rem);
    }
}

.btn-xs {
    @include mixin.button-size(
        variables.$btn-padding-y-xs,
        variables.$btn-padding-x-xs,
        variables.$btn-font-size-xs,
        variables.$btn-line-height-xs,
        variables.$btn-border-radius-xs,
        variables.$btn-xs-min-width
    );
    @include mixin.button-icon-spacing(5px);
    &.thy-btn-icon-only {
        @include mixin.btn-icon-only-variant(variables.$btn-padding-y-xs, 0.25rem);
    }
}

//
// Link buttons
//
// Make a button look and behave like a link
.btn-link {
    font-weight: bootstrap-variables.$font-weight-normal;
    color: variables.$link-color;
    background-color: transparent;

    @include hover.hover {
        color: variables.$link-hover-color;
        text-decoration: variables.$link-hover-decoration;
        background-color: transparent;
        border-color: transparent;
    }

    &:focus,
    &.focus {
        text-decoration: variables.$link-hover-decoration;
        border-color: transparent;
        box-shadow: variables.$box-shadow-none;
    }

    &.disabled,
    &:disabled {
        background-color: transparent;

        @include hover.hover-focus {
            color: variables.$btn-link-disabled-color;
            text-decoration: none;
        }
    }

    &:disabled,
    &.disabled {
        color: variables.$btn-link-disabled-color;
        border-color: transparent;
    }

    // No need for an active state here
}

// 去除按钮图标和按钮链接的最小宽度
.btn.btn-icon,
.btn.btn-link {
    min-width: 0px;
}

.btn-link.btn-link-info {
    @include mixin.btn-link-variant(variables.$info, variables.$primary, none);
}

// 兼容之前的样式
.btn-link.btn-link-default {
    @include mixin.btn-link-variant(variables.$btn-link-color-default, variables.$primary, none);
}

// 默认显示灰色，鼠标移上去显示主色
.btn-link.btn-link-primary-weak {
    @include mixin.btn-link-variant(variables.$gray-500, variables.$primary, none);
}

// 默认显示灰色，鼠标移上去显示红色
.btn-link.btn-link-danger-weak {
    @include mixin.btn-link-variant(variables.$gray-500, variables.$danger, none);
}

// 默认显示灰色，鼠标移上去显示红色
.btn-link.btn-link-danger {
    @include mixin.btn-link-variant(variables.$danger, variables.$danger, underline);
}

.btn-link.btn-link-success {
    @include mixin.btn-link-variant(variables.$success, variables.$success, underline);
}

//
// Block button
//
.btn-block {
    display: block;
    width: 100%; // Vertically space out multiple block buttons

    + .btn-block {
        margin-top: bootstrap-variables.$btn-block-spacing-y;
    }
}

// Specificity overrides
input[type='submit'],
input[type='reset'],
input[type='button'] {
    &.btn-block {
        width: 100%;
    }
}

// 确认取消按钮成对出现
.btn-pair {
    .btn + .btn {
        margin-left: variables.$btn-pair-child-margin-left;

        &.btn-link {
            margin-left: variables.$btn-pair-child-link-margin-left;
        }
    }
    .btn-link + .btn {
        margin-left: variables.$btn-pair-child-link-margin-left;
    }
}

.btn-pair-sm {
    .btn + .btn {
        margin-left: variables.$btn-pair-sm-child-margin-left;
    }
}

@include meta.load-css('./button-icon');
