.btn {
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: none;

    &.btn-primary,
    &.btn-primary:not(:disabled):not(.disabled):active,
    &.btn-primary:not(:disabled):not(.disabled).active {
        background-color: var(--primary);
        border-color: var(--primary);
    }

    &.btn-primary:not(:disabled):not(.disabled):active:focus,
    &.btn-primary:focus,
    &.btn-primary.focus {
        box-shadow: none;
    }

    &.btn-primary:hover {
        filter: brightness(0.9);
    }

    &.disabled,
    &:disabled {
        cursor: not-allowed;
    }

    &-link {
        font-weight: 500;
        padding-left: 0;
        padding-right: 0;

        &:hover {
            text-decoration: none;
        }
    }

    &-secondary,
    &-default {
        background: linear-gradient(-180deg, white, $gray-200 100%);

        &:active,
        &.btn-active,
        &.active {
            &:not(:disabled):not(.disabled) {
                background: $gray-300;
                box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.3);
                border-color: $gray-500;
            }
        }

        &:not(:disabled):not(.disabled):active:focus,
        &:not(:disabled):not(.disabled).active:focus {
            background: $gray-300;
            box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.3);
            border-color: $gray-500;
        }
    }

    .Glyph {
        fill: currentColor;
        vertical-align: text-bottom;
    }

    &.icon-left {
        .Glyph {
            margin-right: 5px;
        }
    }

    &.icon-right {
        .Glyph {
            margin-left: 5px;
        }
    }

    &.icon-only {
        padding-left: $input-btn-padding-y;
        padding-right: $input-btn-padding-y;

        .Glyph {
            //This is to fix the line-height issue
            margin-left: 2px;
            margin-right: 2px;
        }
    }

    &.icon-only.btn-lg {
        padding-left: $input-btn-padding-y-lg;
        padding-right: $input-btn-padding-y-lg;
    }
}