<div class="card">
    <div class="card-header">
        <h6 class="mb-0">Base Buttons</h6>
    </div>
    <div class="card-body">
        <div class="d-flex flex-wrap gap-4">
            <button class="btn btn-primary">Primary</button>
            <button class="btn btn-secondary">Secondary</button>
            <button class="btn btn-success">Success</button>
            <button class="btn btn-danger">Danger</button>
            <button class="btn btn-warning">Warning</button>
            <button class="btn btn-info">Info</button>
            <button class="btn btn-pink">Pink</button>
            <button class="btn btn-indigo">Indigo</button>
            <button class="btn btn-orange">Orange</button>
            <button class="btn btn-dark">Dark</button>
            <button class="btn btn-light">Light</button>
        </div>
    </div>
</div>

// Mixin for Generating links Classes Based on Theme Colors
@mixin generate-links-classes($colors: $theme-colors, $prefix: '') {
    
    // Generate contextual modifier classes for links states (outline, solid, sub)
    @each $state, $color in $colors {
        // Error handling: Ensure color exists
        @if not map-has-key($colors, $state) {
            @error "Color '#{$state}' is missing in the '$colors' map. Please define it in the theme colors.";
        }
        // Warning for empty color
        @if not $color {
            @warn "Color for '#{$state}' is empty. Using a fallback might cause issues.";
        }
        .link-custom-#{$state} {
            color: var(--#{$prefix}secondary-color) !important;
            &:hover {
                color: var(--#{$prefix}#{$state}) !important;
            }
        }
    }
}

// Example Usage of the Mixin with a theme prefix
@include generate-links-classes($theme-colors, $prefix);

.card {
    margin-bottom: $spacer;
    &.card-h-100 {
        height: calc(100% - $spacer);
    }
}