.twelvekm-releases-block {
    margin-block-end: var(--12k--style--block-gap);
}

/* List  ----------------------------------------------------- */

.list {
    display: flex;
    flex-direction: column;
    line-height: 1.5em;
}
.list-item a,
.list-header {
    display: flex;
    flex-direction: row;
    font-size: 1rem;
    gap: var(--wp--style--block-gap);
    padding-block-start: 0.25em;
    padding-block-end: 2px;
}
.list-header {
    background-color: var(--wp--preset--color--tertiary);
    border-radius: 0.25rem;
    font-weight: 500;
    text-transform: uppercase;
}
.list-item a {
    background-color: transparent;
    border-block-end: 1px solid var(--wp--preset--color--tertiary);
    color: var(--wp--preset--color--primary);
    text-decoration: none !important;
    transition: background-color 300ms ease;
}
.list-item a:hover {
    color: var(--wp--preset--color--secondary);
}
.list-item--title {
    font-weight: 500;
}
.list-item--title,
.list-item--artist,
.list-item--genre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background-color 300ms ease;
}
.list-item--artist,
.list-item--genre,
.list-item--id {
    display: none;
}
.list-item--title {
    padding-inline-start: 5px;
    width: calc(100% - 80px);
}
.list-item--date {
    padding-inline-end: 5px;
    text-align: right;
    width: 80px;
    transition: background-color 300ms ease;
}
@media ( min-width: 64em ) {
    .list-item--artist,
    .list-item--genre {
        display: block;
    }
    .list-item--title,
    .list-item--artist {
        width: 25%;
    }
    .list-item--genre {
        width: calc(50% - 80px);
    }
    .list-item--date {
        width: 80px;
    }
}
.list-empty {
    border-block-end: 1px solid var(--wp--preset--color--tertiary);
    color: var(--wp--preset--color--primary);
    font-size: 1rem;
    padding-block: 0.25em;
}

/* Filter  --------------------------------------------------- */

.controls {
    padding-block-end: clamp(0.5rem, 0.3333rem + 0.8333vw, 1rem);
}
.controls summary {
    color: var(--wp--preset--color--primary);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.75em;
    list-style: none;
    text-transform: uppercase;
    transition: color 300ms ease;
}
.controls summary:hover {
    color: var(--wp--preset--color--secondary);
}
.controls summary::marker,
.controls summary::-webkit-details-marker {
    display: none !important;
}
.controls summary::after {
    content: "+";
    color: var(--wp--preset--color--primary);
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 0.5em;
    margin-block-start: 2px;
    text-align: right;
    transition: color 300ms ease;
    vertical-align: text-top;
    width: 1rem;
}
.controls[open] summary::after {
    content: "−";
}
.controls summary:hover::after {
    color: var(--wp--preset--color--secondary);
}
.filter {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: clamp(0.5rem, 0.3333rem + 0.8333vw, 1rem);
    justify-content: flex-start;
    padding-block-start: calc(clamp(0.5rem, 0.3333rem + 0.8333vw, 1rem) - 0.25em);
    width: 100%;
}
.filter button {
    background-color: transparent;
    border: 1px solid var(--wp--preset--color--tertiary);
    border-radius: 0.5rem;
    font-size: clamp(0.875rem, 0.8333rem + 0.2083vw, 1rem);
    font-weight: 500;
    line-height: clamp(1.5rem, 1.3333rem + 0.8333vw, 2rem);
    padding-inline: clamp(0.5rem, 0.3333rem + 0.8333vw, 1rem);
    text-transform: uppercase;
    transition: background-color 300ms ease, border 300ms ease;
}
.filter button.active {
    background-color: var(--wp--preset--color--tertiary);
}
.filter button:hover {
    border: 1px solid var(--wp--preset--color--primary);
}