.dokuwiki {
  span.wrap_em {
    color: var(--color-error);
  }

  span.wrap_hi {
    background-color: var(--color-highlight);
    color: var(--color-foreground);
  }

  span.wrap_lo {
    color: var(--color-text-2);
  }

  div.plugin_wrap {
    &.wrap_box {
      background-color: var(--color-shade-1);
      color: var(--color-foreground);
    }

    &.wrap_info,
    &.wrap_tip,
    &.wrap_important,
    &.wrap_alert,
    &.wrap_help,
    &.wrap_download,
    &.wrap_todo {
      @media @screen_max-md {
        flex-direction: column;
      }

      display: flex;
      align-items: start;
      gap: 1rem;
      border: none;
      border-left: solid 0.5rem var(--color-shade-4);
      border-radius: 0.5rem;
      padding: 1em;
      background-image: none;
      background-color: var(--color-shade-1);

      p {
        margin: 0;
        max-width: calc(~"100% - 2.5rem");
      }

      &::before {
        content: "";
        flex-shrink: 0;
        margin-top: 0.3em;
        width: 2em;
        height: 2em;
        mask-size: contain;
        mask-position: center top;
        mask-repeat: no-repeat;
      }
    }

    &.wrap_info {
      color: var(--color-foreground);

      &::before {
        background-color: currentColor;
        mask-image: url(img/info.svg);
      }
    }

    &.wrap_tip {
      color: var(--color-foreground);

      &::before {
        background-color: currentColor;
        mask-image: url(img/lightbulb.svg);
      }
    }

    &.wrap_important {
      border-left-color: var(--color-warning);
      color: var(--color-foreground);

      &::before {
        background-color: var(--color-warning);
        mask-image: url(img/warning.svg);
      }
    }

    &.wrap_alert {
      border-left-color: var(--color-error);
      color: var(--color-foreground);

      &::before {
        background-color: var(--color-error);
        mask-image: url(img/power.svg);
      }
    }

    &.wrap_help {
      border-left-color: var(--color-accent-1);
      color: var(--color-foreground);

      &::before {
        background-color: var(--color-accent-1);
        mask-image: url(img/question.svg);
      }
    }

    &.wrap_download {
      border-left-color: var(--color-success);
      color: var(--color-foreground);

      &::before {
        background-color: var(--color-success);
        mask-image: url(img/arrow_down.svg);
      }
    }

    &.wrap_todo {
      color: var(--color-foreground);

      &::before {
        background-color: currentColor;
        mask-image: url(img/tick_small.svg);
      }
    }
  }
}