.line {
  @extend .flex;
}

.line__display {
  line-height: 1.2;
}

.line__symbol {
  @each $type, $color in $line-types {
    .icon {
      padding: 0 .2rem;
    }

    &.line--#{$type} {
     .icon {
        background-color: $color;
        color: color-yiq($color);
      }

      .badge {
        background-color: transparent;
        color: $color;
        border: 1px solid $color;
      }
    }

    &.line--night {
      .badge {
        background-color: $dark;
        color: $white;
        border: none;
      }
    }
  }
}

.track {
  @extend .flex;
  flex-shrink: 0;
  flex-grow: 0;

  .track__line {
    width: 6rem;
    flex-shrink: 0;
  }

  .track__description {
    flex: 1 1 auto;
    white-space: normal;
  }
}