.type-info {
  border-left: 5px solid $color-green;
  margin-bottom: 0.5em;

  &.type-info-green {
    border-left-color: $color-green;
  }

  &.type-info-pink {
    border-left-color: $color-heart;
  }

  &.type-info-blue {
    border-left-color: $color-secondary;
  }

  &.type-info-orange {
    border-left-color: $color-warning;
  }

  &.type-info-purple {
    border-left-color: $color-purple;
  }

  &.type-info-red {
    border-left-color: $color-danger;
  }

  a {
    color: #fff;
  }

  ul.interface-map {
    list-style: none;
    margin-left: 0;
    padding-left: 0;

    &:empty {
      display: none;
    }

    li {
      margin: 0.5em 0;
    }
  }

  span.block {
    display: block;
    word-break: break-word;
  }

  code {
    background: #222;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    padding:2px 8px;
    padding-top: 4px;
    display: inline-block;
  }
}

.type-title {
  cursor: pointer;
  background: #eee;
  padding: 1em;

  > b {
    color: transparentize($color: black, $amount: 0.2);
    font-size: 0.9em;
  }

  > h3 {
    margin: 0.3em 0;
  }

  > span.block {
    margin: 0.7em 0;
  }
}

.type-details {
  overflow: hidden;
  transition: opacity 500ms ease;

  &.open {
    padding: 0.5em;
    max-height: 100000;
    opacity: 1;
  }

  &.close {
    padding: 0;
    max-height: 0;
    opacity: 0;
  }
}
