@layer components {
  /*
   * Article toolbar
   */
  
  .article-toolbar {
    background-color: var(--color-grey-050);
    border-radius: 2px;
    display: flex;
    width: 100%;
  
    @media (max-width: 639.98px) {
      display: block;
    }
  
    .content-selectors {
      align-items: center;
      border-left: 1px solid var(--color-grey-100);
      display: flex;
      flex: 0 0 auto;
      font-size: 0.938rem;
      height: 2.5rem;
      padding-left: 1rem;
  
      @media (max-width: 639.98px) {
        border-left: none;
        border-top: 1px solid var(--color-grey-100);
      }
    }
  
    .content-selector-item {
      color: var(--color-primary);
      margin-right: 1rem;
    }
  
    .content-selector-item-active {
      color: var(--color-grey-900);
      margin-right: 1rem;
  
      &:hover {
        text-decoration: none;
      }
    }
  }
}