.button {
    display: inline-block;
    font-weight: 400;
    color: $textColor;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: calc(0.675rem + 1px) 0.75rem;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.5;
    @include transition(color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out);
}

@media (prefers-reduced-motion: reduce) {
    .button {
        transition: none;
    }
}

.button:hover {
    color: #212529;
    text-decoration: none;
}

.button.disabled, .button:disabled {
    @include opacity(0.65);
}

a.button.disabled,
fieldset:disabled a.button {
    pointer-events: none;
}

.with-icon {
    i {
        margin-left: 5px;
    }
}

.button-lg {
    padding: calc(0.575rem + 2px) 1.6rem;
}

.button-border {
    border: 2px solid transparent !important;
}

.button-border-white {
    border-color: white !important;
}

// block
.button-block {
    display: block;
    width: 100%;
}

.button-block + .button-block {
    margin-top: 0.8rem;
}

input[type="submit"].button-block,
input[type="reset"].button-block,
input[type="button"].button-block {
    width: 100%;
}

// button-darkBlue
.button-dark-blue {
    color: white;
    background-color: $darkBlue;
    border-color: $darkBlue;
}

.button-dark-blue:hover {
    color: white;
    background-color: darken($darkBlue, 8%);
    border-color: darken($darkBlue, 10%);
}

.button-dark-blue:focus, .button-dark-blue.focus {
    outline: 0;
}

.button-dark-blue.disabled, .button-dark-blue:disabled {
    color: white;
    background-color: $darkBlue;
    border-color: $darkBlue;
}

.button-dark-blue:not(:disabled):not(.disabled):active, .button-dark-blue:not(:disabled):not(.disabled).active,
.show > .button-dark-blue.dropdown-toggle {
    color: white;
    background-color: darken($darkBlue, 10%);
    border-color: darken($darkBlue, 12%);
}

// button-default
.button-default {
    color: #979797;
    background-color: $lightgray;
    border-color: $lightgray;
}

.button-default:hover {
    color: darken($textColor, 10%);
    background-color: darken($lightgray, 8%);
    border-color: darken($lightgray, 10%);
}

.button-default:focus, .button-default.focus {
    outline: 0;
}

.button-default.disabled, .button-default:disabled {
    color: $textColor;
    background-color: $lightgray;
    border-color: $lightgray;
}

.button-default:not(:disabled):not(.disabled):active, .button-default:not(:disabled):not(.disabled).active,
.show > .button-default.dropdown-toggle {
    color: $textColor;
    background-color: darken($lightgray, 10%);
    border-color: darken($lightgray, 12%);
}

// button-link
.button-link {
    color: $darkBlue;
    background-color: transparent;
    border-color: transparent;
}

.button-link:hover {
    color: darken($darkBlue, 7%);
    text-decoration: underline;
}

.button-link:focus, .button-link.focus {
    outline: 0;
}

.button-link.disabled, .button-link:disabled {
    color: lighten($darkBlue, 60%);
    background-color: #ccc;
}

.button-link:not(:disabled):not(.disabled):active, .button-link:not(:disabled):not(.disabled).active,
.show > .button-link.dropdown-toggle {
    color: darken($darkBlue, 7%);
    text-decoration: underline;
}

// button-link-reverse
.button-link-reverse {
    color: white;
    background-color: transparent;
    border-color: transparent;
}

.button-link-reverse:hover {
    color: $darkBlue;
    background-color: white;
}

.button-link-reverse:focus, .button-link-reverse.focus {
    outline: 0;
}

.button-link-reverse.disabled, .button-link-reverse:disabled,
.button-link-reverse:not(:disabled):not(.disabled):active,
.button-link-reverse:not(:disabled):not(.disabled).active {
    color: $darkBlue;
    @include opacity(.5);
    cursor: not-allowed;
    background-color: white;
}

.show > .button-link-reverse.dropdown-toggle {
    color: $darkBlue;
    background-color: white;
}

// button-orange
.button-brand {
    color: $textColor;
    background-color: $primaryColor;
    border-color: $primaryColor;

    &:hover {
        color: $textColor;
        background-color: darken($primaryColor, 8%);
        border-color: darken($primaryColor, 10%);
    }
    &:focus,
    .focus {
        outline: 0;
    }
    &:disabled ,
    &.disabled{
        color: $textColor;
        background-color: $primaryColor;
        border-color: $primaryColor;
    }
}
.button-brand:not(:disabled):not(.disabled):active, .button-brand:not(:disabled):not(.disabled).active,
.show > .button-brand.dropdown-toggle {
    color: white;
    background-color: darken($primaryColor, 10%);
    border-color: darken($primaryColor, 12%);
}

.button-accent {
    color: #fff;
    background-color: $accentColor;
    border-color: $accentColor;

    &:hover {
        color: white;
        background-color: darken($accentColor, 8%);
        border-color: darken($accentColor, 10%);
    }
    &:focus,
    .focus {
        outline: 0;
    }
    &:disabled ,
    &.disabled{
        color: white;
        background-color: $accentColor;
        border-color: $accentColor;
    }
}