@layer components {
  .step {
    display: grid;
    grid-template-columns: 1em auto auto;
    gap: calc(var(--inline-space) * 2/3);
    inline-size: auto;
  }

  .step__content {
    --input-border-radius: 0;
    --input-border-size: 0;
    --input-padding: 0;

    border-bottom: 1px solid transparent;
    color: currentColor;
    font-weight: 500;
    margin-block-end: calc(var(--block-space) * 1/3);

    &:is(a, input[type=text]) {
      --hover-size: 0;
    }

    .step:has(:checked) & {
      opacity: 0.7;
      text-decoration: line-through;
    }

    &::placeholder {
      color: var(--card-color);
    }

    &:is(input) {
      max-inline-size: 70ch;
      min-inline-size: 30ch;

      @supports (field-sizing: content) {
        field-sizing: content;
        max-inline-size: 100%;
        min-inline-size: 15ch;
      }
    }
  }

  .step__content--edit {
    border-bottom-color: currentColor;
  }

  .steps {
    contain: inline-size;
    display: grid;
    list-style: none;
    margin: 0;
    max-inline-size: 100%;
    padding: 0;
  }

  .steps__icon {
    --icon-size: 0.875em;

    background-color: var(--card-color);
    block-size: 1.3em;
    border-radius: 50%;
    color: var(--color-ink-inverted);
    display: grid;
    inline-size: 1.3em;
    place-content: center;
  }
}