/** Aufgabenliste der Projektseite: Umschalter, Filter (Zeilen siehe task.css). */
@layer components {
  .view-switch {
    display: inline-flex;
    justify-self: start;
    gap: var(--space-1);
    padding: var(--space-1);
    border: var(--border-width-thin) solid var(--theme-card-border);
    border-radius: var(--radius-lg);
  }

  .view-switch__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: 1.75rem;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--theme-meta-color);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition:
      background-color var(--motion-duration-ui) var(--motion-ease),
      color var(--motion-duration-ui) var(--motion-ease),
      transform var(--press-duration, var(--motion-duration-ui)) var(--motion-ease);
  }

  @media (prefers-reduced-motion: no-preference) {
    .view-switch__link:active {
      --press-duration: var(--motion-duration-press);
      transform: scale(0.97);
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .view-switch__link:hover {
      background-color: var(--theme-row-hover);
      color: var(--theme-heading-color);
    }
  }

  .view-switch__link[aria-current="page"] {
    background-color: var(--theme-nav-active);
    color: var(--theme-heading-color);
  }

  @media (max-width: 48.75em) {
    .view-switch__link {
      min-block-size: 2.75rem;
    }
  }

  .task-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-4);
  }

  .task-filter .field {
    min-inline-size: min(100%, 14rem);
  }

  .filter-panel__toggle {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    color: var(--theme-heading-color);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
  }

  .filter-panel[open] > .filter-panel__toggle {
    margin-block-end: var(--space-3);
  }

  @media (min-width: 48em) {
    .filter-panel__toggle {
      display: none;
    }

    .filter-panel::details-content {
      content-visibility: visible;
      display: block;
    }
  }

  .filter-bar {
    display: grid;
    gap: var(--space-3);
  }

  .filter-saved {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
  }

  .filter-saved__title {
    color: var(--theme-meta-color);
    font-size: var(--font-size-label);
  }

  .filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: 1.75rem;
    padding: 0.125rem var(--space-3);
    border: var(--border-width-thin) solid var(--border-default);
    border-radius: var(--radius-xl);
    color: var(--theme-heading-color);
    font-size: var(--font-size-small);
    text-decoration: none;
    transition:
      background-color var(--motion-duration-ui) var(--motion-ease),
      border-color var(--motion-duration-ui) var(--motion-ease),
      transform var(--press-duration, var(--motion-duration-ui)) var(--motion-ease);
  }

  @media (prefers-reduced-motion: no-preference) {
    .filter-chip:active {
      --press-duration: var(--motion-duration-press);
      transform: scale(0.97);
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .filter-chip:hover {
      border-color: var(--border-strong);
      background-color: var(--surface-hover);
    }
  }

  .filter-chip--current {
    border-color: var(--border-strong);
    background-color: var(--theme-nav-active);
    font-weight: var(--font-weight-medium);
  }

  .filter-chip--active {
    background-color: var(--surface-selected);
  }

  .filter-chip__remove {
    color: var(--theme-meta-color);
    font-size: var(--font-size-label);
    line-height: 1;
  }

  .filter-active {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
  }

  .filter-active__reset {
    color: var(--theme-meta-color);
    font-size: var(--font-size-small);
  }

  .filter-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: var(--space-2) var(--space-5);
  }

  .filter-save {
    display: grid;
    gap: var(--space-3);
  }

  .filter-save__toggle {
    display: inline-flex;
    align-items: center;
    min-block-size: 1.75rem;
    color: var(--theme-meta-color);
    font-size: var(--font-size-small);
    cursor: pointer;
  }

  .filter-save__form,
  .filter-manage__rename {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-3);
  }

  .filter-manage__rename {
    flex-wrap: nowrap;
    align-items: center;
  }

  .filter-manage__rename .field__input {
    inline-size: 14rem;
    min-inline-size: 0;
  }

  .filter-manage {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .filter-manage__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
  }

  .filter-manage__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  @media (max-width: 48.75em) {
    .filter-chip,
    .filter-save__toggle,
    .filter-active__reset {
      min-block-size: 2.75rem;
    }

    .filter-active__reset {
      display: inline-flex;
      align-items: center;
    }
  }
}