/*
 * ------------------
 * styles for buttons
 * ------------------
 */

.button, .btn, button, input[type="submit"] {
    cursor: pointer !important;
    display: inline-block !important;
    vertical-align: center !important;
    position: relative !important;
    height: 40px !important;
    min-width: 40px !important;
    font-family: var( --font-headings ) !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    line-height: 1.2em !important;
    font-weight: 700 !important;
    text-align: center !important;
    color: var( --color-panthagray ) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    border: 1px solid var( --color-pearlgray-dark ) !important;
    border-radius: 3px !important;
    padding: 0.75em !important;
    min-width: calc( 1em + 30px ) !important;
    background-color: var( --color-pearlgray-light ) !important;
    transition: all 0.1s !important;
}

.button:focus, .btn:focus, button:focus, input[type="submit"]:focus {
    outline: 0 !important;
}

.button:hover, .btn:hover, button:hover, input[type="submit"]:hover {
    box-shadow: 0 3px 0 var( --color-pearlgray-dark ) !important;
    transform: translateY( -3px ) !important;
}

.button:active, .btn:active, button:active, input[type="submit"]:active {
    box-shadow: 0 0 0 transparent !important;
    transform: translateY( 0 ) !important;
}

/**
 * ---------------
 * button variants
 * ---------------
 */

.button.btn-primary, .btn.btn-primary, button.btn-primary, input[type="submit"].btn-primary,
.button.btn-light, .btn.btn-light, button.btn-light, input[type="submit"].btn-light {
    color: var( --color-panthagray ) !important;
    background-color: var( --color-pearlgray-light ) !important;
    border-color: var( --color-pearlgray-dark ) !important;
}

.button.btn-primary:hover, .btn.btn-primary:hover, button.btn-primary:hover, input[type="submit"].btn-primary:hover,
.button.btn-light:hover, .btn.btn-light:hover, button.btn-light:hover, input[type="submit"].btn-light:hover {
    box-shadow: 0 3px 0 var( --color-pearlgray-dark ) !important;
}

.button.btn-secondary, .btn.btn-secondary, button.btn-secondary, input[type="submit"].btn-secondary,
.button.btn-orange, .btn.btn-orange, button.btn-orange, input[type="submit"].btn-orange {
    color: var( --color-white ) !important;
    background-color: var( --color-orange ) !important;
    border-color: var( --color-brick ) !important;
}

.button.btn-secondary:hover, .btn.btn-secondary:hover, button.btn-secondary:hover, input[type="submit"].btn-secondary:hover,
.button.btn-orange:hover, .btn.btn-orange:hover, button.btn-orange:hover, input[type="submit"].btn-orange:hover {
    box-shadow: 0 3px 0 var( --color-brick ) !important;
}

.button.btn-tertiary, .btn.btn-tertiary, button.btn-tertiary, input[type="submit"].btn-tertiary,
.button.btn-dark, .btn.btn-dark, button.btn-dark, input[type="submit"].btn-dark {
    color: var( --color-white ) !important;
    background-color: var( --color-panthagray ) !important;
    border-color: var( --color-panthablack ) !important;
}

.button.btn-tertiary:hover, .btn.btn-tertiary:hover, button.btn-tertiary:hover, input[type="submit"].btn-tertiary:hover,
.button.btn-dark:hover, .btn.btn-dark:hover, button.btn-dark:hover, input[type="submit"].btn-dark:hover {
    box-shadow: 0 3px 0 var( --color-panthablack ) !important;
}

/**
 * ------------
 * button sizes
 * ------------
 */

.button.btn-sm, .btn.btn-sm , button.btn-sm, input[type="submit"].btn-sm{
    font-size: 12px !important;
    height: 35px !important;
    min-width: 35px !important;
}

.button.btn-md, .btn.btn-md, button.btn-md, input[type="submit"].btn-md {
    font-size: 14px !important;
    height: 40px !important;
    min-width: 40px !important;
}

.button.btn-lg, .btn.btn-lg, button.btn-lg, input[type="submit"].btn-lg {
    font-size: 16px !important;
    height: 45px !important;
    min-width: 45px !important;
}

/**
 * ------------
 * button icons
 * ------------
 */

.button > i.fa, .btn > i.fa, button > i.fa, input[type="submit"] > i.fa,
.button > i.fas, .btn > i.fas, button > i.fas, input[type="submit"] > i.fas {
    display: inline-block !important;
    text-align: center !important;
    width: 1em !important;
    height: 1em !important;
}

.button > i.fa::before, .btn > i.fa::before, button > i.fa::before, input[type="submit"] > i.fa::before,
.button > i.fas::before, .btn > i.fas::before, button > i.fas::before, input[type="submit"] > i.fas::before,
.button > i.fa::after, .btn > i.fa::after, button > i.fa::after, input[type="submit"] > i.fa::after,
.button > i.fas::after, .btn > i.fas::after, button > i.fas::after, input[type="submit"] > i.fas::after  {
    display: inline-block !important;
    font-size: 1em !important;
    line-height: 1em !important;
    width: 1em !important;
    height: 1em !important;
    vertical-align: center !important;
}

/**
 * --------------
 * button nesting
 * --------------
 */

.button button, .btn button,
.button input[type="submit"], .btn input[type="submit"] {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    vertical-align: unset !important;
    transform: none !important;
}

/**
 * ---------------
 * button disabled
 * ---------------
 */

.button[disabled], .btn[disabled], .dee-btn[disabled], button.[disabled], input[type="submit"].[disabled],
.button.disabled, .btn.disabled, .dee-btn.disabled, button.disabled, input[type="submit"].disabled {
    pointer-events: none;
    opacity: 1;
    background-color: var( --color-light ) !important;
    border-color: var( --color-gray ) !important;
    color: var( --color-gray-dark ) !important;
}