@import "./qeeq";

$red-light: #de1217;
$red-shade: $crimson-shade;
$red: $crimson;
$red-tint: $crimson-tint;
$green-light: #28a745;
$green-shade: #1e8549;
$green: #26a65b;
$green-tint: #51b87c;
$gold: #ffc400;
$gold-tint: #ffd674;
$violet: #8344ad;
$violet-tint: #a54dde;
$blue: #374ad0;
$blue-tint: #475fef;
//.btn:focus {
//    outline: 1px dashed #0005;
//    box-shadow: 0 0 0px 2px #fff6;
//}
@mixin btn($flavor, $neutral, $hovered, $text) {
    .btn.#{$flavor} {
        background: $neutral;
        border-color: $neutral;
        color: $text;
    }
    .btn.#{$flavor}:hover:not([disabled]), .btn.#{$flavor}.active, .btn[selected], .btn[selected=true] {
        background: $hovered;
        border-color: $hovered;
    }
    .btn.#{$flavor}:focus {
        outline: none;
        //outline: rgba(red($text), green($text), blue($text), 0.7) 1px solid;
        box-shadow: 0 0 0px 3px rgba(red($hovered), green($hovered), blue($hovered), 0.5);
    }
}
@mixin btn-o($flavor, $neutral, $hovered: $neutral, $hovered-text: white) {
    .btn.#{$flavor}-o {
        background: #fff0;
        border-color: $neutral;
        color: $neutral;
    }
    .btn.#{$flavor}-o:hover:not([disabled]), .btn.#{$flavor}-o.active, .btn[selected], .btn[selected=true] {
        background: $hovered;
        border-color: $hovered;
        color: $hovered-text;
    }
    .btn.#{$flavor}-o:focus {
        outline: none;
        //outline: rgba(red($neutral), green($neutral), blue($neutral), 0.2) 1px solid;
        box-shadow: 0 0 0px 3px rgba(red($hovered), green($hovered), blue($hovered), 0.5);
    }
}

@include btn("dark", $dark, $dark-tint1, white);
@include btn-o("dark", $dark, $dark-tint1);

@include btn("red", $red, $red-tint, white);
@include btn-o("red", $red-light, $red-tint);

@include btn("green", $green-shade, $green, white);
@include btn-o("green", $green-light, $green);

@include btn("gold", $gold, $gold-tint, black);
@include btn-o("gold", $gold, $gold-tint, black);

@include btn("violet", $violet, $violet-tint, white);
@include btn-o("violet", $violet-tint, $violet);

@include btn("blue", $blue, $blue-tint, white);
@include btn-o("blue", $blue-tint);

@include btn("silver", $light-shade1, $light-shade3, black);
@include btn-o("silver", $light-shade1, $light-shade2, black);