@layer ll-service-extension.components {
  .ll-service-extension .ll-se-chip-overflow {
    position: relative;
    min-inline-size: 0;
  }

  .ll-service-extension .ll-se-chip-overflow__items {
    display: flex;
    gap: var(--ll-se-space-2);
    align-items: center;
    min-inline-size: 0;
  }

  .ll-service-extension .ll-se-chip-overflow__chip,
  .ll-service-extension .ll-se-chip-overflow__trigger,
  .ll-service-extension .ll-se-chip-overflow__popover-item,
  .ll-service-extension .ll-se-chip-overflow__popover-note {
    min-block-size: 2.25rem;
    padding: var(--ll-se-space-1) var(--ll-se-space-3);
    color: var(--ll-se-color-text-primary);
    overflow-wrap: anywhere;
    cursor: pointer;
    background: var(--ll-se-color-surface-raised);
    border: 0.0625rem solid var(--ll-se-color-border);
    border-radius: var(--ll-se-radius-pill);
  }

  .ll-service-extension .ll-se-chip-overflow__chip {
    flex: 0 1 auto;
    min-inline-size: 0;
  }

  .ll-service-extension .ll-se-chip-overflow__trigger {
    flex: 0 0 auto;
    font-weight: 700;
  }

  .ll-service-extension .ll-se-chip-overflow__popover-note {
    color: var(--ll-se-color-text-secondary);
    cursor: default;
  }

  .ll-service-extension .ll-se-chip-overflow__popover {
    position: absolute;
    z-index: var(--ll-se-z-popover);
    inset-block-start: calc(100% + var(--ll-se-space-2));
    inset-inline-end: 0;
    display: grid;
    gap: var(--ll-se-space-2);
    max-inline-size: min(22rem, 90vw);
    max-block-size: 18rem;
    padding: var(--ll-se-space-3);
    overflow: auto;
    background: var(--ll-se-color-surface-raised);
    border: 0.0625rem solid var(--ll-se-color-border);
    border-radius: var(--ll-se-radius-md);
    box-shadow: var(--ll-se-shadow-raised);
  }

  .ll-service-extension .ll-se-chip-overflow__popover[hidden],
  .ll-service-extension .ll-se-chip-overflow [hidden] {
    display: none;
  }
}