.ap-player {
  .ap-overlay {
    z-index: 10;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    display: flex;
    justify-content: center;
    align-items: center;
  }

  .ap-overlay-start {
    cursor: pointer;

    .ap-play-button {
      font-size: 0px;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      text-align: center;
      color: white;

      height: 80px;
      max-height: 66%;
      margin: auto;

      div {
        height: 100%;

        span {
          height: 100%;
          display: block;

          svg {
            height: 100%;
            display: inline-block;
          }
        }
      }

      svg {
        filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.4));
      }
    }
  }

  .ap-overlay-loading {
    .ap-loader {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: inline-block;
      position: relative;
      border: 10px solid;
      border-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.7) rgba(255, 255, 255, 1.0);
      border-color: color-mix(in srgb, var(--term-color-foreground) 30%, var(--term-color-background)) color-mix(in srgb, var(--term-color-foreground) 50%, var(--term-color-background)) color-mix(in srgb, var(--term-color-foreground) 70%, var(--term-color-background)) color-mix(in srgb, var(--term-color-foreground) 100%, var(--term-color-background));
      box-sizing: border-box;
      animation: ap-loader-rotation 1s linear infinite;
    }
  }

  .ap-overlay-info {
    background-color: var(--term-color-background);

    span {
      .terminal-font;
      font-size: 2em;
      color: var(--term-color-foreground);
    }
  }

  .ap-overlay-help {
    background-color: rgba(0,0,0,0.8);
    container-type: inline-size;

    > div {
      .terminal-font;
      max-width: 85%;
      max-height: 85%;
      font-size: 18px;
      color: var(--term-color-foreground);
      box-sizing: border-box;
      margin-bottom: 32px;

      div  {
        padding: calc(min(4cqw, 40px));
        font-size: calc(min(1.9cqw, 18px));
        background-color: var(--term-color-background);
        border: 1px solid color-mix(in oklab, var(--term-color-background) 90%, var(--term-color-foreground));
        border-radius: 6px;

        p {
          font-weight: bold;
          margin: 0 0 2em 0;
        }

        ul {
          list-style: none;
          padding: 0;

          li {
            margin: 0 0 0.75em 0;
          }
        }

        kbd {
          color: var(--term-color-background);
          background-color: var(--term-color-foreground);
          padding: 0.2em 0.5em;
          border-radius: 0.2em;
          font-family: inherit;
          font-size: 0.85em;
          border: none;
          margin: 0;
        }
      }
    }
  }

  .ap-overlay-error {
    span {
      font-size: 8em;
    }
  }

  .slide-enter-active {
    transition: opacity 0.2s;
  }

  .slide-enter-active.ap-was-playing {
    transition: top 0.2s ease-out, opacity 0.2s;
  }

  .slide-exit-active {
    transition: top 0.2s ease-in, opacity 0.2s;
  }

  .slide-enter {
    top: -50%;
    opacity: 0;
  }

  .slide-enter-to {
    top: 0%;
  }

  .slide-enter, .slide-enter-to, .slide-exit, .slide-exit-to {
    bottom: auto;
    height: 100%;
  }

  .slide-exit {
    top: 0%;
  }

  .slide-exit-to {
    top: -50%;
    opacity: 0;
  }
}

@keyframes ap-loader-rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

