/**
 * hana+nils · Büro für Gestaltung
 * https://hananils.de · buero@hananils.de
 */

.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    margin: 0 -0.8rem 1.5rem;
    padding-top: 1.1rem;
    font-weight: var(--text-weight-blond);
    flex-gap: 0.8rem;
    gap: 0.8rem;
}

.title .filters {
    padding-top: 1.6rem;
}

.filters [data-tag] {
    padding: 0 1rem;
    color: var(--tags-color, var(--color-text));
    font-size: var(--text-size-small);
    line-height: var(--text-line-small);
    text-decoration: none;
    background-color: var(--tags-background, var(--color-surface));
    cursor: pointer;
}

.filters .is-active,
.filters [data-tag]:hover {
    --tags-color: var(--tags-color-hover, var(--color-white));
    --tags-background: var(--tags-background-hover, var(--color-blue));
}

.filters .not-filterable {
    --tags-color: rgba(0, 0, 0, 0.5);
    --tags-background: rgba(0, 0, 0, 0.05);
}

@media (prefers-color-scheme: dark) {
    .filters .not-filterable {
        --tags-color: rgba(255, 255, 255, 0.4);
        --tags-background: var(--tags-background, var(--color-surface));
    }
}

.filters-back {
    align-self: baseline;
    margin-left: 1rem;
    font-size: var(--text-size-small);
    line-height: 1;
    text-decoration: none !important;
}

.filters-back:hover {
    color: var(--color-jeweled-peach);
}