_sass/taiga/_button.scss

@use "settings";

// =========== Buttons

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

%button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    border-radius: settings.$border-radius-10;
    cursor: pointer;
    display: inline-block;
    font-family: settings.$font-family-body;
    font-size: settings.$font-size-30;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: bold;
    line-height: 1.5em;
    margin: 0 0 0.25rem 0;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    vertical-align: bottom;

    &:focus { outline: 0; }
}

// The standard button has the $color-brand colors
.button,
input[type=submit],
button {
    @extend %button;
    background: settings.$color-brand-70;
    color: settings.$white;

    &:hover {
        background: settings.$color-brand-60;
        color: settings.$white;
    }

    &:active,
    &:focus {
        box-shadow: inset 0 1px 3px rgba(settings.$black, 0.2);
    }
}

.button--neutral,
input[type=submit].button--neutral,
button.button--neutral {
    @extend %button;
    background: settings.$color-neutral-30;
    color: settings.$color-neutral-70;

    &:hover {
        background: settings.$color-neutral-50;
        color: settings.$color-neutral-70;
    }

    &:active,
    &:focus {
        box-shadow: inset 0 1px 3px rgba(settings.$black, 0.2);
    }
}

.button--success,
input[type=submit].button--success,
button.button--success {
    @extend %button;
    background-color: settings.$color-success-50;
    color: settings.$white;

    &:hover {
        background-color: settings.$color-success-60;
        color: settings.$white;
    }

    &:active,
    &:focus {
        box-shadow: inset 0 1px 3px rgba(settings.$black, 0.2);
    }
}

.button--alert,
input[type=submit].button--alert,
button.button--alert {
    @extend %button;
    background-color: settings.$color-alert-50;
    color: settings.$white;

    &:hover {
        background-color: settings.$color-alert-60;
        color: settings.$white;
    }

    &:active,
    &:focus {
        box-shadow: inset 0 1px 3px rgba(settings.$black, 0.2);
    }
}