@import 'constants';

@mixin button-base {
    display: inline-flex;
    align-items: center; 
    justify-content: center; 
    line-height: $default-line-height;
    height: $button-spacing-default;
    padding: 0 $button-padding-default;
    margin: 0 $button-margin-default;
    font-size: $button-font-size-default;
    font-weight: $base-font-weight-bold;
    border-radius: 0.2em;
    box-sizing: border-box;
    text-align: center;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

@mixin button-colors {
    @each $colorName, $color in $color-list {
        &.#{$colorName} {
            background-color: $color;
            border: 1px solid $color;

            &.inverted, &.outlined {
                color: $color;
                border-color: $color;
                background-color: rgba(0, 0, 0, 0);
            }

            &:hover, &:focus {
                color: $color-white;
                background-color: darken-1($color);
                border-color: darken-1($color);
            }

            &:active {
                background-color: darken-2($color);
                border-color: darken-2($color);
                outline: 0;
            }

            &[disabled] {
                color: $color-white;
                background-color: $color;
                border: 1px solid $color;
            }

            &.outlined {
                &:hover, &:focus{
                    color: darken-1($color);
                    border-color: darken-1($color);
                    background-color: rgba(0, 0, 0, 0);
                }

                &:active {
                    color: darken-2($color);
                    border-color: darken-2($color);
                    background-color: rgba(0, 0, 0, 0);
                }
            }

            // Work around for disabling inverted/outlined buttons
            &.inverted, &.outlined {
                &[disabled] {
                    color: $color;
                    border-color: $color;
                    background-color: rgba(0, 0, 0, 0);
                }
            }

        }
    }
}