.media--pcb { position: relative; float: left; } .media--pcb:before { content: ""; position: absolute; top: -10px; right: -10px; width: 20px; height: 20px; background-color: var(--accent); -webkit-mask-image: url(/assets/icons/ic--cut.svg); mask-image: url(/assets/icons/ic--cut.svg); mask-repeat: no-repeat; transform: rotate(90deg); mask-size: contain; } .sample { border-radius: 20px; display: inline-flex; gap: 0.25rem; padding: 4px; background-color: lightgrey; transition: 0.2s linera; cursor: pointer; align-items: center; } .sample .icon { display: inline-block; width: 12px; height: 12px; } .sample:not([active]) .pause { display: none; } .sample[active] .play { display: none; } .sample label { line-height: 100%; } .sample[active], .sample:hover { background-color: var(--accent); } [data-max-height="130px"] { max-height: 130px; }