@import '../styles/_base.less';
@import '../styles/_mixins.less';

.btn-hover::before {
    .active();
}

.special-container {
    display: flex;
}

.l-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: 28rpx;
    position: relative;
    color: #fff;
    padding: 0 12rpx;
    box-sizing: border-box;

    // img-size
    &-img {
        &-mini {
            width: @btn-height-mini / 2;
            height: @btn-height-mini / 2;
        }
        &-medium {
            width: @btn-height / 2;
            height: @btn-height / 2;
        }
        &-large {
            height: @btn-height-large / 2;
            width: @btn-height-large / 2;
        }
    }

    // Size
    &-long {
        border-radius: 0;
        height: 88rpx;
        width: 100%;
    }
    &-medium {
        height: @btn-height;
        min-width: @btn-width;
    }
    &-large {
        height: @btn-height-large;
        min-width: @btn-width-large;
    }
    &-mini {
        height: @btn-height-mini;
        min-width: @btn-width-mini;
        font-size: @size-font-mini;
    }

    //Type
    &-default {
        background-color: @default-color;
    }

    &-success {
        background-color: @success-color;
    }

    &-warning {
        background-color: @warning-color;
        color: #333333;
    }

    &-error {
        background-color: @error-color;
    }

    // Shape
    &-square {
        border-radius: 0;
    }
    &-semicircle {
        border-radius: @btn-circle-size;
    }
    &-large&-semicircle {
        border-radius: @btn-circle-size-large;
    }
    &-mini&-semicircle {
        border-radius: @btn-circle-size-mini;
    }
    &-circle {
        border-radius: @btn-circle-size / 5;
    }
    &-large&-circle {
        border-radius: @btn-circle-size-large / 5;
    }
    &-mini&-circle {
        border-radius: @btn-circle-size-mini / 5;
    }

    // Plain
    &-plain {
        background-color: #fff;
        color: @default-color;
        border: 2rpx solid @default-color;
    }
    &-success&-plain {
        background-color: #fff;
        color: @success-color;
        border: 2rpx solid @success-color;
    }
    &-error&-plain {
        background-color: #fff;
        color: @error-color;
        border: 2rpx solid @error-color;
    }
    &-warning&-plain {
        background-color: #fff;
        color: @warning-color;
        border: 2rpx solid @warning-color;
    }

    // Loading
    &-loading {
        opacity: 0.6;
        display: inline-block;
        vertical-align: middle;
        width: 24rpx;
        height: 24rpx;
        background: transparent;
        border-radius: 50%;
        border: 4rpx solid @btn-loading-color;
        border-color: @btn-loading-color @btn-loading-color @btn-loading-color
            transparent;
        animation: btn-spin 0.6s linear;
        animation-iteration-count: infinite;
        &-default {
            border: 4rpx solid @default-color;
            border-color: @default-color @default-color @default-color
                transparent;
        }
        &-success {
            border: 4rpx solid @success-color;
            border-color: @success-color @success-color @success-color
                transparent;
        }
        &-error {
            border: 4rpx solid @error-color;
            border-color: @error-color @error-color @error-color transparent;
        }
        &-warning {
            border: 4rpx solid @warning-color;
            border-color: @warning-color @warning-color @warning-color
                transparent;
        }
    }

    // Disabled
    &-disabled {
        opacity: 0.8;
        background-color: @disabled-color;
        color: rgba(0, 0, 0, 0.25);
    }
}

.icon {
    display: flex !important;
}

.margin {
    &-mini {
        margin-right: 10rpx;
    }
    &-medium {
        margin-right: 18rpx;
    }
    &-large {
        margin-right: 24rpx;
    }
    &-long {
        margin-right: 24rpx;
    }
}

@keyframes btn-spin {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}