.button-gradient(@base, @from, @to) {
    background: @base;
    background: linear-gradient(to bottom, @from 0%, @to 100%);
}

.aui-button-style(normal) {
    .button-gradient(#f2f2f2, #fff, #f2f2f2);
    border-color: var(--ds-border, #ccc);
    border-radius: 3.01px;
    border-style: solid; // border width and style don't change after this
    border-width: 1px; // border width and style don't change after this
    color: var(--ds-text, #333);
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-family: inherit; // To get the font stack defined on 'body'
    font-variant: normal;
    line-height: 20px;
    margin: 0 10px 0 0;
    padding: 4px 10px;
    text-decoration: none;
    /* stylelint-disable design-system/ensure-design-token-usage */
    text-shadow: 0 1px 0 white;
    /* stylelint-enable design-system/ensure-design-token-usage */
    vertical-align: baseline;

    &::-moz-focus-inner {
        border: 0;
        padding: 0;
    }

    &:focus,
    &:hover {
        .button-gradient(#f7f7f7, #fff, #f7f7f7);
        border-color: var(--ds-border-focused, #999);
        color: var(--ds-text-accent-gray-bolder, #000);
        text-decoration: none;
    }

    &:active {
        background: var(--ds-background-input-pressed, #f2f2f2);
        background-image: none;
        background-color: var(--ds-background-input-pressed, #f2f2f2);
        box-shadow: var(--ds-shadow-raised, inset 0 3px 6px rgba(0, 0, 0, 0.1));
        text-shadow: none;
        text-decoration: none;
    }
}

.aui-button-style(toggled) {
    .button-gradient(#ddd, #ccc, #ddd);

    &:active {
        background: var(--ds-background-input-pressed, #ddd);
        background-image: none;
        box-shadow: var(--ds-shadow-raised, inset 0 3px 6px rgba(0, 0, 0, 0.2));
    }
}

.aui-button-style(disabled) {
    .disabled-styles() {
        .button-gradient(#f2f2f2, #fff, #f2f2f2);
        border-color: var(--ds-border-disabled, #ddd);
        box-shadow: none;
        color: var(--ds-text-disabled, #999);
        cursor: default;
        text-shadow: none;
    }

    .disabled-styles();

    &:hover,
    &:focus,
    &:active {
        .disabled-styles();
    }
}

.aui-button-style-subtle(normal) {
    .aui-button-style(normal);
    background: transparent;
    border-color: transparent;
    color: var(--ds-text-subtle, #707070);

    &.active {
        background-image: none;
        background-color: var(--ds-background-input-pressed, #f2f2f2);
        box-shadow: var(--ds-shadow-raised, inset 0 3px 6px rgba(0, 0, 0, 0.1), 0 0 0 1px #999);
        text-shadow: none;
        text-decoration: none;
    }

    &[aria-pressed="true"] {
        .button-gradient(#ccc, #ddd, #ccc);
        border-color: var(--ds-border-focused, #ccc);
        color: var(--ds-text, #333);
    }
    &.aui-dropdown2-trigger.active {
        border-color: var(--ds-border-focused, #ccc);
    }
    &.aui-dropdown2-trigger:hover {
        border-color: var(--ds-border-selected, #999);
    }

    // need this as the li's don't get the active class
    > .active {
        background-color: var(--ds-background-input-pressed, #f2f2f2);
        box-shadow: var(--ds-shadow-raised, inset 0 3px 6px rgba(0, 0, 0, 0.1), 0 0 0 1px #ccc);
        border-radius: 3.01px 3.01px 0 0;
        color: var(--ds-text-selected, #000);
        text-decoration: none;

        &:hover {
            box-shadow: var(--ds-shadow-overflow-spread, inset 0 3px 6px rgba(0, 0, 0, 0.1));
        }
    }
}