@layer components{.audio-player{--_card-bg: var(--clr-base-100);--_img-bg: var(--clr-brand-100);--_text: var(--clr-brand-900);--_accent: var(--clr-accent-500);display:flex;gap:0;align-items:stretch;background:var(--_card-bg);border-radius:.75rem;overflow:hidden;width:100%;max-width:25rem;min-height:7.5rem;box-shadow:4px 4px 40px 10px #0000001a}.audio-player.audio-player--image-right .audio-player__image{order:2}.audio-player.audio-player--image-right .audio-player__body{order:1}.audio-player__image{height:fit-content;background:var(--_img-bg);line-height:0}.audio-player__image img{width:100%;max-width:7.5rem;object-fit:cover}.audio-player__body{padding:.75rem;flex-grow:1;display:flex;flex-direction:column;justify-content:space-between}.audio-player__interpreter{font-family:var(--ff-base),serif;font-size:var(--fs-100);line-height:var(--lh-300);color:var(--clr-brand-500);margin-bottom:.25rem;letter-spacing:var(--ls-100)}.audio-player__title{margin:0;font-family:var(--ff-base),serif;font-weight:var(--fw-600);font-size:var(--fs-400);line-height:var(--lh-100);color:var(--clr-brand-800);letter-spacing:var(--ls-400)}.audio-player__controls{display:grid;grid-template-columns:auto auto 1fr auto auto;align-items:center;gap:.5rem;margin-top:.5rem}.audio-player__controls:not(:has(.audio-player__control--volume)){grid-template-columns:auto auto 1fr auto}.audio-player__control{border-radius:50%;display:grid;place-items:center;width:1.5rem;height:1.5rem}.audio-player__control svg{width:1.5rem;height:1.5rem;color:var(--_accent);transition:color .2s ease}.audio-player__control:hover svg{color:var(--clr-accent-800)}.audio-player__time{color:var(--_accent);font-weight:var(--fw-400);font-size:var(--fs-100);line-height:var(--lh-300);letter-spacing:var(--ls-100)}.audio-player__visualizer{width:1.75rem;height:1.5rem}.audio-player__visualizer-container{position:relative;width:1.75rem;height:1.5rem}.audio-player__native{display:none}.audio-player [data-audio-player-volume=mute] [data-audio-player-volume-state=mute]{display:block}.audio-player [data-audio-player-volume=mute] [data-audio-player-volume-state=unmute]{display:none}.audio-player [data-audio-player-volume=unmute] [data-audio-player-volume-state=unmute]{display:block}.audio-player [data-audio-player-volume=unmute] [data-audio-player-volume-state=mute]{display:none}.audio-player [data-audio-player-play=stopped] [data-audio-player-play-state=stopped]{display:block}.audio-player [data-audio-player-play=stopped] [data-audio-player-play-state=playing]{display:none}.audio-player [data-audio-player-play=playing] [data-audio-player-play-state=playing]{display:block}.audio-player [data-audio-player-play=playing] [data-audio-player-play-state=stopped]{display:none}}