@import '../style/themes/default.less';
@import '../style/mixins/index.less';

@button-prefix-cls: ~'@{sino-prefix}-button';

.@{button-prefix-cls} {
    position: relative;
    display: block;
    width: 100%;
    height: @btn-height-base;
    padding: @btn-padding-base;
    font-size: @btn-font-size-base;
    text-align: center;
    color: #fff;
    line-height: @line-height;
    border-radius: @btn-border-radius-base;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.1s @ease-in-out;

    &-inline {
        display: inline-block;
        width: auto;
    }

    &-medium {
        height: @btn-height-md;
        line-height: @btn-height-md;
        font-size: @btn-font-size-md;
    }

    &-small {
        height: @btn-height-sm;
        line-height: @btn-height-sm;
        font-size: @btn-font-size-sm;
    }

    &-default {
        color: @btn-default-color;
        background-color: #fff;

        &:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 1px solid @btn-default-border-color;
            border-radius: @btn-border-radius-base;
            z-index: 11;
        }

        &:not(.@{button-prefix-cls}-disabled):not(.@{button-prefix-cls}-ghost) {
            &:active {
                opacity: @btn-disabled-opacity;
            }

            @media (min-device-width: @screen-sm) {
                &:hover,
                &:active {
                    opacity: @btn-disabled-opacity;
                }
            }
        }

        > .@{button-prefix-cls}-icon {
            color: #999;
        }

        &.@{button-prefix-cls}-round {
            &:after {
                border-radius: 2rem;
            }
        }

        &.@{button-prefix-cls}-ghost {
            &:active {
                color: #fff;
                background-color: @btn-default-active-color;
            }

            &.@{button-prefix-cls}-round {
                &:after {
                    border-radius: 2rem;
                }
            }

            @media (min-device-width: @screen-sm) {
                &:hover,
                &:active {
                    color: #fff;
                    background-color: @btn-default-hover-color;

                    &:after {
                        border-color: @btn-default-hover-color;
                    }
                }
            }
        }
    }

    &-primary {
        background-color: @btn-primary-bg-color;

        &:not(.@{button-prefix-cls}-disabled):not(.@{button-prefix-cls}-ghost) {
            &:active {
                background-color: @btn-primary-active-color;
            }

            @media (min-device-width: @screen-sm) {
                &:hover,
                &:active {
                    background-color: @btn-primary-hover-color;
                }
            }
        }

        &.@{button-prefix-cls}-ghost {
            color: @btn-primary-bg-color;
            background-color: #fff;

            &:after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border: 1px solid @btn-primary-bg-color;
                border-radius: @btn-border-radius-base;
                z-index: 11;
            }

            &:active {
                color: #fff;
                background-color: @btn-primary-bg-color;
            }

            &.@{button-prefix-cls}-round {
                &:after {
                    border-radius: 2rem;
                }
            }

            @media (min-device-width: @screen-sm) {
                &:hover,
                &:active {
                    color: #fff;
                    background-color: @btn-primary-hover-color;

                    &:after {
                        border-color: @btn-primary-hover-color;
                    }
                }
            }
        }
    }

    &-success {
        background-color: @btn-success-bg-color;

        &:not(.@{button-prefix-cls}-disabled):not(.@{button-prefix-cls}-ghost) {
            &:active {
                background-color: @btn-success-active-color;
            }

            @media (min-device-width: @screen-sm) {
                &:hover,
                &:active {
                    background-color: @btn-success-hover-color;
                }
            }
        }

        &.@{button-prefix-cls}-ghost {
            color: @btn-success-bg-color;
            background-color: #fff;

            &:after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border: 1px solid @btn-success-bg-color;
                border-radius: @btn-border-radius-base;
                z-index: 11;
            }

            &:active {
                color: #fff;
                background-color: @btn-success-bg-color;
            }

            &.@{button-prefix-cls}-round {
                &:after {
                    border-radius: 2rem;
                }
            }

            @media (min-device-width: @screen-sm) {
                &:hover,
                &:active {
                    color: #fff;
                    background-color: @btn-success-hover-color;

                    &:after {
                        border-color: @btn-success-hover-color;
                    }
                }
            }
        }
    }

    &-info {
        background-color: @btn-info-bg-color;

        &:not(.@{button-prefix-cls}-disabled):not(.@{button-prefix-cls}-ghost) {
            &:active {
                background-color: @btn-info-active-color;
            }

            @media (min-device-width: @screen-sm) {
                &:hover,
                &:active {
                    background-color: @btn-info-hover-color;
                }
            }
        }

        &.@{button-prefix-cls}-ghost {
            color: @btn-info-bg-color;
            background-color: #fff;

            &:after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border: 1px solid @btn-info-bg-color;
                border-radius: @btn-border-radius-base;
                z-index: 11;
            }

            &:active {
                color: #fff;
                background-color: @btn-info-bg-color;
            }

            &.@{button-prefix-cls}-round {
                &:after {
                    border-radius: 2rem;
                }
            }

            @media (min-device-width: @screen-sm) {
                &:hover,
                &:active {
                    color: #fff;
                    background-color: @btn-info-hover-color;

                    &:after {
                        border-color: @btn-info-hover-color;
                    }
                }
            }
        }
    }

    &-warning {
        background-color: @btn-warning-bg-color;

        &:not(.@{button-prefix-cls}-disabled):not(.@{button-prefix-cls}-ghost) {
            &:active {
                background-color: @btn-warning-active-color;
            }

            @media (min-device-width: @screen-sm) {
                &:hover,
                &:active {
                    background-color: @btn-warning-hover-color;
                }
            }
        }

        &.@{button-prefix-cls}-ghost {
            color: @btn-warning-bg-color;
            background-color: #fff;

            &:after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border: 1px solid @btn-warning-bg-color;
                border-radius: @btn-border-radius-base;
                z-index: 11;
            }

            &:active {
                color: #fff;
                background-color: @btn-warning-bg-color;
            }

            &.@{button-prefix-cls}-round {
                &:after {
                    border-radius: 2rem;
                }
            }

            @media (min-device-width: @screen-sm) {
                &:hover,
                &:active {
                    color: #fff;
                    background-color: @btn-warning-hover-color;

                    &:after {
                        border-color: @btn-warning-hover-color;
                    }
                }
            }
        }
    }

    &-danger {
        background-color: @btn-danger-bg-color;

        &:not(.@{button-prefix-cls}-disabled):not(.@{button-prefix-cls}-ghost) {
            &:active {
                background-color: @btn-danger-active-color;
            }

            @media (min-device-width: @screen-sm) {
                &:hover,
                &:active {
                    background-color: @btn-danger-hover-color;
                }
            }
        }

        &.@{button-prefix-cls}-ghost {
            color: @btn-danger-bg-color;
            background-color: #fff;

            &:after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border: 1px solid @btn-danger-bg-color;
                border-radius: @btn-border-radius-base;
                z-index: 11;
            }

            &:active {
                color: #fff;
                background-color: @btn-danger-bg-color;
            }

            &.@{button-prefix-cls}-round {
                &:after {
                    border-radius: 2rem;
                }
            }

            @media (min-device-width: @screen-sm) {
                &:hover,
                &:active {
                    color: #fff;
                    background-color: @btn-danger-hover-color;

                    &:after {
                        border-color: @btn-danger-hover-color;
                    }
                }
            }
        }
    }

    &-link {
        display: inline-block;
        width: auto;
        min-width: 0.44rem;
        height: auto;
        min-height: 0.44rem;
        padding: 0.01rem;
        color: @theme-color;
        background-color: transparent;
        box-shadow: none;

        &:not(.@{button-prefix-cls}-disabled) {
            &:active {
                opacity: @btn-disabled-opacity;
            }

            @media (min-device-width: @screen-sm) {
                &:hover {
                    opacity: @btn-disabled-opacity;
                }
            }
        }
    }

    &-square {
        border-radius: 0;

        &:after {
            border-radius: 0 !important;
        }
    }

    &-round {
        border-radius: 1rem;
    }

    &-disabled {
        opacity: @btn-disabled-opacity;
        cursor: not-allowed;
    }

    &-loading {
        cursor: wait;
    }

    > i,
    > span {
        vertical-align: middle;
        pointer-events: none;
    }

    > i {
        font-size: @btn-icon-size;
    }

    > span {
        display: inline-block;
    }

    > i + span {
        margin-left: @btn-icon-spacing;
    }

    @media screen and (min-width: @screen-sm) {
        max-width: 300px;
        height: 36px;
        font-size: 14px;
    }

    @media screen and (min-width: @screen-lg) {
        max-width: 400px;
    }
}

@media (-webkit-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) {
    .@{button-prefix-cls} {
        &&-default {
            .b1px(@btn-default-border-color, @btn-border-radius-base);
        }

        &.@{button-prefix-cls}-round {
            &:after {
                border-radius: 2rem;
            }
        }

        &&-default,
        &&-primary,
        &&-success,
        &&-info,
        &&-warning,
        &&-danger {
            &.@{button-prefix-cls}-ghost {
                &:after {
                    content: '';
                    width: 200%;
                    height: 200%;
                    border-radius: 2 * @btn-border-radius-base;
                    transform: scale3d(0.5, 0.5, 1);
                    transform-origin: 0 0;
                }

                &.@{button-prefix-cls}-round {
                    &:after {
                        border-radius: 2rem;
                    }
                }
            }
        }
    }
}
