@mixin m-button() {
    transition-property: background-color, border-color, color, outline;
    transition-duration: $m-transition-duration;
    transition-timing-function: ease;
    border: 1px solid $m-color-interactive;
    font-family: inherit;
    text-decoration: none;
    appearance: none;
    outline-color: $m-color-interactive-darker;
    outline-offset: 2px;
    outline-width: 1px;
    user-select: none;
}

@mixin m-button--primary() {
    color: $m-color-white;
    background: $m-color-interactive;
}

@mixin m-button--secondary() {
    color: $m-color-interactive;
    background: $m-color-white;
}

@mixin m-button--tertiary() {
    color: $m-color-interactive;
    background: $m-color-grey-lightest;
    border-color: $m-color-grey-lighter;
}

@mixin m-button--waiting() {
    cursor: progress;
    color: $m-color-white;
    background: $m-color-interactive-light;
    border-color: $m-color-interactive-light;
}

@mixin m-button--disabled() {
    cursor: default;
    color: $m-color-disabled;
    background: $m-color-white;
    border-color: $m-color-disabled;
}

@mixin m-button--hover() {
    cursor: pointer;

    &:hover {
        color: $m-color-white;
        background: $m-color-interactive-light;
        border-color: $m-color-interactive-light;
    }

    &:active,
    &:focus:not(:hover) {
        @include m-button--active();
    }
}

@mixin m-button--active() {
    color: $m-color-white;
    background: $m-color-interactive-dark;
    border-color: $m-color-interactive-dark;
}