div.ap-wrapper {
  outline: none;
  height: 100%;
  display: flex;
  justify-content: center;

  .title-bar {
    display: none;
    top: -78px;
    transition: top 0.15s linear;
    position: absolute;
    left: 0;
    right: 0;
    box-sizing: content-box;
    font-size: 20px;
    line-height: 1em;
    padding: 15px;
    font-family: sans-serif;
    color: white;
    background-color: rgba(0, 0, 0, 0.8);

    img {
      vertical-align: middle;
      height: 48px;
      margin-right: 16px;
    }

    a {
      color: white;
      text-decoration: underline;

      &:hover {
        text-decoration: none;
      }
    }
  }

  &:fullscreen {
    background-color: #000;
    width: 100%;
    align-items: center;

    .title-bar {
      display: initial;
    }

    &.hud .title-bar {
      top: 0;
    }
  }

  div.ap-player {
    text-align: left;
    display: inline-block;
    padding: 0px;
    position: relative;
    box-sizing: content-box;
    overflow: hidden;
    max-width: 100%;
    border-radius: 4px;
    font-size: 15px;
    background-color: var(--term-color-background);
  }
}

.ap-player {
  // default text color
  --term-color-foreground: #ffffff;
  // default background color
  --term-color-background: #000000;

  --term-color-0: var(--term-color-foreground);
  --term-color-1: var(--term-color-foreground);
  --term-color-2: var(--term-color-foreground);
  --term-color-3: var(--term-color-foreground);
  --term-color-4: var(--term-color-foreground);
  --term-color-5: var(--term-color-foreground);
  --term-color-6: var(--term-color-foreground);
  --term-color-7: var(--term-color-foreground);
  --term-color-8: var(--term-color-0);
  --term-color-9: var(--term-color-1);
  --term-color-10: var(--term-color-2);
  --term-color-11: var(--term-color-3);
  --term-color-12: var(--term-color-4);
  --term-color-13: var(--term-color-5);
  --term-color-14: var(--term-color-6);
  --term-color-15: var(--term-color-7);

  .fg-0 { --fg: var(--term-color-0); }
  .bg-0 { --bg: var(--term-color-0); }
  .fg-1 { --fg: var(--term-color-1); }
  .bg-1 { --bg: var(--term-color-1); }
  .fg-2 { --fg: var(--term-color-2); }
  .bg-2 { --bg: var(--term-color-2); }
  .fg-3 { --fg: var(--term-color-3); }
  .bg-3 { --bg: var(--term-color-3); }
  .fg-4 { --fg: var(--term-color-4); }
  .bg-4 { --bg: var(--term-color-4); }
  .fg-5 { --fg: var(--term-color-5); }
  .bg-5 { --bg: var(--term-color-5); }
  .fg-6 { --fg: var(--term-color-6); }
  .bg-6 { --bg: var(--term-color-6); }
  .fg-7 { --fg: var(--term-color-7); }
  .bg-7 { --bg: var(--term-color-7); }
  .fg-8 { --fg: var(--term-color-8); }
  .bg-8 { --bg: var(--term-color-8); }
  .fg-9 { --fg: var(--term-color-9); }
  .bg-9 { --bg: var(--term-color-9); }
  .fg-10 { --fg: var(--term-color-10); }
  .bg-10 { --bg: var(--term-color-10); }
  .fg-11 { --fg: var(--term-color-11); }
  .bg-11 { --bg: var(--term-color-11); }
  .fg-12 { --fg: var(--term-color-12); }
  .bg-12 { --bg: var(--term-color-12); }
  .fg-13 { --fg: var(--term-color-13); }
  .bg-13 { --bg: var(--term-color-13); }
  .fg-14 { --fg: var(--term-color-14); }
  .bg-14 { --bg: var(--term-color-14); }
  .fg-15 { --fg: var(--term-color-15); }
  .bg-15 { --bg: var(--term-color-15); }

  .fg-8, .fg-9, .fg-10, .fg-11, .fg-12, .fg-13, .fg-14, .fg-15 {
    font-weight: bold;
  }
}
