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

/// the styling for the button base element, without states (e.g. no `hover` included)
@mixin btnBase {
    display: inline-block;
    padding: $button-padding;
    width: auto;
    background: $button-background-color;
    overflow: visible;
    appearance: none;
    transition: all .1s ease-out;

    font-size: $button-font-size;
    font-weight: $button-font-weight;
    letter-spacing: $button-letter-spacing;
    color: inherit;
    text-decoration: none;
    text-transform: $button-text-transform;
    white-space: nowrap;

    border-radius: $button-radius;
    border-style: solid;
    border-width: $button-border-width;
    border-color: inherit;
    line-height: $button-line-height;

    @if $button-shadow {
        box-shadow: elevation(1);
    }
}

/// the styling for `focus`/`hover`/`active`/`disabled` pseudo elements
@mixin btnStates {
    &:focus {
        // todo: maybe remove the `keyboard outline` reset with a good style
        outline: none;
    }

    &:focus,
    &:hover {
        cursor: pointer;

        @if $button-shadow {
            box-shadow: elevation(2);
        }

        @each $type, $style in $button-interaction-intent {
            #{$type}: $style;
        }
    }

    &:active {
        @each $type, $style in $button-interaction-active {
            #{$type}: $style;
        }
    }

    &:disabled,
    &.disabled {
        cursor: $button-interaction-disabled-cursor;
        @each $type, $style in $button-interaction-active {
            #{$type}: $style;
        }
    }
}

///
@mixin button-group-vertical() {
    flex-direction: column;

    :first-child:not(:last-child) {
        border-radius: $button-border-radius $button-border-radius 0 0;
    }

    :last-child:not(:first-child) {
        border-radius: 0 0 $button-border-radius $button-border-radius;
    }
}