@layer components {
  .mind-switcher__btn {
    --switcher-bg: oklch(var(--lch-ink-light));
    --switcher-color: oklch(var(--lch-ink-darkest));

    background: var(--switcher-bg);
    border: none;
    color: var(--switcher-color);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: var(--text-normal);
    font-weight: 600;
    padding: 0.3em 0.7em;
    border-radius: 99rem;
    transition: filter 150ms;
    white-space: nowrap;

    &:hover {
      filter: brightness(0.92);
    }
  }

  .mind-switcher__btn--personal {
    --switcher-bg: oklch(var(--lch-blue-light));
    --switcher-color: oklch(var(--lch-blue-darkest));
  }

  .mind-switcher__btn--hub {
    --switcher-bg: oklch(var(--lch-violet-light));
    --switcher-color: oklch(var(--lch-violet-darkest));
  }

  .mind-switcher__chevron {
    font-size: 0.65em;
    opacity: 0.5;
  }

  .mind-switcher:has(.unread-badge .unread-count:not(.hidden))::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    width: 8px;
    height: 8px;
    background: var(--color-negative);
    border-radius: 50%;
  }

  .mind-switcher__popup {
    min-inline-size: 280px;
  }

  .mind-switcher__item {
    display: flex;
    align-items: stretch;

    .popup__btn {
      flex: 1;
    }
  }

  .mind-switcher__item--active {
    background: var(--color-selected-light);
    border-radius: 0.3em;
  }

  .mind-switcher__settings {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--inline-space-half);
    color: var(--color-ink-medium);
    text-decoration: none;

    &:hover {
      color: var(--color-ink);
    }
  }

  .mind-switcher__section-title {
    display: flex;
    align-items: center;
    gap: var(--inline-space-half);
    font-size: var(--text-small);
    font-weight: 600;
    padding: var(--inline-space-half);
    color: var(--color-ink-dark);
  }

  .mind-switcher__new-hub-form {
    padding: var(--inline-space-half);
  }

  .unread-count {
    align-items: center;
    background: var(--color-negative);
    border-radius: 99rem;
    color: var(--color-ink-inverted);
    display: inline-flex;
    font-size: var(--text-x-small);
    font-weight: 500;
    line-height: 1;
    padding: 0.25em 0.6em;
  }
}