@mixin empty-state-color-variants {
    &.is-primary { color: #00d1b2; }
    &.is-link    { color: #485fc7; }
    &.is-info    { color: #3e8ed0; }
    &.is-success { color: #48c774; }
    &.is-warning { color: #ffe08a; }
    &.is-danger  { color: #f14668; }
}

.bbr-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 1.5rem;
    text-align: center;

    &__icon {
        font-size: 3rem;
        line-height: 1;
        opacity: 0.45;

        &:not([class*="is-"]) {
            color: #aaa;
        }

        @include empty-state-color-variants;
    }

    &__title {
        font-size: 1.15rem;
        font-weight: 600;
        margin: 0;

        &:not([class*="is-"]) {
            color: #4a4a4a;
        }

        @include empty-state-color-variants;
    }

    &__description {
        margin: 0;
        color: #7a7a7a;
        max-width: 36ch;
    }

    &__action {
        margin-top: 0.25rem;
    }

    // Compact horizontal layout
    &--compact {
        flex-direction: row;
        padding: 1rem;
        gap: 0.75rem;
        text-align: left;
        align-items: center;

        .bbr-empty-state__icon {
            font-size: 1.5rem;
            flex-shrink: 0;
        }

        .bbr-empty-state__title {
            font-size: 1rem;
        }
    }
}