@layer pages {
  .wrapper:has(> .notes > .feedback) {
    isolation: isolate;
  }

  .feedback {
    position: relative;
    min-block-size: 400px;
    overflow: hidden;
    border-radius: inherit;

    & :is(.front, .back) {
      position: absolute;
      inline-size: 100%;
      min-block-size: 400px;
      padding: var(--space-32);
      transition:
        translate 0.4s ease-in-out,
        visibility 0s;
    }

    & .front {
      position: relative;
      z-index: 900;
    }

    & .back {
      inset: 0;
      z-index: 800;
      display: grid;
      place-content: center;
      min-block-size: 100%;
      visibility: hidden;
      transition-delay: 0s, 0.4s;
      text-align: center;
      translate: 100% 0;

      & h2 {
        margin-block: 0 var(--space-24);
        margin-inline: 0;
        font-size: var(--text-h1);
        line-height: var(--leading-h1);
      }
    }

    &.success {
      & .front {
        visibility: hidden;
        transition-delay: 0s, 0.4s;
        translate: -100% 0;
      }

      & .back {
        z-index: 1000;
        visibility: visible;
        transition-delay: 0s;
        translate: 0 0;
      }
    }

    & form {
      display: grid;
      grid-template-columns: 100px minmax(0, 360px) minmax(0, 1fr);
      align-items: start;

      gap: var(--space-20) 0;

      &[aria-busy='true'] .button {
        cursor: progress;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      & :is(.front, .back),
      &.success :is(.front, .back) {
        transition: none;
      }
    }

    & label {
      grid-column: 1;
      padding-block-start: 5px;
    }

    & label:has(+ textarea) {
      grid-column: 1 / 3;
      padding-block-start: 0;
    }

    & input[type='text'] {
      grid-column: 2;
    }

    & :is(input[type='text'], textarea) {
      inline-size: 100%;
    }

    & textarea {
      grid-column: 1 / 3;
      min-block-size: 8lh;
      max-block-size: 24lh;
      margin-block-start: calc(-1 * var(--space-12));
      resize: vertical;
      field-sizing: content;
    }

    & .description {
      grid-column: 3;
      block-size: 0;
      margin: 0;
      padding-block-start: 5px;
      padding-inline-start: var(--space-32);
      overflow: visible;
    }

    & textarea + .description {
      margin-block-start: calc(-1 * var(--space-12));
    }

    & p.actions {
      grid-column: 1 / -1;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-12) var(--space-32);
      margin: 0;

      & em {
        color: var(--color-muted);
        font-size: var(--text-small);
      }
    }

    @media (max-width: 950px) {
      & .description span {
        display: none;
      }
    }

    @media (max-width: 790px) {
      & form {
        grid-template-columns: 100px minmax(0, 1fr);
      }

      & .description {
        display: none;
        grid-column: 2;
        block-size: auto;
        margin-block-start: calc(-1 * var(--space-12));
        padding-inline-start: 0;
      }

      & textarea + .description {
        grid-column: 1 / -1;
      }

      & :is(input, textarea):user-invalid + .description {
        display: block;
      }

      & :is(label:has(+ textarea), textarea) {
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 600px) {
      min-block-size: 0;

      & .front {
        min-block-size: 0;
        padding: var(--space-20);
      }

      & .back {
        padding: var(--space-20);
      }

      & form {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
      }

      &
        :is(
          label,
          label:has(+ textarea),
          input[type='text'],
          textarea,
          .description,
          textarea + .description
        ) {
        grid-column: 1;
      }

      & textarea {
        margin-block-start: 0;
      }

      & :is(input[type='text'], textarea) {
        margin-block-end: var(--space-12);
      }

      & :is(.description, textarea + .description) {
        margin-block: calc(-1 * var(--space-8)) var(--space-12);
        margin-inline: 0;
        padding-block-start: 0;
      }

      & p.actions {
        margin-block-start: var(--space-8);
      }
    }
  }
}