body.lyrics {
    background-color: var(--light);
}

.lyrics-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.lyric-box {
    border: 1px solid var(--dark);
    border-radius: 14px;
    overflow: hidden;
}

.lyric-summary {
    cursor: pointer;
    list-style: none;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 18px 22px;
}

.lyric-summary::-webkit-details-marker {
    display: none;
}

.lyric-title {
    font-size: var(--body-size);
    font-weight: 400;
    color: var(--dark);
}

.lyric-content {
    padding: 0 22px 22px;
}

.lyric-content p {
    margin: 0;
    font-size: var(--lyrics-size);
    font-weight: var(--lyrics-weight);
    color: var(--dark);
    white-space: pre-line;
}


/* simple chevron */
.lyric-icon {
    width: 14px;
    height: 14px;

    border-right: 2px solid var(--dark);
    border-bottom: 2px solid var(--dark);

    transform: rotate(45deg) translateY(-1px);
    transform-origin: center;

    transition: transform 1s ease;
}

.lyric-box[open] .lyric-icon {
    transform: rotate(-135deg) translateY(1px);
}