@import 'constants';
@import 'styling';

.button, button, input[type="submit"],
input[type="reset"],input[type="button"] {
    @include button-base;
    color: $color-white;
    background-color: $color-dark;
    border: 1px solid $color-dark;
    transition: background 0.2s ease-in-out, border 0.2s ease-in-out, color 0.2s ease-in-out;

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

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

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

    &[disabled] {
        color: $color-white;
        background-color: $color-dark;
        border: 1px solid $color-dark;
        opacity: 0.5;
        cursor: not-allowed;
    }

    &.rounded {
        border-radius: $button-rounded-border-radius;
    }

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

        }

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

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

    @if $include-color-palette {
        @include button-colors;
    }

    @each $size, $fontSize, $spacing, $padding in $button-font-sizing-spacing-padding-list {
        &.#{$size} {
            height: $spacing;
            padding: 0 $padding;
            font-size: $fontSize;
        }
    }

}