_buttons.scss

// sass/components/_buttons.scss
@import '../utils/_mixins.scss';
@import '../base/_variables.scss';


.btn {
    border-color: var(--btn-bg);
    color: var(--text-light);

    @include border-radius(var(--border-radius));

    &-danger {
        background-color: var(--btn-bg);
        border-color: var(--btn-bg);
        color: var(--text-light);
    }

    &-primary {
        background-color: rgba(57, 88, 134, 0);
        border-color: rgba(57, 88, 134, 0);
    }

    &-custom {
        background-color: transparent;
        border-color: var(--btn-hover-border-color);
        white-space: nowrap;
        
        &:hover {
            background-color: var(--btn-hover-bg);
            border-color: var(--btn-hover-border-color);
        }
    }

    &-outline-primary {
        border-color: var(--btn-hover-border-color);
        color: var(--text-light);
        
        &:hover {
            color: var(--btn-hover-color);
            background-color: var(--btn-hover-bg);
            border-color: var(--btn-hover-border-color);
        }
    }

    &-check:checked + &,
    &.active,
    &.show,
    &:first-child:active {
        background-color: var(--btn-active-bg);
        border-color: var(--btn-active-border-color);
        color: var(--text-light);
    }

    &:not(.active) {
        border-color: var(--btn-bg);
    }

    &:active {
        background-color: transparent !important;
        border-color: inherit !important;
        color: inherit !important;
    }

    &:hover {
        color: var(--text-light);
    }
}