@layer modules {
  .stickie-board {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 2rem 1.75rem;
    padding-block: 0.75rem 1.25rem;
  }

  .stickie-board--compact {
    --stickie-width: 13rem;
    --stickie-height: 8rem;
    gap: 1.5rem 1.25rem;
  }

  .stickie-board--compact .stickie--stuck {
    width: 100%;
  }

  .stickie-note {
    --stickie-tilt: -1.4deg;
    --stickie-delay: 0ms;

    display: flex;
    flex-direction: column;
    flex: 0 1 var(--stickie-width, 16rem);
    max-width: 100%;
    scroll-margin-block: 6rem;
  }

  .stickie-note:nth-child(2n) { --stickie-tilt: 1.1deg; }
  .stickie-note:nth-child(3n) { --stickie-tilt: -0.5deg; }
  .stickie-note:nth-child(4n) { --stickie-tilt: -1.9deg; }
  .stickie-note:nth-child(5n) { --stickie-tilt: 1.8deg; }

  .stickie-note:nth-child(2) { --stickie-delay: 70ms; }
  .stickie-note:nth-child(3) { --stickie-delay: 140ms; }
  .stickie-note:nth-child(4) { --stickie-delay: 210ms; }
  .stickie-note:nth-child(n+5) { --stickie-delay: 280ms; }

  .stickie {
    --stickie-paper: var(--color-yellow-200);
    --stickie-shade: var(--color-yellow-300);
    --stickie-ink: var(--color-amber-900);
    --stickie-edge: 0 1px 1px rgb(0 0 0 / 0.1);
    --stickie-crease: inset 0 -14px 18px -18px rgb(0 0 0 / 0.35);
    --stickie-cast: 0 3px 4px -3px rgb(0 0 0 / 0.2), 0 14px 18px -12px rgb(0 0 0 / 0.45);

    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: var(--stickie-height, 10.5rem);
    padding: 1.15rem 1.1rem 0.9rem;
    color: var(--stickie-ink);
    background-color: var(--stickie-paper);
    background-image: linear-gradient(
      177deg,
      color-mix(in srgb, var(--stickie-paper), var(--color-white) 45%) 0 20%,
      var(--stickie-paper) 62%,
      var(--stickie-shade) 100%
    );
    border-radius: 2px 2px 8px 3px;
    box-shadow: var(--stickie-edge), var(--stickie-cast), var(--stickie-crease);
    rotate: var(--stickie-tilt);
    animation: stickie-drop 0.55s var(--ease-out) var(--stickie-delay) backwards;
    transition: rotate 0.25s var(--ease-out), translate 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
  }

  .stickie::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2.75rem;
    border-radius: inherit;
    background-image: linear-gradient(to bottom, rgb(0 0 0 / 0.05), rgb(0 0 0 / 0));
    pointer-events: none;
  }

  .stickie--client {
    --stickie-paper: var(--color-blue-100);
    --stickie-shade: var(--color-blue-200);
    --stickie-ink: var(--color-blue-900);
  }

  .stickie__body {
    font-size: var(--text-base);
    line-height: var(--leading-snug);
    font-weight: var(--font-weight-medium);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .stickie__foot,
  .stickie-note__mark,
  .stickie-archive__title {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-wide);
  }

  .stickie__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.4rem 0.5rem;
    color: color-mix(in srgb, var(--stickie-ink), transparent 35%);
  }

  .stickie__author {
    margin-inline-end: auto;
  }

  .stickie__when {
    flex: none;
  }

  /* ----- Writing on one ----- */

  .stickie--pad {
    --stickie-height: 12rem;

    cursor: text;
  }

  .stickie--pad:has(.stickie__input:focus-visible) {
    outline: var(--focus-ring-size) dashed var(--focus-ring-color);
    outline-offset: calc(var(--focus-ring-offset) * 2);
  }

  .stickie__input {
    flex: 1;
    width: 100%;
    padding: 0;
    border: 0;
    background-color: transparent;
    color: inherit;
    font: inherit;
    line-height: var(--leading-snug);
    resize: none;

    &::placeholder {
      color: color-mix(in srgb, var(--stickie-ink), transparent 55%);
    }

    &:focus {
      outline: none;
    }
  }

  .stickie__count {
    margin-inline-end: auto;
    font-variant-numeric: tabular-nums;
  }

  .stickie__submit {
    --btn-padding: 0.3rem 0.65rem;
    --btn-font-weight: var(--font-weight-semibold);
    --btn-bg: color-mix(in srgb, var(--stickie-ink), transparent 86%);
    --btn-color: var(--stickie-ink);

    flex: none;

    &[aria-disabled="true"] {
      --btn-bg: color-mix(in srgb, var(--stickie-ink), transparent 94%);
      --btn-color: color-mix(in srgb, var(--stickie-ink), transparent 55%);
      --btn-hover-brightness: 1;

      cursor: not-allowed;
    }
  }

  /* ----- Stuck on top of the note above ----- */

  .stickie--stuck {
    --stickie-tilt: 2.2deg;
    --stickie-height: 8.5rem;
    --stickie-delay: 240ms;

    align-self: flex-end;
    width: 92%;
    margin-block-start: -0.5rem;
  }

  .stickie--pad.stickie--stuck {
    --stickie-height: 9.5rem;
  }

  /* ----- Taken down ----- */

  .stickie--taken-down {
    opacity: 0.88;
    filter: saturate(0.7);
    box-shadow:
      0 1px 1px rgb(0 0 0 / 0.07),
      0 6px 8px -6px rgb(0 0 0 / 0.28);
  }

  .stickie-note__mark {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-block-start: 0.85rem;
    padding-inline-start: 0.2rem;
    color: var(--color-text-muted);
  }

  .stickie-note__mark-icon {
    width: 0.85rem;
    height: 0.85rem;
    color: var(--color-positive);
  }

  /* ----- Taking one down ----- */

  .stickie-takedown {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .stickie-takedown__acknowledge {
    margin-block-start: 0.6rem;
  }

  .stickie-note__takeback {
    margin-block-start: 0.6rem;
  }

  /* ----- Picking one up ----- */

  .stickie-note__pickup {
    display: block;
    color: inherit;
    text-decoration: none;
  }

  @media (any-hover: hover) {
    .stickie-note:hover .stickie {
      --stickie-cast: 0 4px 6px -3px rgb(0 0 0 / 0.2), 0 22px 28px -16px rgb(0 0 0 / 0.5);

      rotate: 0deg;
      translate: 0 -3px;
    }
  }

  .stickie-note__pickup:focus-visible {
    outline: none;

    & .stickie {
      rotate: 0deg;
      outline: var(--focus-ring);
      outline-offset: calc(var(--focus-ring-offset) * 3);
    }
  }

  /* ----- The archive ----- */

  .stickie-archive {
    margin-block-start: 1rem;
    padding-block-start: 1.25rem;
    border-block-start: 1px dashed var(--color-border);
  }

  .stickie-archive__title {
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  /* ----- The dashboard board ----- */

  .stickie-banner {
    padding: 1.25rem 1.5rem 0.5rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .stickie-banner__title {
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
  }

  .stickie-banner__subtitle {
    margin-block-start: 0.15rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-text-muted);
  }

  @media (prefers-reduced-motion: reduce) {
    .stickie {
      animation: none;
      transition: none;
    }
  }
}