$height: 1rem;
// 纯色背景按钮
// 根据背景色亮度决定按钮字体颜色
@mixin btn($color) {
    $lightness: lightness($color);
    background: $color;
    border-color: $color;
    font-weight: 500;
    color: color-yiq($color);
    @if (98% < $lightness) {
        border: 1px solid $lighter;
    }
    @else {
        border: 1px solid transparent;
    }
    &:before {
        border-color: transparent transparent color-yiq($color) color-yiq($color);
    }
}

// 幽灵按钮
@mixin btn-outline($color) {
    // $r: red($color);
    // $g: green($color);
    // $b: blue($color);
    $lightness: lightness($color); // @debug $color;
    background: transparent;
    @if (98% < $lightness) {
        border: 1px solid $dark;
        color: $darker;
    }
    @else {
        border: 1px solid $color;
        color: $color;
    }
    &:before {
        border-color: transparent transparent $color $color;
    }
}

button {
    -webkit-appearance: none;
    outline: none;
    border: 0 none;
    border-radius: $borderRadius;
    font-weight: 900;
    &[type='button'],
    [type='reset'],
    [type='submit'] {
        -webkit-appearance: button;
    }
    // 让子元素垂直居中
    >*{vertical-align: bottom};
}

.atom-btn {
    overflow: hidden;
    display: inline-block;
    user-select: none;
    padding: $gutter*0.8 $gutter*2;
    text-align: center;
    white-space: nowrap; // letter-spacing: 1px;
    text-decoration: none;
    border: 1px solid transparent;
    font-size: $big;
    transition: all $duration;
    border-radius: $radius;
    vertical-align: middle;

    &[rounded=false] {
        border-radius: 0 !important;
    }

    &[disabled] {
        pointer-events: none !important;
        color: rgba(0, 0, 0, 0.25) !important;
        background-color: #f5f5f5 !important;
        border-color: #d9d9d9 !important;
    }

    &:not([inline]) {
        width: 100%;
    }
    &[inline] {
        // line-height: 1 !important;
        min-height: auto !important;
        max-height: auto !important;
        padding: 6px 11px !important;
        font-size: 12px;
    }


    &[circle] {
        border-radius: $height !important;
        padding: 6px !important;
    }

    &[circle]:not([inline]) {
        border-radius: $height !important;
        padding: $gutter*0.8 $gutter*2 !important;
    }



    &[loading] {
        pointer-events: none;
        opacity: 0.6;
        &:before {
            content: '';
            display: inline-block;
            height: 12px;
            width: 12px; // border-color: transparent transparent $lighter $lighter !important;
            border-style: solid;
            border-width: 2px;
            border-radius: 50%;
            margin-right: $gutter/2;
            animation: rotation infinite $duration*2 linear;
        }
        .atom-btn__icon {
            display: none;
        }
    }
}

@each $key,
$value in $theme_colors {
    .atom-btn--#{$key}:not([outline]) {
        @include btn($value);
    }
    .atom-btn--#{$key}[outline] {
        @include btn-outline($value);
    }
}

@keyframes rotation {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}