.related-skills {
  &.project-card__skills {
    margin: 20px 0 0 0;
  }

  &.task-card__skills {
    margin: 0 0 7px 0;
  }

  .expander {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    font-size: 10px;
    margin: 8px 0px;

    &::before, &::after {
      content: "";
      flex-grow: 1;
      background: $gray--lightest;
      height: 1px;
      font-size: 0px;
      line-height: 0px;
    }

    &::before {
      margin-right: 10px;
    }

    &::after {
      margin-left: 10px;
    }

    &.hidden {
      display: none;
    }

    a {
      color: $text--lightest;
      &:hover {
        color: $link-color;
      }
    }
  }

  .skills {
    $font-size: $body-font-size-small;
    $line-height: $font-size * 1.6;
    $lines-to-show: 3;

    @include clearfix;

    &.overflow-hidden {
      max-height: $line-height * $lines-to-show;
    }

    li {
      float: left;
      font-size: $font-size;
      line-height: $line-height;
      padding: 0 6px 0 0;

      &:last-child {
        padding: 0;
      }
    }
  }
}
