@layer component.chatFolderTabList {
  .root {
    --fade-mask-height: 2.625rem;

    position: absolute;
    z-index: 10;
    top: 0.25rem;
    inset-inline: 0.5rem;

    transition: opacity var(--layer-transition);
  }

  .hidden {
    pointer-events: none;
    opacity: 0.25;
  }

  .badge {
    flex-shrink: 0;

    min-width: 1.25rem;
    height: 1.25rem;
    margin-inline-start: 0.25rem;
    padding: 0 0.3125rem;
    border-radius: 0.75rem;

    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.25rem;
    color: white;
    text-align: center;

    background: var(--color-gray);
  }

  .badgeActive {
    background: var(--color-primary);
  }

  :global(html.theme-dark) .tabList {
    border: 1px solid var(--color-borders);
    box-shadow: none;
  }
}
