@layer components {
  /* Popup Base (dialog element)
  /* ------------------------------------------------------------------------ */

  .popup {
    --panel-border-radius: 0.5em;
    --panel-padding: var(--block-space);
    --panel-size: auto;
    --popup-icon-size: 24px;
    --popup-item-padding-inline: 0.4rem;
    --popup-display: flex;

    background: var(--color-canvas);
    border: var(--border);
    border-radius: var(--panel-border-radius);
    box-shadow: var(--shadow);
    flex-direction: column;
    inset: 0 auto auto 50%;
    max-block-size: 70dvh;
    max-inline-size: min(55ch, calc(100vw - (var(--panel-padding))));
    min-inline-size: min(25ch, calc(100vw - (var(--panel-padding))));
    overflow: auto;
    padding: var(--panel-padding);
    position: absolute;
    transform: translateX(-50%);
    z-index: var(--z-popup);

    &[open] {
      display: var(--popup-display);
    }

    &.orient-left {
      inset-inline: auto 0;
      transform: translateX(0);
    }

    &.orient-right {
      inset-inline: 0 auto;
      transform: translateX(0);
    }

    form {
      display: contents;
    }
  }

  /* Popup Search Input
  /* ------------------------------------------------------------------------ */

  .popup__search {
    border: var(--border);
    border-radius: 0.3em;
    font-size: var(--text-normal);
    margin-block-end: var(--block-space-half);
    padding: var(--inline-space-half) var(--inline-space);
    width: 100%;

    &:focus {
      border-color: var(--color-link);
      outline: none;
    }
  }

  /* Popup Sections
  /* ------------------------------------------------------------------------ */

  .popup__section {
    &:not(:has(.popup__list)),
    &:not(:has(.popup__list > *)),
    &:has(.popup__item[hidden]):not(:has(.popup__item:not([hidden]))) {
      display: none;
    }
  }

  .popup__section-title {
    background: var(--color-canvas);
    font-size: var(--text-small);
    font-weight: 600;
    inset-block-start: 0;
    list-style: none;
    padding: 0.75ch var(--inline-space-half);
    position: sticky;
    text-transform: uppercase;
    z-index: 1;

    &:is(summary) {
      align-items: center;
      cursor: pointer;
      display: flex;
      gap: 0.5ch;
    }

    &::-webkit-details-marker {
      display: none;
    }

    .icon--caret-down {
      font-size: 0.8em;
      margin-inline-start: -0.25ch;
      transition: rotate 150ms ease-out;
    }

    .popup__section:not([open]) & {
      .icon--caret-down {
        rotate: -90deg;
      }
    }
  }

  /* Popup List
  /* ------------------------------------------------------------------------ */

  .popup__list {
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    list-style: none;
    margin: 0;
    max-inline-size: 100%;
    padding: 0;

    details & {
      margin-inline-start: 0.75ch;
    }
  }

  /* Popup Header - sticky table header
  /* ------------------------------------------------------------------------ */

  .popup__header {
    background: var(--color-canvas);
    border-block-end: var(--border);
    display: flex;
    font-weight: 600;
    inset-block-start: 0;
    position: sticky;
    z-index: 1;
  }

  /* Popup Items - table row styling
  /* ------------------------------------------------------------------------ */

  .popup__item {
    align-items: center;
    background: transparent;
    border-block-start: var(--border);
    border-radius: 0;
    display: flex;
    inline-size: 100%;
    max-inline-size: 100%;

    &:first-child {
      border-block-start: none;
    }

    @media (any-hover: hover) {
      &:hover {
        background: var(--color-ink-lightest);
      }
    }

    &[aria-selected="true"] {
      background: var(--color-ink-lightest);
    }

    .checked {
      display: none;
    }

    &[aria-checked="true"] .checked {
      display: block;
    }
  }

  /* Popup Button - table cell styling
  /* ------------------------------------------------------------------------ */

  .popup__btn {
    background: transparent;
    border: none;
    --btn-border-radius: 0;
    --btn-border-size: 0;

    display: flex;
    flex: 1 1 auto;
    font-weight: 500;
    gap: 0;
    justify-content: start;
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
    padding: 0;
    text-align: start;

    &:focus-visible {
      z-index: 1;
    }
  }

  /* Popup Columns - table cell styling
  /* ------------------------------------------------------------------------ */

  .popup__col {
    overflow: hidden;
    padding: 0.75rem 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* First column: fixed width with right border separator */
  .popup__col:first-child {
    border-inline-end: var(--border);
    flex: 0 0 6rem;
  }

  /* Remaining columns: flex to fill */
  .popup__col:not(:first-child) {
    flex: 1 1 auto;
  }

  /* Popup Icon
  /* ------------------------------------------------------------------------ */

  .popup__icon {
    --icon-size: 1em;

    inline-size: 24px;
    margin-inline-start: 0.4rem;
    text-align: center;
  }
}