#radio-overlay {
  visibility: hidden;
  z-index: 2;
  position: fixed;
  inset: 0;
  background-color: var(--background-color-overlay);
  opacity: 0;
  transition: opacity 162ms var(--ease-fluid);

  &.visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
}

#radio {
  display: grid;
  visibility: hidden;
  z-index: 3;
  position: absolute;
  top: 4.875rem;
  left: 50%;
  align-items: center;
  width: 10rem;
  transform: translateX(-50%) translateY(0.75rem);
  border: 0.0625rem solid var(--background-color-tertiary);
  border-radius: 0.75rem;
  background-color: var(--background-color-primary);
  color: var(--color-caption);
  font-size: var(--font-size-caption);
  opacity: 0;
  transition:
    transform 162ms var(--ease-fluid),
    opacity 162ms var(--ease-fluid);

  &.visible {
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .metadata {
    display: grid;
    width: 100%;
    padding: 0.75rem;

    .title {
      font-size: var(--font-size-caption);
    }
  }

  .controls {
    display: grid;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.75rem 0.75rem 1.125rem;
    gap: 0.75rem;
    border-top: 0.0313rem solid var(--background-color-tertiary);

    .navigation {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.375rem;
    }

    .button {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.75rem;
      border: 0.0625rem solid var(--background-color-tertiary);
      border-radius: 0.75rem;
      background-color: transparent;
      color: var(--color-display);
      transition:
        transform 138ms var(--ease-sharp),
        border-color 138ms var(--ease-sharp),
        color 138ms var(--ease-sharp);

      &:focus-visible {
        border-color: var(--color);
      }

      &:hover {
        transform: scale(1.06);
        border-color: var(--color);
        color: var(--color);
      }

      &:active {
        transform: scale(0.95);
      }
    }

    .volume-control {
      display: grid;
      grid-auto-flow: column;
      align-items: center;
      width: 100%;
      padding: 0.75rem;
      gap: 0.375rem;
      border: 0.0625rem solid var(--background-color-tertiary);
      border-radius: 0.75rem;
      color: var(--color-display);
      transition:
        border-color 138ms var(--ease-sharp),
        color 138ms var(--ease-sharp);

      &:focus-within,
      &:hover {
        border-color: var(--color);
        color: var(--color);
      }

      .slider {
        appearance: none;
        width: 100%;
        height: 0.25rem;
        border-radius: 0.25rem;
        cursor: pointer;
        transition: background 120ms var(--ease-fluid);

        &::-webkit-slider-thumb {
          appearance: none;
          width: 0.75rem;
          height: 0.75rem;
          border-radius: 50%;
          background-color: var(--color-display);
          box-shadow: 0 0 0 0.125rem hsla(var(--hue), 12%, 6%, 0.24);
          cursor: pointer;
          transition: transform 120ms var(--ease-sharp);
        }

        &::-moz-range-thumb {
          width: 0.75rem;
          height: 0.75rem;
          border: none;
          border-radius: 50%;
          background-color: var(--color-display);
          box-shadow: 0 0 0 0.125rem hsla(var(--hue), 12%, 6%, 0.24);
          cursor: pointer;
          transition: transform 120ms var(--ease-sharp);
        }

        &:active::-webkit-slider-thumb,
        &:active::-moz-range-thumb {
          transform: scale(1.08);
        }
      }
    }
  }
}

@media (max-width: 70rem) {
  #radio-overlay,
  #radio-overlay.visible {
    display: none;
    visibility: hidden;
    z-index: -1;
    pointer-events: none;
  }

  #radio,
  #radio.visible {
    visibility: visible;
    position: relative;
    top: unset;
    left: unset;
    width: 100%;
    transform: none;
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    opacity: 1;
    pointer-events: auto;

    .metadata {
      justify-content: center;
      text-align: center;
    }
  }
}
