.button {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    border: 1px solid var(--flex-bg-muted);
    background: var(--flex-bg-muted);
    border-radius: var(--flex-button-radius);
    font-size: var(--flex-text-base);
    padding: var(--flex-button-padding);
    color: var(--flex-text-white);
    font-family: var(--flex-font-family);
    font-weight: bold;
    outline: none;
    white-space: nowrap;
    box-shadow: none;
    outline: none;
    cursor: pointer;
    /*margin-bottom: .25em;
    margin-top: .25em;*/
}

.button > * {
    line-height: 100%;
    padding-top: .25em;
    padding-bottom: .25em;
}

.button:disabled { 
    opacity: .65; 
}

.button.f-button-loading {
    pointer-events: none;
}

.button:hover:disabled { 
    opacity: unset; 
}

.button:hover { 
    filter: brightness(95%); 
}

.button > .icon {  
    font-size: 100%; 
    font-weight: bold;
}

.button .icon-right {
    margin-left: .25em;    
}

.button .icon-left {
    margin-right: .25em;    
}

.button > .label { 
    font-size: 100%; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: unset;
    padding: unset;
    margin: unset;
    padding-top: .25em;
    padding-bottom: .25em;
    line-height: 100%;
}

.button > .icon > .f-loading { 
    border-top-color: var(--flex-text-white); 
    font-size: 50%; 
}

.default,
.outline.default:hover { 
    background: var(--flex-bg-muted); 
    border-color: var(--flex-bg-muted); 
    color: var(--flex-text-white);
}

.primary,
.outline.primary:hover { 
    background: var(--flex-bg-primary); 
    border-color: var(--flex-bg-primary); 
    color: var(--flex-text-white);
}

.danger,
.outline.danger:hover  { 
    background: var(--flex-bg-danger); 
    border-color: var(--flex-bg-danger); 
    color: var(--flex-text-white);
}

.dark,
.outline.dark:hover  { 
    background: var(--flex-bg-dark); 
    border-color: var(--flex-bg-dark); 
    color: var(--flex-text-white);
}

.warning,
.outline.warning:hover  { 
    background: var(--flex-bg-warning); 
    border-color: var(--flex-bg-warning); 
    color: var(--flex-text-white);
}

.success,
.outline.success:hover  { 
    background: var(--flex-bg-success); 
    border-color: var(--flex-bg-success); 
    color: var(--flex-text-white);
}

.light {
    background: var(--flex-bg-light); 
    border-color: var(--flex-bg-light); 
    color: var(--flex-bg-muted);
}

.light:hover,
.outline.light:hover { 
    background: var(--flex-bg-light-dark); 
    border-color: var(--flex-bg-light-dark); 
    filter: unset;
}


.button.outline {
    background: transparent;
    color: var(--flex-bg-muted);
}

.button.text {
    background: transparent;
    color: var(--flex-bg-muted);
    border-color: transparent;
}

.button.text:hover {
    background: var(--flex-bg-light);
    filter: unset;
}

.button.outline:hover { 
    filter: unset; 
}

.text.default, .outline.default { color: var(--flex-bg-muted); }
.text.primary, .outline.primary { color: var(--flex-bg-primary); }
.text.danger, .outline.danger { color: var(--flex-bg-danger); }
.text.dark, .outline.dark { color: var(--flex-bg-dark); }
.text.warning, .outline.warning { color: var(--flex-bg-warning); }
.text.success, .outline.success { color: var(--flex-bg-success); }
.outline.light { border-color: var(--flex-bg-light-dark); }


.text.default > .f-loading, .outline.default > .f-loading { border-color: var(--flex-bg-muted); }
.text.primary > .f-loading, .outline.primary > .f-loading { border-color: var(--flex-bg-primary); }
.text.danger > .f-loading, .outline.danger > .f-loading { border-color: var(--flex-bg-danger); }
.text.dark > .f-loading, .outline.dark > .f-loading { border-color: var(--flex-bg-dark); }
.text.warning > .f-loading, .outline.warning > .f-loading { border-color: var(--flex-bg-warning); }
.text.success > .f-loading, .outline.success > .f-loading { border-color: var(--flex-bg-success); }
.text.light > .f-loading, .outline.light > .f-loading { border-color: var(--flex-bg-light-dark); }

.xxs { font-size: var(--flex-text-xxs); }
.xs { font-size: var(--flex-text-xs); }
.sm { font-size: var(--flex-text-sm); }
.md { font-size: var(--flex-text-base); }
.lg { font-size: var(--flex-text-lg); }
.xl { font-size: var(--flex-text-xl); }
.xlx2 { font-size: var(--flex-text-2xl); }
.xlx3 { font-size: var(--flex-text-3xl); }
.xlx4 { font-size: var(--flex-text-4xl); }
.xlx5 { font-size: var(--flex-text-5xl); }
.xlx6 { font-size: var(--flex-text-6xl); }

.stretch {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}