@import url(/components.css);

#btn{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: auto;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 1rem;
    
}

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

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

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

.button{
    height: 5vh;
    width:20vw;
    max-width: 150px;
    font-weight: bolder;
    color: var(--off-white-);

}


.buttonvarientcontainer{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    padding: 1rem;
    /* border: 0.5px solid black; */
    width: 80%;
    /* background-color: var(--secondary-color); */

}

.button-default{
    background-color: var(--default-color);
}

.button-default:hover{
    background-color: var(--off-white-); 
    color: var(--default-color);

}

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

.button-primary:hover{
    color:var(--primary-color);
    background-color: var(--off-white-);
}

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

.button-secondary:hover{
    color: var(--off-white-);
     background-color: var(--primary-color);
}


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

.button-error:hover{
    color:var(--error-color);
    background-color: var(--off-white-);
}

.button-warning{
    background-color: var(--warning-color);
}

.button-warning:hover{
    color: var(--warning-color);
    background-color: var(--off-white-);
}

.button-success{
    background-color: var(--success-color);
}

.button-success:hover{
    color: var(--success-color);
    background-color: var(--off-white-);
}

.outline-default{
    color: var(--default-color);
    border-color: var(--default-color);
}

.outline-default:hover{
    background-color: var(--default-color);
    color: var(--off-white-);

}

.outline-primary{
    color:var(--primary-color);
    border-color: var(--primary-color);

}

.outline-primary:hover{
    background-color:var(--primary-color);
    color:var(--off-white-);

}


.outline-error{
    color: var(--error-color);
    border-color: var(--error-color);
}

.outline-error:hover{
    background-color: var(--error-color);
    color:var(--off-white-);
}

.outline-warning{
    color:var(--warning-color);
    border-color: var(--warning-color);
}

.outline-warning:hover{
    background-color:var(--warning-color);
    color: var(--off-white-);
}

.outline-success{
    color:var(--success-color);
    border-color: var(--success-color);
}

.outline-success:hover{
    background-color:var(--success-color);
    color: var(--off-white-);
}

.button-link{
    background-color: var(--default-color);
}

.button-link:hover{
    color: var(--default-color);
    background-color: var(--off-white-);
}

.button-icon{
    background-color: var(--default-color);
}

.button-icon:hover{
    color: var(--default-color);
    background-color: var(--off-white-);  
}

.button-floating{
    border-radius: 50%;
    height: 40px;
    width: 40px;
    font-size: 1.5rem;
    border: 2px solid var(--default-color);
    background-color: var(--default-color);

}
.buttonvarientheader{
    padding: 3rem;
    }