@layer components {
  /* Inline Edit Component
     Click label to edit - label is replaced by input field */

  .inline-edit {
    display: inline-flex;
    align-items: center;
    gap: var(--inline-space);
  }

  /* Label (clickable to edit) */
  .inline-edit__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5ch;
    cursor: pointer;
    border-block-end: 1px dotted var(--color-border-strong);
    transition: border-color var(--duration-fast) var(--ease-out);

    &:hover {
      border-color: var(--color-ink);
      font-weight: 500;
    }

    &:hover .inline-edit__icon {
      opacity: 1;
    }
  }

  .inline-edit__icon {
    opacity: 0;
    color: var(--color-ink-muted);
    transition: opacity var(--duration-fast) var(--ease-out);

    & svg {
      display: block;
      inline-size: 0.75rem;
      block-size: 0.75rem;
    }
  }

  /* Input (hidden by default) - compact inline input */
  .inline-edit .inline-edit__input {
    display: none;
    inline-size: auto;
    padding-block: 0.375em;
    padding-inline: 0.75em;
    font-size: var(--text-sm);
    font-family: inherit;
    line-height: var(--leading-normal);
    color: var(--color-ink);
    background: oklch(var(--lch-white));
    border: 1px solid var(--color-border-strong);
    border-radius: var(--input-radius);

    &:focus {
      outline: none;
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px oklch(var(--lch-primary) / 15%);
    }
  }

  /* Action buttons (hidden by default) - use standard pill button styling */
  .inline-edit__btn {
    display: none;

    & svg {
      inline-size: 0.875rem;
      block-size: 0.875rem;
    }
  }

  /* Editing state */
  .inline-edit--editing {
    .inline-edit__label {
      display: none;
    }

    &.inline-edit .inline-edit__input {
      display: block;
    }

    .inline-edit__btn {
      display: inline-flex;
    }
  }

  /* Saving state */
  .inline-edit--saving {
    opacity: 0.6;
    pointer-events: none;
  }

  /* Inline Select Component
     Customizable native select with styled options (appearance: base-select) */

  select.inline-select,
  select.inline-select::picker(select) {
    appearance: base-select;
  }

  select.inline-select {
    border: none;
    background: transparent;
    font: inherit;
    cursor: pointer;
    outline: none;
    inline-size: auto;

    &:focus,
    &:focus-visible,
    &:focus-within {
      outline: none !important;
      border: none !important;
      box-shadow: none !important;
    }

    & > button:focus,
    & > button:focus-visible {
      outline: none !important;
      border: none !important;
      box-shadow: none !important;
    }

    /* Show chevron icon on hover to hint editability */
    &::picker-icon {
      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");
      opacity: 0;
      transition: opacity var(--duration-fast) var(--ease-out);
      margin-inline-start: 0.25em;
    }

    &:hover::picker-icon,
    &:open::picker-icon {
      opacity: 1;
    }

    /* Style the button to look like a badge */
    & > button {
      border: none;
      background: transparent;
      padding: 0;
      cursor: pointer;
    }

    /* Ensure selectedcontent displays the cloned option content */
    & selectedcontent {
      display: inline-block;
    }
  }

  /* Style the dropdown picker */
  select.inline-select::picker(select) {
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    padding: 0.5rem;
    background: oklch(var(--lch-canvas));
    box-shadow:
      0 3px 8px oklch(0% 0 0 / 8%),
      0 2px 5px oklch(0% 0 0 / 8%),
      0 1px 1px oklch(0% 0 0 / 8%);
    width: fit-content;
    min-width: auto;
  }

  /* Style the options */
  select.inline-select option {
    padding: 0.375rem;
    cursor: pointer;

    &:not(:last-child) {
      margin-block-end: 0.375rem;
    }

    &:hover {
      background: oklch(0% 0 0 / 5%);
      border-radius: var(--radius-sm);
    }

    &:checked {
      text-decoration: underline;
      text-decoration-color: var(--color-ink-muted);
      text-underline-offset: 2px;
    }

    /* Hide checkmark, we show selection via outline */
    &::checkmark {
      display: none;
    }
  }

  /* Option inner span inherits status-badge styling */
  .inline-select__option {
    display: block;
  }

  /* Saving state */
  select.inline-select.inline-select--saving {
    opacity: 0.6;
    pointer-events: none;
  }
}