@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;
  }
}