// Button Action Effects
.btn {
    padding: 0.65rem 0.85rem;
    border-radius: var(--border-radius) !important;
    transition: all 0.1s linear;
    &:disabled {
        cursor: not-allowed;
        opacity: 0.6;
    }
    &:hover {
        opacity: 0.9;
    }
    &:active {
        opacity: 0.9;
        transform: scale(0.98);
    }
    &:focus {
        box-shadow: none !important;
    }
    font-size: 17px;
}
.btn-sm {
    padding: 0.25rem 0.5rem !important;
    font-size: .875rem !important;
    line-height: 1.5 !important;
    border-radius: var(--border-radius) !important;
}

.btn-light {
    background-color: #f4f4f4;
}
/*
|
| Soft Buttons
|
*/

$buttons-soft: (
    "btn-soft-success" $success $soft-success,
    "btn-soft-info" $info $soft-info,
    "btn-soft-primary" $primary $soft-primary,
    "btn-soft-warning" $warning $soft-warning,
    "btn-soft-danger" $danger $soft-danger,
    "btn-soft-light" $light $soft-light,
    "btn-soft-main" var(--main-color) var(--soft-main-color)
);
@each $class-name, $color, $bg in $buttons-soft {
    .#{$class-name} {
        background-color: $bg;
        color: $color !important;
        border-radius: var(--border-radius);
    }
}

.btn-main {
    background-color: var(--btn-main-background);
    color: var(--btn-main-color) !important;
}
.btn-second {
    background-color: var(--btn-second-background);
    color: var(--btn-second-color) !important;
}

