.player {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
}

.player > canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

.player-controls {
  display: flex;
  align-items: center;
  height: var(--control-height);
  gap: 0.5em;
  padding: 0.4em 0.6em;
  border-radius: var(--grid-corners-radius);
  background: light-dark(#eceaea, #1c1c1e);
  color: light-dark(#222, #fff);

  button {
    display: flex;
    align-items: center;
    padding: 0.15em;
    color: inherit;

    .material-symbols-outlined {
      font-size: var(--control-icon-size);
    }
  }

  input[type='range'] {
    min-width: 0;
    accent-color: var(--power-primary-color);
  }

  .seek {
    flex: 1;
    width: 4em;
  }

  .volume {
    width: 4em;
  }

  .time {
    white-space: nowrap;
    font-size: 0.8em;
    font-variant-numeric: tabular-nums;
  }
}

iframe.player {
  border: 0;
}
pre.player {
  overflow: auto;
  white-space: pre-wrap;
  padding: 1em;
}