.circle-wrapper {
    display: contents;
}

.circle-wrapper > * {
    position: absolute;
    user-select: none;
}

.circle-wrapper:not(:hover) > .circle,
.circle-wrapper:not(:hover) > .music-item {
    display: none;
}

.circle-wrapper:hover > .music-item {
    user-select: revert;
}

.circle {
    position: absolute;
    display: inline-block;
    left: calc(50% - var(--radius) * 50%);
    top:  calc(50% - var(--radius) * 50%);
    width:  calc(var(--radius) * 100%);
    height: calc(var(--radius) * 100%);
    border: 1px solid black;
    border-radius: 100%;
    z-index: 2;
}

.music-chart {
    position: relative;
    padding-top: 100%;
    /* outline: 2px dashed black; */
}

.music-item {
    padding: 4px;
    width: max-content;
    background: #fdf6e3;
    border: 2px solid #93a1a1;
    z-index: 4;
    display: flex;
}

.left-side {
    height: 2.5em;
    width: 2.5em;
    background: #b58900;
    margin-right: 8px;
}

.left-side p {
    margin: 0;
}

.left-side img {
    height: 2.5em;
    width: 2.5em;
    box-shadow: 0px 0px 5px 0px grey;
}

.artist {
    font-family: "IBM Plex Mono";
    font-weight: 700;
}

.album {
    color: #586e75;
}

.artist > p, .album > p {
    margin: 0;
    text-align: left;
    hyphens: auto;
}

.dot {
    position: absolute;
    z-index: 3;
    height: 8px;
    width: 8px;
}
.dot:before {
    content: "";
    display: inline-block;
    width: 8px; height: 8px;
    background: black;
    border-radius: 100%;
    z-index: 3;
    position: relative;
    top: -4px;
    left: -4px;
}

.center-dot {
    left: 50%; top: 50%;
    position: absolute;
}

.center-dot:before {
    content: "";
    display: inline-block;
    width: 8px; height: 8px;
    background: black;
    border-radius: 100%;
}

.outside-circle {
    z-index: 0;
    background:  #eee8d5;
}

.divider {
    z-index: 1;
    position: absolute;
    display: inline-block;
    border: 1px solid #93a1a177;
    top: 50%;
    width: 100%;
    transform: rotate(calc(var(--rotation) * 1deg));
}