@import '../default/var';
// @import './icon';
.#{$prefix} {
    &-button {
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        appearance: none;
        text-align: center;
        border-width: 1px;
        outline: none;
        border-style: solid;
        margin: 0;
        transition: 0.1s;
        user-select: none;
        vertical-align: middle;
        &.is-disabled,
        &.is-loading {
            cursor: not-allowed;
            * {
                cursor: not-allowed;
            }
        }
        &-text {
            padding: 0 5px;
            cursor: inherit;
        }
        @each $size in large,
        medium,
        small,
        mini {
            $fs: map-get($font-sizes, $size);
            $bs: map-get($form-sizes, $size);
            $cs: map-get($corner-sizes, $size);
            $ps: map-get($padding-sizes, $size);
            &--#{$size} {
                font-size: $fs;
                min-width: $bs * 3;
                height: $bs;
                line-height: $bs - 2px;
                padding: 0 $fs;
                &.is-circle {
                    width: $bs;
                    height: $bs;
                    min-width: auto;
                    border-radius: 50%;
                    padding: 0;
                }
                .#{$prefix}-button__icon {
                    &-prefix,
                    &-suffix,
                    &-loading {
                        font-size: $fs;
                    }
                }
            }
            &-corner--#{$size} {
                border-radius: $cs;
            }
        }
        &__icon {
            &-prefix,
            &-loading {
                &:not(:first-child) {
                    margin-right: 5px;
                }
            }
            &-suffix {
                &:not(:last-child) {
                    margin-left: 5px;
                }
            }
        }
        &.is-block {
            display: block;
            width: 100%;
        }
        &--major {
            color: $button-major-color-fore;
            background-color: $button-major-color-back;
            border-color: $button-major-color-back;
            &.is-disabled {
                color: $button-major-color-disabled-fore;
                background-color: $button-major-color-disabled;
                border-color: $button-major-color-disabled;
            }
            &:not(.is-disabled) {
                &:hover {
                    background-color: $button-major-color-hover;
                    border-color: $button-major-color-hover;
                }
                &:active {
                    background-color: $button-major-color-active;
                    border-color: $button-major-color-active;
                }
                &.is-loading {
                    background-color: $button-major-color-loading;
                    border-color: $button-major-color-loading;
                }
            }
            &.is-plain {
                color: $button-major-color-back;
                background-color: transparent;
                border-color: $button-major-color-back;
                &.is-disabled {
                    background-color: transparent;
                    color: $button-major-color-disabled;
                    border-color: $button-major-color-disabled;
                }
                &:not(.is-disabled) {
                    &:hover {
                        color: $button-major-color-fore;
                    }
                    &:active {
                        color: $button-major-color-fore;
                    }
                    &.is-loading {
                        background-color: transparent;
                        color: $button-major-color-loading;
                    }
                }
            }
        }
        &--warning {
            color: $button-warning-color-fore;
            background-color: $button-warning-color-back;
            border-color: $button-warning-color-back;
            &.is-disabled {
                color: $button-warning-color-disabled-fore;
                background-color: $button-warning-color-disabled;
                border-color: $button-warning-color-disabled;
            }
            &:not(.is-disabled) {
                &:hover {
                    background-color: $button-warning-color-hover;
                    border-color: $button-warning-color-hover;
                }
                &:active {
                    background-color: $button-warning-color-active;
                    border-color: $button-warning-color-active;
                }
                &.is-loading {
                    background-color: $button-warning-color-loading;
                    border-color: $button-warning-color-loading;
                }
            }
            &.is-plain {
                color: $button-warning-color-back;
                background-color: transparent;
                border-color: $button-warning-color-back;
                &.is-disabled {
                    background-color: transparent;
                    color: $button-warning-color-disabled;
                    border-color: $button-warning-color-disabled;
                }
                &:not(.is-disabled) {
                    &:hover {
                        color: $button-warning-color-fore;
                    }
                    &:active {
                        color: $button-warning-color-fore;
                    }
                    &.is-loading {
                        background-color: transparent;
                        color: $button-warning-color-loading;
                        border-color: $button-warning-color-loading;
                    }
                }
            }
        }
        &--font,
        &--minor {
            color: $button-minor-color-fore;
            background-color: transparent;
            &.is-disabled {
                color: $button-minor-color-disabled;
            }
            &:not(.is-disabled) {
                &:active {
                    color: $button-minor-color-active-fore;
                }
                &.is-loading {
                    color: $button-minor-color-loading;
                }
            }
        }
        &--minor {
            border-color: $button-minor-color-border;
            &:not(.is-disabled) {
                &:hover {
                    background-color: $button-minor-color-hover;
                }
                &:active {
                    border-color: $button-minor-color-disabled;
                    background-color: $button-minor-color-active;
                }
            }
        }
        &--font {
            border-color: transparent;
        }
        &-group {
            font-size: 0;
            .#{$prefix}-button {
                &+.#{$prefix}-button {
                    margin-left: 0;
                }
            }
            &--vertical {
                .#{$prefix}-button {
                    display: block;
                    width: 100%;
                    &+.#{$prefix}-button {
                        margin-top: 20px;
                    }
                }
            }
            &--horizontal {
                .#{$prefix}-button {
                    &:not(:first-of-type):last-of-type {
                        border-top-left-radius: 0;
                        border-bottom-left-radius: 0;
                    }
                    &:not(:last-of-type):first-of-type {
                        border-top-right-radius: 0;
                        border-bottom-right-radius: 0;
                        border-right-color: transparent;
                    }
                    &:not(:first-of-type):not(:last-of-type) {
                        border-radius: 0;
                        border-right-color: transparent;
                    }
                    &--major,
                    &--warning {
                        &:not(:last-of-type):first-of-type,
                        &:not(:first-of-type):not(:last-of-type) {
                            border-right-color: rgba($base-color-light, 0.5);
                        }
                    }
                    &--major {
                        &.is-plain {
                            &:not(:last-of-type):first-of-type,
                            &:not(:first-of-type):not(:last-of-type) {
                                margin-right: -1px;
                            }
                            &:hover {
                                border-right-color: $button-major-color-hover;
                                &+.#{$prefix}-button {
                                    border-left-color: $button-major-color-hover;
                                }
                            }
                            &:active {
                                border-right-color: $button-major-color-active;
                                &+.#{$prefix}-button {
                                    border-left-color: $button-major-color-active;
                                }
                            }
                        }
                    }
                    &--warning {
                        &.is-plain {
                            &:not(:last-of-type):first-of-type,
                            &:not(:first-of-type):not(:last-of-type) {
                                margin-right: -1px;
                            }
                            &:hover {
                                border-right-color: $button-warning-color-hover;
                                &+.#{$prefix}-button {
                                    border-left-color: $button-warning-color-hover;
                                }
                            }
                            &:active {
                                border-right-color: $button-warning-color-active;
                                &+.#{$prefix}-button {
                                    border-left-color: $button-warning-color-active;
                                }
                            }
                        }
                    }
                    &--minor {
                        &:active {
                            &:not(:first-of-type):last-of-type,
                            &:not(:last-of-type):first-of-type,
                            &:not(:first-of-type):not(:last-of-type) {
                                border-color: $button-minor-color-border;
                                background: $button-minor-color-active-back;
                            }
                        }
                    }
                }
            }
        }
    }
    &-drop {
        &-button {
            display: inline-block;
            text-align: center;
            [class*='arrow'] {
                font-size: 12px;
                font-weight: bold;
                transition: transform 0.3s;
                margin-left: 5px;
                transform: scale(0.8) rotate(90deg);
                &.opened {
                    transform: scale(0.8) rotate(270deg);
                }
            }
            &--major {
                background: $drop-button-major-color-back;
                color: $drop-button-major-color-fore;
            }
            &--minor {
                background: $drop-button-minor-color-back;
                color: $drop-button-minor-color-fore;
            }
            @each $size in large,
            medium,
            small,
            mini {
                $fs: map-get($font-sizes, $size);
                $bs: map-get($form-sizes, $size);
                $cs: map-get($corner-sizes, $size);
                &--#{$size} {
                    font-size: $fs;
                    min-width: $bs * 3;
                    height: $bs;
                    line-height: $bs - 2px;
                    padding: 0 $fs;
                    border-radius: $cs / 2;
                }
                &-command {
                    box-shadow: 0 0 10px 1px $drop-button-color-shadow;
                    background: $drop-button-color-command-back;
                    color: $drop-button-color-command-fore;
                    &-item {
                        &:hover {
                            background: $drop-button-color-command-hover;
                        }
                    }
                    &--#{$size} {
                        border-radius: $cs / 2;
                        margin-top: 5px;
                        margin-left: -$fs;
                        overflow: hidden;
                        position: absolute;
                        .#{$prefix}-drop-button-command-item {
                            font-size: $fs;
                            margin: 5px 0;
                            height: $bs;
                            line-height: $bs;
                            padding: 0 $fs;
                            text-align: center;
                            user-select: none;
                            cursor: pointer;
                        }
                    }
                }
            }
        }
    }
}