pre.ap-terminal {
  box-sizing: content-box;
  overflow: hidden;
  padding: 0;
  margin: 0px;
  display: block;
  white-space: pre;
  word-wrap: normal;
  word-break: normal;
  border-radius: 0;
  border-style: solid;
  cursor: text;
  border-width: 0.75em;
  color: var(--term-color-foreground);
  background-color: var(--term-color-background);
  border-color: var(--term-color-background);
  outline: none;
  line-height: var(--term-line-height);

  .terminal-font;

  .ap-line {
    display: block;
    width: 100%;
    height: var(--term-line-height);
    position: relative;

    span {
      position: absolute;
      left: calc(100% * var(--offset) / var(--term-cols));
      color: var(--fg);
      background-color: var(--bg);
    }

    .ap-inverse {
      color: var(--bg);
      background-color: var(--fg);
    }

    // upper half block
    .cp-2580 {
      border-top: calc(0.5 * var(--term-line-height)) solid var(--fg);
      box-sizing: border-box;
    }

    // lower one eighth block
    .cp-2581 {
      border-bottom: calc(0.125 * var(--term-line-height)) solid var(--fg);
      box-sizing: border-box;
    }

    // lower one quarter block
    .cp-2582 {
      border-bottom: calc(0.25 * var(--term-line-height)) solid var(--fg);
      box-sizing: border-box;
    }

    // lower three eighths block
    .cp-2583 {
      border-bottom: calc(0.375 * var(--term-line-height)) solid var(--fg);
      box-sizing: border-box;
    }

    // lower half block
    .cp-2584 {
      border-bottom: calc(0.5 * var(--term-line-height)) solid var(--fg);
      box-sizing: border-box;
    }

    // lower five eighths block
    .cp-2585 {
      border-bottom: calc(0.625 * var(--term-line-height)) solid var(--fg);
      box-sizing: border-box;
    }

    // lower three quarters block
    .cp-2586 {
      border-bottom: calc(0.75 * var(--term-line-height)) solid var(--fg);
      box-sizing: border-box;
    }

    // lower seven eighths block
    .cp-2587 {
      border-bottom: calc(0.875 * var(--term-line-height)) solid var(--fg);
      box-sizing: border-box;
    }

    // full block
    .cp-2588 {
      background-color: var(--fg);
    }

    // left seven eighths block
    .cp-2589 {
      border-left: 0.875ch solid var(--fg);
      box-sizing: border-box;
    }

    // left three quarters block
    .cp-258a {
      border-left: 0.75ch solid var(--fg);
      box-sizing: border-box;
    }

    // left five eighths block
    .cp-258b {
      border-left: 0.625ch solid var(--fg);
      box-sizing: border-box;
    }

    // left half block
    .cp-258c {
      border-left: 0.5ch solid var(--fg);
      box-sizing: border-box;
    }

    // left three eighths block
    .cp-258d {
      border-left: 0.375ch solid var(--fg);
      box-sizing: border-box;
    }

    // left one quarter block
    .cp-258e {
      border-left: 0.25ch solid var(--fg);
      box-sizing: border-box;
    }

    // left one eighth block
    .cp-258f {
      border-left: 0.125ch solid var(--fg);
      box-sizing: border-box;
    }

    // right half block
    .cp-2590 {
      border-right: 0.5ch solid var(--fg);
      box-sizing: border-box;
    }

    // light shade (░)
    .cp-2591 {
      background-color: color-mix(in srgb, var(--fg) 25%, var(--bg));
    }

    // medium shade (▒)
    .cp-2592 {
      background-color: color-mix(in srgb, var(--fg) 50%, var(--bg));
    }

    // dark shade (▓)
    .cp-2593 {
      background-color: color-mix(in srgb, var(--fg) 75%, var(--bg));
    }

    // upper one eighth block
    .cp-2594 {
      border-top: calc(0.125 * var(--term-line-height)) solid var(--fg);
      box-sizing: border-box;
    }

    // right one eighth block
    .cp-2595 {
      border-right: 0.125ch solid var(--fg);
      box-sizing: border-box;
    }

    // quadrant lower left (▖)
    .cp-2596 {
      border-right: 0.5ch solid var(--bg);
      border-top: calc(0.5 * var(--term-line-height)) solid var(--bg);
      background-color: var(--fg);
      box-sizing: border-box;
    }

    // quadrant lower right (▗)
    .cp-2597 {
      border-left: 0.5ch solid var(--bg);
      border-top: calc(0.5 * var(--term-line-height)) solid var(--bg);
      background-color: var(--fg);
      box-sizing: border-box;
    }

    // quadrant upper left (▘)
    .cp-2598 {
      border-right: 0.5ch solid var(--bg);
      border-bottom: calc(0.5 * var(--term-line-height)) solid var(--bg);
      background-color: var(--fg);
      box-sizing: border-box;
    }

    // quadrant upper left and lower left and lower right
    .cp-2599 {
      border-left: 0.5ch solid var(--fg);
      border-bottom: calc(0.5 * var(--term-line-height)) solid var(--fg);
      box-sizing: border-box;
    }

    // quadrant upper left and lower right (▚)
    .cp-259a {
      box-sizing: border-box;
    }

    .cp-259a::before, .cp-259a::after {
      content: '';
      position: absolute;
      width: 0.5ch;
      height: calc(0.5 * var(--term-line-height));
      background-color: var(--fg);
    }

    .cp-259a::before {
      top: 0;
      left: 0;
    }

    .cp-259a::after {
      bottom: 0;
      right: 0;
    }

    // quadrant upper left and upper right and lower left
    .cp-259b {
      border-left: 0.5ch solid var(--fg);
      border-top: calc(0.5 * var(--term-line-height)) solid var(--fg);
      box-sizing: border-box;
    }

    // quadrant upper left and upper right and lower right
    .cp-259c {
      border-right: 0.5ch solid var(--fg);
      border-top: calc(0.5 * var(--term-line-height)) solid var(--fg);
      box-sizing: border-box;
    }

    // quadrant upper right (▝)
    .cp-259d {
      border-left: 0.5ch solid var(--bg);
      border-bottom: calc(0.5 * var(--term-line-height)) solid var(--bg);
      background-color: var(--fg);
      box-sizing: border-box;
    }

    // quadrant upper right and lower left (▞)
    .cp-259e {
      box-sizing: border-box;
    }

    .cp-259e::before, .cp-259e::after {
      content: '';
      position: absolute;
      width: 0.5ch;
      height: calc(0.5 * var(--term-line-height));
      background-color: var(--fg);
    }

    .cp-259e::before {
      top: 0;
      right: 0;
    }

    .cp-259e::after {
      bottom: 0;
      left: 0;
    }

    // quadrant upper right and lower left and lower right
    .cp-259f {
      border-right: 0.5ch solid var(--fg);
      border-bottom: calc(0.5 * var(--term-line-height)) solid var(--fg);
      box-sizing: border-box;
    }

    // powerline right full triangle
    .cp-e0b0 {
      border-left: 1.0ch solid var(--fg);
      border-top: calc(0.5 * var(--term-line-height)) solid transparent;
      border-bottom: calc(0.5 * var(--term-line-height)) solid transparent;
      box-sizing: border-box;
    }

    // powerline left full triangle
    .cp-e0b2 {
      border-right: 1.0ch solid var(--fg);
      border-top: calc(0.5 * var(--term-line-height)) solid transparent;
      border-bottom: calc(0.5 * var(--term-line-height)) solid transparent;
      box-sizing: border-box;
    }
  }

  &.ap-cursor-on .ap-line .ap-cursor {
    color: var(--bg);
    background-color: var(--fg);
    border-radius: 0.05em;

    &.ap-inverse {
      color: var(--fg);
      background-color: var(--bg);
    }
  }

  &:not(.ap-blink) .ap-line .ap-blink {
    color: transparent;
    border-color: transparent;
  }

  .ap-bright {
    font-weight: bold;
  }

  .ap-faint {
    opacity: 0.5;
  }

  .ap-underline {
    text-decoration: underline;
  }

  .ap-italic {
    font-style: italic;
  }

  .ap-strikethrough {
    text-decoration: line-through;
  }
}

.ap-line span {
  --fg: var(--term-color-foreground);
  --bg: var(--term-color-background);
}
