@use '../../../../../../../../apps/web/src/nav-list.scss';

:host {
    display: block;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.category-item {
    cursor: pointer;
    width: auto;
}

// Selected row: tint the badge surface with the selection accent. Text colour
// is already swapped to --app-selection-color by the parent `.nav-item.selected
// *` rule in nav-list.scss, so we only need to override the background here.
.category-item--selected .item-count.app-count-badge {
    background: color-mix(
        in srgb,
        var(--app-selection-color) 18%,
        transparent
    );
}

mat-card-content {
    overflow-wrap: break-word;
    padding: 12px;
}

.category-empty-state {
    height: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(14px, 3vh, 28px) 12px clamp(20px, 4vh, 34px);
    box-sizing: border-box;

    app-playlist-error-view {
        --error-empty-illustration-size: clamp(132px, 15vw, 180px);
        --error-empty-max-width: min(270px, 100%);
        --error-empty-title-size: clamp(1.15rem, 1.35vw, 1.4rem);
        --error-empty-title-weight: 610;
        --error-empty-title-spacing: -0.006em;
        --error-empty-copy-gap: 4px;
        --error-empty-description-opacity: 0.82;
    }
}

@media (max-width: 800px) {
    .category-item {
        width: 100%;
        margin: 4px;
    }

    .category-empty-state {
        app-playlist-error-view {
            --error-empty-illustration-size: 142px;
            --error-empty-max-width: 230px;
            --error-empty-title-size: 1.05rem;
            --error-empty-title-weight: 600;
        }
    }
}
