@use "variables";
@use "sass:color";

$unit: variables.$unit;
$white: variables.$white;
$black: variables.$black;
$default: variables.$default;
$green: variables.$green;
$yellow: variables.$yellow;
$blue: variables.$blue;
$danger: variables.$danger;
$dark: variables.$dark;
$gray: variables.$gray;
$bright: variables.$bright;

// 按钮样式
$buttons: (
    "default": $default,
    "success": $green,
    "warning": $yellow,
    "info": $blue,
    "danger": $danger,
    "dark": $dark,
    "gray": $gray,
    "bright": $bright,
);

@each $color, $value in $buttons {
    @if ($color =='bright') {
        .btn-#{$color} {
            background-color: $value;
            border-radius: $unit;
            height: 3rem;
            line-height: 3rem;
            width: 100%;
            color: $black;
            border: 1px solid color.adjust($value, $lightness: -6%);
            transition: background-color 0.2s;
            cursor: pointer;

            &:hover {
                background-color: color.adjust($value, $lightness: 6%);
            }
        }

        .btn-gradient-#{$color} {
            background: linear-gradient(45deg, color.adjust($value, $lightness: -6%), color.adjust($value, $lightness: 12%));
            border-radius: $unit;
            height: 3rem;
            line-height: 3rem;
            width: 100%;
            color: $black;
            border: 1px solid color.adjust($value,  $lightness: -6%);
            cursor: pointer;

            &:hover {
                background: linear-gradient(45deg, color.adjust($value,  $lightness: 6%), color.adjust($value, $lightness: 18%));
            }
        }
    } @else {
        .btn-#{$color} {
            background-color: $value;
            border-radius: $unit;
            height: 3rem;
            line-height: 3rem;
            width: 100%;
            color: $white;
            border: 1px solid color.adjust($value,  $lightness: -6%);
            transition: background-color 0.2s;
            cursor: pointer;

            &:hover {
                background-color: color.adjust($value, $lightness: 6%);
            }
        }

        .btn-gradient-#{$color} {
            background: linear-gradient(45deg, color.adjust($value,  $lightness: -6%), color.adjust($value,  $lightness: 12%));
            border-radius: $unit;
            height: 3rem;
            line-height: 3rem;
            width: 100%;
            color: $white;
            border: 1px solid color.adjust($value,  $lightness: -6%);
            cursor: pointer;

            &:hover {
                background: linear-gradient(45deg, color.adjust($value,  $lightness: -16%), color.adjust($value,  $lightness: -6%));
            }
        }
    }
}