_mixins.scss

@mixin raw-card {
    border-radius: $border-radius-sm;
    padding: 1rem;

    --bs-card-spacer-x: 0rem !important;
    --bs-card-spacer-y: 0rem !important;

    color: $color-fg !important;
    background-color: $color-secondary !important;
    border: solid $color-secondary 1px !important;

    transition: background-color 0.3s ease, border-color 0.3s ease !important;
}

@mixin card($hover-border) {
    @include raw-card;
    
    .card-title {
        color: $color-fg !important;
        font-weight: 700;
    }

    &:hover {
        background-color: $color-highlight !important;
        border-color: $hover-border !important;
    }
}

@mixin raw-button {
    padding: 0.5rem 1rem;
    border-radius: 25px;
    border: solid $text-muted 1px;
    color: $color-fg;
    background-color: $body-bg;

    &:hover {
        background-color: $color-mute-bg !important;
        border-color: $color-mute-bg !important;
        text-decoration: none;
    }
}

@mixin button($hover-border) {
    @include raw-button;

    &--fill {
        @extend .button;
        background-color: $color-secondary;
        border: solid $color-secondary 1px;

        &:hover {
            background-color: $color-highlight !important;
            border-color: $hover-border !important;
        }
    }
}