@import '../../less/animations';
@import '../../less/fonts';
@import '../../less/mixins';
@import '../../less/palette';
@import '../../less/palette-brand-@{theme}';

.button {
    .standard-transition(background-color, border-color);
    display: block;
    border-radius: 3px;
    background-color: @color-brand;
    color: #fff;
    font-family: inherit;
    font-size: inherit;
    text-transform: capitalize;
    letter-spacing: -0.1px;
    border: 1px solid @color-brand;
    box-sizing: border-box;
    height: 40px;
    padding: 0;
    overflow: hidden;
    line-height: 40px;
    outline: none;
    cursor: pointer;

    > .content {
        display: block;
        width: 100%;
        height: 100%;
        padding: 0 30px;
        box-sizing: border-box;
        margin-top: 0;
        opacity: 1;
        transition: opacity 0.35s cubic-bezier(0.65, 0, 0.4, 1), margin-top 0.35s cubic-bezier(0.65, 0, 0.4, 1);
    }

    > .loading-spinner {
        display: block;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        background-color: transparent;
        opacity: 0;
        transition: opacity 0.35s cubic-bezier(0.65, 0, 0.4, 1);
        position: relative;

        &:before {
            content: '';
            position: absolute;
            background-repeat: no-repeat;
            background-size: 100%;
            width: 16px;
            height: 16px;
            top: 50%;
            left: 50%;
            margin-left: -8px;
            margin-top: -8px;
            animation: spin 2s linear infinite;
            background-image: url('./img/loading.png');
        }
    }

    &:hover {
        background-color: @color-brand-hover;
        border-color: @color-brand-hover;
    }

    &:active {
        background-color: @color-brand-active;
        border-color: @color-brand-active;
    }

    &.disabled,
    &:disabled {
        background-color: @color-border;
        border-color: @color-border;
        cursor: not-allowed;
    }

    &.diminished {
        background-color: #fff;
        border-color: @color-border;
        color: @color-brand;

        > .loading-spinner {
            &:before {
                background-image: url('./img/loading-diminished-@{theme}.png');
            }
        }

        &:hover,
        &:active {
            background-color: #fff;
            border-color: @color-hint;
            color: @color-brand;
        }

        &.disabled,
        &:disabled {
            background-color: #fff;
            border-color: fade(@color-border, 70%);
            color: @color-brand-disabled;
        }
    }

    &.grayscale {
        background-color: #fff;
        border-color: @color-border;
        color: @color-primary;

        > .loading-spinner {
            &:before {
                background-image: url('./img/loading-grayscale.png');
            }
        }

        &:hover,
        &:active {
            background-color: #fff;
            border-color: @color-hint;
            color: @color-primary;
        }

        &.disabled,
        &:disabled {
            background-color: #fff;
            border-color: fade(@color-border, 70%);
            color: @color-disabled;
        }
    }

    &.loading {
        > .content {
            opacity: 0;
            margin-top: -40px;
        }

        > .loading-spinner {
            opacity: 1;
        }
    }
}
