@layer sections {
  .categories {
    position: relative;
  }

  /* Button */
  .categories-trigger i {
    transition: rotate var(--transition-standard-fast-effects);
  }
  .categories[data-open="true"] .categories-trigger i {
    rotate: 180deg;
  }

  /* Panels (main list + side list share the same look) */
  .categories-panel,
  .categories-sub {
    position: absolute;
    z-index: 60;
    width: 260px;
    margin: 0;
    padding: var(--spacing-8) 0;
    border-radius: var(--radius-16);
    background-color: var(--bg-color);
    color: var(--fg-color);
    box-shadow: var(--shadow-md);
    list-style: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity var(--transition-standard-fast-effects),
      translate var(--transition-standard-fast-spatial),
      visibility var(--transition-standard-fast-effects);
  }

  .categories-panel {
    inset-block-start: calc(100% + var(--spacing-8));
    inset-inline-start: 0;
    translate: 0 calc(var(--spacing-8) * -1);
  }
  .categories[data-open="true"] .categories-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    translate: 0 0;
  }

  .categories-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .categories-item {
    position: relative;
  }

  .categories-panel a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-8);
    padding: var(--spacing-10) var(--spacing-16);
    color: inherit;
    font: var(--font-label-md);
    text-decoration: none;
    transition: background-color var(--transition-standard-fast-effects);
  }
  .categories-panel a:hover,
  .categories-panel a:focus-visible,
  .categories-item:hover > a,
  .categories-item:focus-within > a {
    background-color: var(--bg-shade-color);
    outline: none;
  }
  .categories-title {
    min-width: 0;
    word-wrap: break-word;
  }
  .categories-arrow {
    display: flex;
    flex-shrink: 0;
    opacity: 0.5;
  }
  [dir="rtl"] .categories-arrow {
    scale: -1 1;
  }

  /* Side list (sub categories) */
  .categories-sub {
    inset-block-start: calc(var(--spacing-8) * -1);
    inset-inline-start: 100%;
    width: 240px;
    translate: calc(var(--spacing-8) * -1) 0;
  }
  [dir="rtl"] .categories-sub {
    translate: var(--spacing-8) 0;
  }
  .categories-sub .categories-all {
    font-weight: 700;
  }
  .categories-item[data-has-sub]:hover > .categories-sub,
  .categories-item[data-has-sub]:focus-within > .categories-sub,
  .categories-item[data-sub-open] > .categories-sub {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    translate: 0 0;
  }

  /* On phones the header menu is hidden: the side drawer is used instead */
  @media (prefers-reduced-motion: reduce) {
    .categories-panel,
    .categories-sub,
    .categories-trigger i {
      transition: none;
    }
  }
}