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

    display: inline-block;
    vertical-align: top;
    white-space: nowrap;
    overflow: hidden;

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

  ._elements {
    padding: 10px 15px;
    font: 600 11px Menlo, monospace;
    cursor: default;
  }

  ._element {
    @include transition(100ms);
    margin: 1px 0 0;
    padding: 2px;
    border-radius: 3px;

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

    ._element {
      margin-left: 10px;
    }
  }

  ._element {
    > ._name,
    ._classes,
    ._class {
      padding: 2px 5px;
      border-radius: 3px;
      background: rgba(white, .2);
      margin-right: 1px;
    }
  }

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

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

  ._element ._class {
    @include _item(#cc3333, $before: '.');
    margin: -2px 0 -2px -1px;
    border-left: 1px solid #ddd;
    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 5px;
    box-shadow: inset 0 0 0 1px rgba(#aaa, .2);
    border-radius: 3px;
  }

  ._attr {
    margin: 0 3px;

    &:last-of-type:after {
      content: none;
    }

    > ._name {
      @include _item(#3366cc, $after: '=');
    }

    > ._value {
      @include _item(#339900, $before: '"', $after: '"');
      position: relative;
      padding-right: 7px;
      text-overflow: ellipsis;
      max-width: 200px;

      &:after {
        position: absolute;
        right: 0;
      }
    }
  }

  ._text {
    @include _item(#aaa);
    font-weight: normal;
    padding: 2px 5px;
    font-size: 13px;
    font-family: Helvetica, Arial, sans-serif;
    text-overflow: ellipsis;
    max-width: 200px;
  }
}