.html-outline {
  @mixin _item($color: null, $before: none, $after: none) {
    $pres-color: #aaa;

    display: inline-block;
    vertical-align: top;
    overflow: hidden;

    @if $color {
      color: $color;
    }
    &:before {
      content: $before;
      color: $pres-color;
    }
    &:after {
      content: $after;
      color: $pres-color;
    }
  }

  font: 600 11px Menlo, monospace;
  cursor: default;
  background: $light-grey;
  padding: 10px;
  margin: 1em 0;

  .glypto-model-outline & {
    margin: 0;
  }

  ._element {
    transition: 100ms;
    padding: 1px 2px 2px;
    border-radius: 3px;
    margin: 1px;
    color: #aaa;

    &:hover {
      box-shadow: inset 0 0 0 1px rgba(black, .07);
      background: rgba(white, .2);
    }

    > span {
      margin-top: 1px;
    }

    ._element {
      margin-left: 10px;
    }

    > ._name,
    ._id,
    ._classes {
      border-radius: 3px;
      background: rgba(white, .2);
    }

    > ._name,
    ._id,
    ._classes,
    ._class {
      padding: 2px 5px;
      margin-right: 1px;
      white-space: nowrap;
    }
  }

  ._id {
    @include _item(#009486);
    box-shadow: inset 0 0 0 1px rgba(#009486, .2);
  }

  ._classes {
    @include _item;
    box-shadow: inset 0 0 0 1px rgba(#cc3333, .2);
  }

  ._element > ._name {
    @include _item(#003366);
    box-shadow: inset 0 0 0 1px rgba(#003366, .2);
  }

  ._element ._class {
    @include _item(#cc3333);
    margin: -2px 0 -2px -1px;
    border-left: 1px solid rgba(#cc3333, .1);
    background: none;

    &:first-child {
      margin-left: -4px;
      border: 0;
    }

    &:before {
      font-family: serif;
      font-weight: bold;
      font-size: 12px;
      margin: 0 2px 0 -2px;
      color: inherit;
    }
  }

  ._attributes {
    @include _item;
    padding: 2px;
    border-radius: 3px;
    word-break: break-word;
  }

  ._attr {
    > ._name {
      @include _item(#3366cc);
    }

    > ._value {
      @include _item(#339900);
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 400px;
    }
  }

  ._text {
    @include _item;
    font: normal 13px/15px Helvetica, Arial, sans-serif;
    padding: 2px 2px 0;
    max-width: 360px;
    word-break: break-word;
  }
}