.categories-container {
  display: flex;

  @media (max-width: $viewport-sm) {
    flex-direction: column;
  }

  .category {
    font-weight: 600;
    @include type-size(100);
    line-height: 1rem;

    color: $color-plum-100;
    @include margin(0, bottom);

    @media (max-width: $viewport-sm) {
      @include margin(0, top);
    }

    a {
      text-decoration: none;
      &:hover {
        @include link-hover-dark-bg;
      }
      &:focus {
        @include link-focus-dark-bg;
      }
    }

    &::after {
      content: '  |  ';
      white-space: pre;
      color: $color-plum-100;
      font-weight: normal;

      @media (max-width: $viewport-sm) {
        content: '';
      }
    }

    &:last-child::after {
      content: none;
    }

    &.light-bg {
      color: $color-plum-700;
      a {
        text-decoration: none;
        &:hover {
          @include link-hover;
        }
        &:focus {
          @include link-focus;
        }
      }

      &::after {
        color: $color-plum-700;
      }
    }
  }
}
