@import '../../next-core/lib/next.scss';

@import './scss/variable.scss';
@import './scss/normalize.scss';
@import './scss/mixin.scss';

#{$btn-prefix} {
    & {
        position: relative;
        display: inline-block;
        font-style: normal;
        font-family: inherit;
        background: transparent;
        cursor: pointer;
        transition: all .3s ease-out;
        box-shadow: $btn-shadow;
        border-radius: $btn-corner;
        border-style: solid;
        text-align: center;

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

        &.disabled,
        &[disabled] {
            @include button-color(
                $btn-color-disabled,
                $btn-color-disabled,
                $btn-bg-disabled,
                $btn-bg-disabled,
                $btn-border-color-disabled,
                $btn-border-color-disabled
            );
        }

        &[disabled] {
            cursor: not-allowed;
        }

        &:after {
            text-align: center;
            position: absolute;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.5s ease;
        }
    }

    /* 重要性维度*/
    /* ----------------------------------------*/

    &-primary {
        border-style: $btn-primary-border-style;

        @include button-color(
            $btn-primary-color,
            $btn-primary-color-hover,
            $btn-primary-bg,
            $btn-primary-bg-hover,
            $btn-primary-border-color,
            $btn-primary-border-color-hover
        );
    }
    &-secondary {
        border-style: $btn-secondary-border-style;

        @include button-color(
            $btn-secondary-color,
            $btn-secondary-color-hover,
            $btn-secondary-bg,
            $btn-secondary-bg-hover,
            $btn-secondary-border-color,
            $btn-secondary-border-color-hover
        );
    }
    &-normal {
        border-style: $btn-normal-border-style;

        @include button-color(
            $btn-normal-color,
            $btn-normal-color-hover,
            $btn-normal-bg,
            $btn-normal-bg-hover,
            $btn-normal-border-color,
            $btn-normal-border-color-hover
        );
    }

    /* 尺寸维度*/
    /* ----------------------------------------*/

    &-small {
        @include button-size(
            $btn-size-s-margin,
            $btn-size-s-padding,
            $btn-size-s-height,
            $btn-size-s-font,
            $btn-size-s-border-width,
            $btn-size-s-icon-margin,
            $btn-size-s-icon-size,
            $btn-size-s-icon-split-size
        );
    }
    &-medium {
        @include button-size(
            $btn-size-m-margin,
            $btn-size-m-padding,
            $btn-size-m-height,
            $btn-size-m-font,
            $btn-size-m-border-width,
            $btn-size-m-icon-margin,
            $btn-size-m-icon-size,
            $btn-size-m-icon-split-size
        );
    }
    &-large {
        @include button-size(
            $btn-size-l-margin,
            $btn-size-l-padding,
            $btn-size-l-height,
            $btn-size-l-font,
            $btn-size-l-border-width,
            $btn-size-l-icon-margin,
            $btn-size-l-icon-size,
            $btn-size-l-icon-split-size
        );
    }

    /* 形状维度*/
    /* ----------------------------------------*/

    &-ghost {
        box-shadow: none;
        border-style: $btn-ghost-border-style;

        &#{$btn-prefix}-dark {
            @include button-color(
                $btn-ghost-dark-color,
                $btn-ghost-dark-color-hover,
                $btn-ghost-dark-bg-normal,
                $btn-ghost-dark-bg-hover,
                $btn-ghost-dark-border-color,
                $btn-ghost-dark-border-color-hover
            );
            &.disabled,
            &[disabled] {
                @include button-color(
                    $btn-ghost-dark-color-disabled,
                    $btn-ghost-dark-color-disabled,
                    $btn-ghost-dark-bg-disabled,
                    $btn-ghost-dark-bg-disabled,
                    $btn-ghost-dark-border-color-disabled,
                    $btn-ghost-dark-border-color-disabled
                );
            }
        }
        &#{$btn-prefix}-light {
            @include button-color(
                $btn-ghost-light-color,
                $btn-ghost-light-color-hover,
                $btn-ghost-light-bg-normal,
                $btn-ghost-light-bg-hover,
                $btn-ghost-light-border-color,
                $btn-ghost-light-border-color-hover
            );

            &.disabled,
            &[disabled] {
                @include button-color(
                    $btn-ghost-light-color-disabled,
                    $btn-ghost-light-color-disabled,
                    $btn-ghost-light-bg-disabled,
                    $btn-ghost-light-bg-disabled,
                    $btn-ghost-light-border-color-disabled,
                    $btn-ghost-light-border-color-disabled
                );
            }
        }
    }

    &-warning {
        border-style: $btn-warning-border-style;

        &#{$btn-prefix}-primary {
            @include button-color(
                $btn-warning-primary-color,
                $btn-warning-primary-color-hover,
                $btn-warning-primary-bg,
                $btn-warning-primary-bg-hover,
                $btn-warning-primary-border-color,
                $btn-warning-primary-border-color-hover
            );
            &.disabled,
            &[disabled] {
                @include button-color(
                    $btn-warning-primary-color-disabled,
                    $btn-warning-primary-color-disabled,
                    $btn-warning-primary-bg-disabled,
                    $btn-warning-primary-bg-disabled,
                    $btn-warning-primary-border-color-disabled,
                    $btn-warning-primary-border-color-disabled
                );
            }
        }
        &#{$btn-prefix}-normal {
            @include button-color(
                $btn-warning-normal-color,
                $btn-warning-normal-color-hover,
                $btn-warning-normal-bg,
                $btn-warning-normal-bg-hover,
                $btn-warning-normal-border-color,
                $btn-warning-normal-border-color-hover
            );

            &.disabled,
            &[disabled] {
                @include button-color(
                    $btn-warning-normal-color-disabled,
                    $btn-warning-normal-color-disabled,
                    $btn-warning-normal-bg-disabled,
                    $btn-warning-normal-bg-disabled,
                    $btn-warning-normal-border-color-disabled,
                    $btn-warning-normal-border-color-disabled
                );
            }
        }
    }

    /* loading*/
    /* ----------------------------------------*/

    &-loading {
        pointer-events: none;

        &:after {
            font-family: $icon-font-family;
            content: $icon-content-loading;
            opacity: 1;
            visibility: visible;
            -webkit-animation: loadingCircle 2s infinite linear;
            animation: loadingCircle 2s infinite linear;
        }
    }

    &-text {
        box-shadow: none;

        &#{$btn-prefix}-primary {
            @include button-color(
                $btn-text-primary-color,
                $btn-text-primary-color-hover,
                transparent,
                transparent,
                transparent,
                transparent
            );
        }
        &#{$btn-prefix}-secondary {
            @include button-color(
                $btn-text-secondary-color,
                $btn-text-secondary-color-hover,
                transparent,
                transparent,
                transparent,
                transparent
            );
        }
        &#{$btn-prefix}-normal {
            @include button-color(
                $btn-text-normal-color,
                $btn-text-normal-color-hover,
                transparent,
                transparent,
                transparent,
                transparent
            );
        }
        &#{$btn-prefix}-large {
            @include button-size(
                $btn-text-size-l-margin,
                0,
                $btn-text-size-l-height,
                $btn-text-size-l-font,
                0,
                $btn-text-icon-l-margin,
                $btn-size-l-icon-size,
                $btn-size-l-icon-split-size
            );
        }
        &#{$btn-prefix}-medium {
            @include button-size(
                $btn-text-size-m-margin,
                0,
                $btn-text-size-m-height,
                $btn-text-size-m-font,
                0,
                $btn-text-icon-m-margin,
                $btn-size-m-icon-size,
                $btn-size-m-icon-split-size
            );
        }
        &#{$btn-prefix}-small {
            @include button-size(
                $btn-text-size-s-margin,
                0,
                $btn-text-size-s-height,
                $btn-text-size-s-font,
                0,
                $btn-text-icon-s-margin,
                $btn-size-s-icon-size,
                $btn-size-s-icon-split-size
            );
        }
        &.disabled,
        &[disabled] {
            @include button-color(
                $btn-text-disabled-color,
                $btn-text-disabled-color,
                transparent,
                transparent,
                transparent,
                transparent
            );
        }
        &#{$btn-prefix}-loading {
            @include button-color(
                $btn-text-loading-color,
                $btn-text-loading-color,
                transparent,
                transparent,
                transparent,
                transparent
            );
        }
    }

    /* 组合*/
    /* ----------------------------------------*/

    &-group {
        position: relative;
        display: inline-block;
        vertical-align: middle;

        > #{$btn-prefix} {
            position: relative;
            float: left;
            box-shadow: none;

            &:hover,
            &:focus,
            &:active,
            &.active {
                z-index: 1;
            }
            &.disabled,
            &[disabled] {
                z-index: 0;
            }
        }

        #{$btn-prefix}#{$btn-prefix} {
            margin: 0 0 0 -1px;
        }

        #{$btn-prefix}:not(:first-child):not(:last-child) {
            border-radius: 0;
        }

        > #{$btn-prefix}:first-child {
            margin: 0;
        }

        > #{$btn-prefix}:first-child:not(:last-child) {
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
        }

        > #{$btn-prefix}:last-child:not(:first-child) {
            border-bottom-left-radius: 0;
            border-top-left-radius: 0;
        }

        > #{$btn-prefix}-primary:not(:first-child) {
            border-left-color: transparentize($color-white, 0.8);

            &:hover {
                border-left-color: transparent;
            }
            &.disabled,
            &[disabled] {
                border-left-color: $color-line1-1;
            }
        }
    }

    &-split {
        > #{$btn-prefix}:last-child:not(:first-child) {
            &#{$btn-prefix}-large {
                width: $s-10;
                padding: 0;
            }

            &#{$btn-prefix}-medium {
                width: $s-7;
                padding: 0;
            }

            &#{$btn-prefix}-small {
                width: $s-5;
                padding: 0;
            }
        }

        > #{$btn-prefix}:first-child:not(:last-child) {
            &#{$btn-prefix}-large {
                padding: 0 $s-3 0 $s-5;
            }

            &#{$btn-prefix}-medium {
                padding: 0 $s-3 0 $s-4;
            }

            &#{$btn-prefix}-small {
                padding: 0 $s-2 0 $s-3;
            }
        }
    }
}