////
/// @group Buttons
/// @author Mustard-UI@v1, Michael Becker
////


///
#{$button-selector} {
    @include btnBase;
    @include btnStates;
}

///
#{$button-class}-style {
    @include btnBase;

    @at-root #{&}[tabindex]:not([tabindex="-1"]), a#{&}, button#{&} {
        &:hover,
        &:hover {
            cursor: pointer;
        }
    }
}

///
#{$button-class}-text {
    background-color: transparent;
    border-color: transparent;
}

@each $name, $color in $button-colors {
    ///
    #{$button-class}-#{$name} {
        background-color: $color;
        color: $button-text-color;
        border-color: $color;
    }

    ///
    #{$button-class}-#{$name}-o {
        background-color: $button-outline-background-color;
        color: $color;
        border-color: $color;
    }

    ///
    #{$button-class}-#{$name}-text {
        color: $color;
        border-color: transparent;
    }
}

///
#{$button-class}-round {
    border-radius: $button-round-radius;
}

///
#{$button-class}-lg {
    padding: $button-lg-padding;
    font-size: $button-lg-font-size;
}

///
#{$button-class}-sm {
    padding: $button-sm-padding;
    font-size: $button-sm-font-size;
    letter-spacing: $button-sm-letter-spacing;
}

///
#{$button-class}-raw {
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    text-align: start;
}