div.player
{
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;

  div.select
  {
    margin: 0 auto;
  }
}

div.player
{
  div.controls
  {
    margin: 1.25rem 0;
    display: flex;
    justify-content: center;
    align-items: center;

    button
    {
      padding: 0;
    }
    button svg
    {
      width: 2.5rem;
      height: 2.5rem;
      padding: 0.25rem;
    }
    button[name=play_pause] svg,
    button[name=stop] svg
    {
      width: 4rem;
      height: 4rem;
      padding: 0;
    }
  }
}
div.player:not(.playing) div.controls button[name=play_pause] path:last-child,
div.player.playing div.controls button[name=play_pause] path:first-child
{
  display: none;
}

div.player div.position
{
  margin: -0.875rem 0 0 0;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  touch-action: pan-y;

  div.time
  {
    font-variant-numeric: tabular-nums;
  }

  canvas
  {
    width: 40px;
    height: 40px;
    transition: opacity 0.3s ease-out;
  }

  div.scrubber
  {
    position: relative;
    width: 100%;
    height: 0.75rem;
    background: var(--bordered-control-background);
    border: 1px solid var(--control);
    border-radius: 0.5rem;
    overflow: hidden;

    > div
    {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      background: var(--control);
    }
  }

  form.toggle
  {
    position: relative;
    display: block;
    width: 1.75rem;
    height: 1.75rem;
  }
  form.toggle label
  {
    z-index: 1;
    position: absolute;
    inset: 0;
    opacity: 0;
  }
  form.toggle svg
  {
    display: block;
    width: 100%;
    height: 100%;
  }
  form.toggle path
  {
    fill: var(--control);
  }
  form.toggle:hover path
  {
    fill: var(--control-hover);
  }
  form.toggle:has(*:active) path,
  form.toggle.active path
  {
    fill: var(--control-active);
  }
  form.toggle label:has(input:checked)
  {
    opacity: 1;
  }
  form.toggle label:has(input:checked) + label,
  form.toggle:has(label:last-of-type > input:checked) label:first-of-type
  {
    z-index: 2;
  }
  form.toggle label input
  {
    position: absolute;
    visibility: hidden;
  }
}

div.player div.sliders
{
  margin: 0.75rem 0;
  touch-action: pan-y;

  > div
  {
    margin: 0.625rem 0;
  }
}