.jsfx-button {
    --bgcolor: #eee;
    --bdcolor: #ccc;
    --color: black;
    --hover-color: black;
    --hover-bgcolor: #eeea;
    --dropdown-header-color: black;
    --dropdown-item-focus-color: #16181b;
    --dropdown-item-focus-bgcolor: var(--color-light);
    --dropdown-item-active-color: #fff;
    --dropdown-item-active-bgcolor: var(--color-metal);
}

button:focus {
    outline: 0;
}
.btn {
    color: var(--color);
    border: 1px solid var(--bdcolor);
    background-color: var(--bgcolor);
}
.btn:hover {
    color: var(--hover-color);
    background-color: var(--hover-bgcolor);
}
.btn:focus, .btn.focus {
    outline: 0;
    box-shadow: 0 0 0 2px #ecf0f1;
}
.btn:not(.btn-outline):focus, .btn:not(.btn-outline).focus {
    box-shadow: 0 0 0 1px #ccc;
}

.btn .badge {
    position: relative;
    top: -1px;
    right: -5px;
}

.dropup .dropdown-toggle::after,
.dropdown .dropdown-toggle::after,
.dropright .dropdown-toggle::after {
    margin-left: .555em;
}

.dropleft .dropdown-toggle::after {
    margin-right: .555em;
}

.dropdown-divider {
    margin: 0.35rem 0;
}
.dropdown-header {
    font-size: 0.95rem;
    line-height: 0.9;
    color: var(--dropdown-header-color);
}
.dropdown-item {
    font-size: 0.95rem;
    font-weight: 300;
}
.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--dropdown-item-focus-color);
    text-decoration: none;
    background-color: var(--dropdown-item-focus-bgcolor);
}

.dropdown-item.active,
.dropdown-item:active {
    color: var(--dropdown-item-active-color);
    text-decoration: none;
    background-color: var(--dropdown-item-active-bgcolor);
}

.btn:not(.border-round):not(.border-pill) {
    border-radius: var(--border-square);
}

@each $key,$value in $color-map {
    .btn-#{$key},
    .btn-#{$key}.disabled, 
    .btn-#{$key}:disabled {
        color: color-yiq($value);
        background-color: var(--color-#{$key});
        border-color: var(--color-#{$key});
    }

    .btn-#{$key}:focus,
    .btn-#{$key}.btn-outline:focus,
    .show>.btn-#{$key}.dropdown-toggle:focus {
        border-radius: 1px; 
        box-shadow: 0 0 0 0.05rem darken($value, 5%);
    }

    .btn-#{$key}:not(:disabled):hover {
        color: color-yiq($value) !important;
        background-color: darken($value, 7.5%) !important;
        border-color: darken($value, 10%) !important;
        box-shadow: none !important;
    }

    .btn-#{$key}.btn-outline {
        color: var(--color-#{$key});
        background-color: transparent;
        background-image: none;
        border-color: var(--color-#{$key});
    }

    .btn-#{$key}.btn-outline:not(:disabled):hover {
        color: color-yiq($value) !important;
        background-color: darken($value, 7.5%) !important;
        box-shadow: none !important;
    }

    .btn-#{$key}:not(:disabled):not(.disabled):active,
    .btn-#{$key}:not(:disabled):not(.disabled).active,
    .show>.btn-#{$key}.dropdown-toggle,
    .btn-#{$key}.btn-outline:not(:disabled):not(.disabled):active,
    .btn-#{$key}.btn-outline:not(:disabled):not(.disabled).active,
    .show>.btn-#{$key}.btn-outline.dropdown-toggle {
        color: color-yiq($value);
        background-color: var(--color-#{$key});
        border-color: var(--color-#{$key});
    }

    .dropdown-item.#{$key}.active {
        color: unset;
        background-color: var(--color-#{$key});
    }

    .dropdown-item.#{$key}:hover,
    .dropdown-item.#{$key}:focus {
        color: unset !important;
        background-color: rgba($value, 0.5) !important;
    }
}

//sizes
.btn-hg {
    padding: 0.5rem 1rem;
    font-size: var(--font-hg);
}
.btn-lg {
    padding: 0.4rem 0.9rem;
    font-size: var(--font-lg);
}
.btn-md {
    padding: 0.375rem 0.75rem;
    font-size: var(--font-md);
}
.btn-sm {
    padding: 0.25rem 0.6rem;
    font-size: var(--font-sm);
}
.btn-xs {
    padding: 0.15rem 0.5rem;
    font-size: var(--font-xs);
}