@use "../../styles/mixins/hover";
@use "../../styles/variables";
@use "mixin";

.btn-icon {
    padding: 0px;
    @include mixin.btn-link-variant(variables.$btn-link-color-default, variables.$primary, none);
    i,
    .wtf,
    .thy-icon {
        display: inline-block;
        line-height: 1;
        margin: 0px;
    }
    &:disabled,
    &.disabled {
        border: none;
        background: none;
    }

    &.active,
    &.btn-icon-active {
        @include mixin.btn-icon-active(variables.$primary);
    }

    @include mixin.btn-icon-size-variant(
        variables.$font-size-md,
        variables.$btn-icon-circle-padding-base,
        variables.$font-size-md,
        variables.$input-btn-height
    );
}

.btn-icon.btn-icon-danger-weak {
    @include mixin.btn-link-variant(variables.$gray-500, variables.$danger, none);
}

.btn-icon-circle {
    &.btn {
        border: 0px;
    }
    i,
    .wtf,
    .thy-icon {
        color: variables.$btn-icon-color;
        border-color: transparent;
        border-width: 2px;
        border-radius: 50%;
        line-height: 1;

        outline-width: 1px;
        outline-color: variables.$btn-icon-color;
        outline-offset: -1px;
    }

    .thy-icon {
        transition: border 200ms, padding 200ms, outline 200ms;
    }

    .wtf {
        vertical-align: initial;
    }

    span {
        margin-left: 6px;
    }
    &.border-thick {
        i,
        .wtf,
        .thy-icon {
            border-width: 2px;
            outline: 0 none;
        }
        &:not(:hover):not(.invalid):not(.active):not(.btn-icon-active).circle-solid {
            i,
            .wtf,
            .thy-icon {
                color: variables.$btn-icon-thick-solid-color;
                border-color: variables.$btn-icon-thick-solid-color;
            }
        }
        &:not(:hover):not(.invalid):not(.active):not(.btn-icon-active).circle-dashed {
            i,
            .wtf,
            .thy-icon {
                color: variables.$btn-icon-thick-dashed-color;
                border-color: variables.$btn-icon-thick-dashed-color;
            }
        }
    }
    @include hover.hover-focus {
        color: variables.$primary;
        i,
        .wtf,
        .thy-icon {
            border-color: variables.$primary;
            color: variables.$primary;
            border-style: solid;
            outline: 0 none;
        }
    }
    &.invalid {
        color: variables.$danger;
        i,
        .wtf,
        .thy-icon {
            border-color: variables.$danger;
            color: variables.$danger;
            outline: 0 none;
        }
        &:hover,
        &:focus {
            i,
            .wtf,
            .thy-icon {
                color: variables.$primary;
                border-color: variables.$primary;
            }
        }
    }
    &:not(:hover):not(.active):not(.btn-icon-active).circle-dashed {
        i,
        .wtf,
        .thy-icon {
            border-style: dashed;
            outline-style: dashed;
        }
    }
    &.circle-solid {
        i,
        .wtf,
        .thy-icon {
            border-style: solid;
            outline-style: solid;
        }
    }

    &.active,
    &.btn-icon-active {
        @include mixin.btn-icon-circle-active(variables.$primary, variables.$btn-icon-circle-padding-base);
    }
}

.btn-icon-light {
    color: variables.$btn-icon-light-color;
}

.btn-icon-xs {
    @include mixin.btn-icon-size-variant(
        variables.$font-size-sm,
        variables.$btn-icon-circle-padding-xs,
        variables.$font-size-sm,
        variables.$input-btn-height-xs
    );
    &.btn-icon-circle.active,
    &.btn-icon-circle.btn-icon-active {
        @include mixin.btn-icon-circle-active(variables.$primary, variables.$btn-icon-circle-padding-xs);
    }
}

.btn-icon-sm {
    @include mixin.btn-icon-size-variant(
        variables.$font-size-base,
        variables.$btn-icon-circle-padding-sm,
        variables.$font-size-base,
        variables.$input-btn-height-sm
    );
    &.btn-icon-circle.active,
    &.btn-icon-circle.btn-icon-active {
        @include mixin.btn-icon-circle-active(variables.$primary, variables.$btn-icon-circle-padding-sm);
    }
}

.btn-icon-md {
    @include mixin.btn-icon-size-variant(
        variables.$font-size-md,
        variables.$btn-icon-circle-padding-md,
        variables.$font-size-md,
        variables.$input-btn-height-md
    );
    &.btn-icon-circle.active,
    &.btn-icon-circle.btn-icon-active {
        @include mixin.btn-icon-circle-active(variables.$primary, variables.$btn-icon-circle-padding-base);
    }
}

.btn-icon-lg {
    @include mixin.btn-icon-size-variant(
        variables.$font-size-lg,
        variables.$btn-icon-circle-padding-lg,
        variables.$font-size-lg,
        variables.$input-btn-height-lg
    );
    &.btn-icon-circle.active,
    &.btn-icon-circle.btn-icon-active {
        @include mixin.btn-icon-circle-active(variables.$primary, variables.$btn-icon-circle-padding-lg);
    }
}

// 属性操作鼠标移上去  btn-icon-circle 样式的变化
.thy-property-operation {
    &:hover {
        .btn-icon-circle {
            i,
            .wtf {
                border: 2px solid variables.$primary;
                padding: variables.$btn-icon-circle-padding-base - variables.$btn-icon-circle-padding-difference;
                color: variables.$primary;
            }
            &.border-thick {
                i,
                .wtf {
                    padding: variables.$btn-icon-circle-padding-base - variables.$btn-icon-circle-padding-difference;
                }
                i,
                .wtf {
                    padding: variables.$btn-icon-circle-padding-base - variables.$btn-icon-circle-padding-difference;
                }
            }
        }
    }
}
