@import url(../../style.css);
@import url(../../css/aside.css);

.btn{
    padding:.5rem 1rem;
    background-color: var(--warning-color);
    font-size: 1.5rem;
    color: var(--bg-color);
    outline: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin: 0;
    
}

.btn:active{
    box-shadow:  var(--default-inset-shadow)
}

.btn-primary {
    background-color: var(--primary-color);
}

.btn-primary:active{
    box-shadow:  var(--primary-inset-shadow);
}

.btn-secondary{
    background-color: var(--secondary-color);
}

.btn-secondary:active{
    box-shadow:  var(--secondary-inset-shadow);
}

.btn-disabled{
    background-color: var(--warning-color);
    opacity: .7;
}

.btn-disabled:active{
    box-shadow:  var(--default-inset-shadow);
}

.btn-delete{
    background-color: var(--error-color);
}

.btn-delete:active{
    box-shadow:  var(--error-inset-shadow);
}

/* For Simple Button  */

.simple{
    background-color: var(--bg-color);
    color: var(--warning-color);
    border: 1px solid transparent;
}

.simple:hover{
    transition: all .4s;
    border: 1px solid var(--warning-color);
}

.simple:active{
    box-shadow: var(--normal-inset-shadow);
}

.simple-primary{
    
    color: var(--primary-color);
    
}

.simple-primary:hover{
    border:1px solid var(--primary-color);
}



.simple-secondary{
    color: var(--secondary-color);
}

.simple-secondary:hover{
    border: 1px solid var(--secondary-color);
}

.simple-delete{
    color: var(--error-color);
}

.simple-delete:hover{
    border: 1px solid var(--error-color);
}

.simple-disabled{
    color: var(--warning-color);
    opacity: .7;
}

.btn-link{
    background-color: var(--active-color);
    padding: 0;
}

.btn a{
    width: 100%;
    height: 100%;
    padding:.5rem 1rem;
    display: inline-block;
    color: var(--bg-color);
}

.btn-link:active{
    box-shadow:  var(--secondary-inset-shadow);
}

.simple-link{
    padding: 0;
}

.simple-link a{
    color: var(--active-color);
}

.simple-link:hover{
    border: 1px solid var(--active-color);
}

.btn-icon{
    background-color: var(--active-color);
    display: flex;
    align-items: baseline;
    border: 1px solid transparent;
}

.btn-icon:hover{
    border: 1px solid var(--active-color);
    display: flex;
    align-items: baseline;
}

.btn-icon:active{
    box-shadow:  inset 5px 5px 10px #003162,
    inset -5px -5px 10px #005bb6;
}

.btn-icon i{
    height:max-content ;
    font-size: 1rem;
    padding-right: .3rem;
}


.simple-icon{
    color: var(--active-color);
    background-color: var(--bg-color);
}

.simple-icon:active{
    box-shadow: var(--normal-inset-shadow);
}

/* Floating Buttons  */

.btn-floating{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border-radius: 50%;
}