/**
 * For styles that are used in more than one place throughout the application.
 *
 * 1. Buttons
 *
 */

// 1. Buttons -------------------------------------------------------------------------------------

.at-Button--success {
    .at-mixin-Button();
    .at-mixin-ButtonColor('at-color-success', 'at-color-default');

    &[disabled] {
        background: @at-color-disabled;
        border-color: @at-color-disabled;
    }
}

.at-Button--add {
    &:extend(.at-Button--success all);
    &:before {
        content: "+";
        font-size: 20px;
    }
    border: none;
    display: inline-flex;
    margin-left: @at-space-4x;

    &[aria-expanded="true"] {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}

.at-Button--info {
    .at-mixin-Button();
    .at-mixin-ButtonColor('at-color-info', 'at-color-default');
}

.at-Button--error {
    .at-mixin-Button();
    .at-mixin-ButtonColor('at-color-error', 'at-color-default');
}

.at-ButtonHollow--default {
    .at-mixin-Button();
    .at-mixin-ButtonHollow(
        'at-color-default',
        'at-color-button-border-default',
        'at-color-button-text-default'
    );
}

.at-ButtonIcon {
    padding: 4px @at-padding-button-horizontal;
    font-size: @at-font-size-body;
}

.at-ButtonIcon-noborder {
    padding: 4px @at-padding-button-horizontal;
    font-size: @at-font-size-body;
    .at-mixin-Button();
    .at-mixin-ButtonHollow(
        'at-color-default',
        'at-color-default',
        'at-color-button-text-default'
    );
}

.at-Button--expand {
    width: 100%;
}
