@import "../../../theme/color.variables";

button {
    outline: none;
}

$xs: 2px 8px;
$sm: 5px 10px;
$md: 8px 12px;
$lg: 10px 16px;
$xsloading: 1px 4px;
$smloading: 2px 5px;
$mdloading: 3px 6px;
$lgloading: 4px 8px;
.we-button {
    padding: $md;
    overflow: hidden;
    border-radius: 6px;
    border: 0;
    text-align: center;
    display: inline-block;
    position: relative;
    outline: none;
    font-weight: 400;
    -webkit-appearance: none;
    user-select: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.1s linear;
    box-sizing: border-box;
}
@mixin we-button-colors($color, $type) {
    background: $color;
    color: $color;
    @if $type== "default" {
        background: transparent;
        border: 1px solid $color;
        &:focus,
        &:hover {
            background: mix($white, $color, 90%);
            border: 1px solid mix($white, $color, 20%);
            color: $color;
        }
    }
    @if $type== "primary" {
        border: none;
        color: $white;
        &:focus,
        &:hover {
            background: mix($white, $color, 30%);
        }
        &:active {
            background: mix($black, $color, 5%);
        }
        &:disabled {
            background: mix($white, $color, 40%);
        }
    }
    @if $type== "link" {
        background: none;
        border: none;
    }
    @if $type== "ghost" {
        background: #ffffff;
        border: 1px solid $color;
    }
    @if $type== "delicate" {
        background: none;
        border: none;
    }
}

.we-button-type-default {
    @include we-button-colors($primaryColor, "default");
}

.we-button-type-primary {
    @include we-button-colors($primaryColor, "primary");
    border: none;
    color: $white !important;
}

.we-button-type-link {
    @include we-button-colors($primaryColor, "link");
}

.we-button-type-ghost {
    @include we-button-colors($primaryColor, "ghost");
}

.we-button-type-delicate {
    @include we-button-colors($delicateColor, "delicate");
}

.we-button-type-default.we-button-status-success {
    @include we-button-colors($successColor, "default");
}

.we-button-type-default.we-button-status-info {
    @include we-button-colors($infoColor, "default");
}

.we-button-type-default.we-button-status-warning {
    @include we-button-colors($warningColor, "default");
}

.we-button-type-default.we-button-status-danger {
    @include we-button-colors($dangerColor, "default");
}

.we-button-type-primary.we-button-status-success {
    @include we-button-colors($successColor, "primary");
}

.we-button-type-primary.we-button-status-info {
    @include we-button-colors($infoColor, "primary");
}

.we-button-type-primary.we-button-status-warning {
    @include we-button-colors($warningColor, "primary");
}

.we-button-type-primary.we-button-status-danger {
    @include we-button-colors($dangerColor, "primary");
}

.we-button-type-link.we-button-status-success {
    @include we-button-colors($successColor, "link");
}

.we-button-type-link.we-button-status-info {
    @include we-button-colors($infoColor, "link");
}

.we-button-type-link.we-button-status-warning {
    @include we-button-colors($warningColor, "link");
}

.we-button-type-link.we-button-status-danger {
    @include we-button-colors($dangerColor, "link");
}

.we-button-type-ghost.we-button-status-success {
    @include we-button-colors($successColor, "ghost");
}

.we-button-type-ghost.we-button-status-info {
    @include we-button-colors($infoColor, "ghost");
}

.we-button-type-ghost.we-button-status-warning {
    @include we-button-colors($warningColor, "ghost");
}

.we-button-type-ghost.we-button-status-danger {
    @include we-button-colors($dangerColor, "ghost");
}

.we-button-disabled {
    background-color: #f7f7fa;
    cursor: not-allowed;

    &:focus,
    &:hover {
        background-color: #f7f7fa;
        outline: none;
    }
}

.we-button-shape-square {
    border-radius: 6px;
}

.we-button-shape-circle {
    border-radius: 50%;
    padding: 0;
}

.we-button-shape-round {
    border-radius: 18px;
}

.we-button-size-lg {
    padding: $lg;
    font-size: 16px;
}

.we-button-size-lg.we-button-loading {
    padding: $lgloading;
    font-size: 16px;
}

.we-button-size-md {
    padding: $md;
    font-size: 14px;
}

.we-button-size-md.we-button-loading {
    padding: $mdloading;
    pointer-events: none;
    font-size: 14px;
}

.we-button-size-sm {
    padding: $sm;
    font-size: 14px;
}

.we-button-size-sm.we-button-loading {
    padding: $smloading;
    pointer-events: none;
    font-size: 14px;
}

.we-button-size-xs {
    padding: $xs;
    font-size: 12px;
}

.we-button-size-xs.we-button-loading {
    padding: $xsloading;
    pointer-events: none;
    font-size: 14px;
}

.we-button-slot {
    text-align: center;
}