@import url(../../css/main.css);

/* || page related styles */
:root {
    --primary: #4235f5;
    --secondary: #3F3F3F;
    --defalut: #D5D5D5;
    --disabled: #939393;
}

.button-container {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
}

.btn {
    border: 0.01rem solid white;
    flex-basis: 15rem;
    height: 5rem;
    padding: 1.3rem;
    font-size: 1.5rem;
    border-radius: 0.7rem;
    margin: 0.2rem 0.2rem;
    cursor: pointer;
}

/* || Primary buttons styles */
.btn:active {
    filter: brightness(80%);
}

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

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

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

.btn-disabled {
    background-color: var(--disabled);
    color: white;
    cursor: auto;
}

.btn-disabled:active {
    filter: brightness(100%);
}

/* || outline buttons  */
.btn-outline-primary {
    border: 0.2rem solid var(--primary);
    color: var(--primary);
    transition: 700ms;
}

.btn-outline-secondary {
    border: 0.2rem solid var(--secondary);
    color: var(--secondary);
    transition: 700ms;
}

.btn-outline-primary:hover {
    background-color: var(--primary);
    color: white;
    transition: 700ms;
}

.btn-outline-secondary:hover {
    background-color: var(--secondary);
    color: white;
    transition: 700ms;
}

/* || buttons by size */
.btn-lg {
    width: 20rem;
    height: 8rem;
    font-size: 3.2rem;
}

.btn-md {
    width: 12rem;
    height: 6rem;
    font-size: 1.6rem;
}

.btn-sm {
    width: 7rem;
    height: 4rem;
    font-size: 1.3rem;
}

/* || Buttons with icons */
.btn-icon i {
    padding-right: 0.5rem;
}

/* || Floating actions buttons  */
.btn-float {
    border-radius: 100%;
    margin: 1rem;
    flex-basis: fit-content;
    height: fit-content;
}