@layer modules {
  .note-template-form {
    display: contents;
  }

  .note-template-form__actions {
    display: flex;
    gap: 0.5rem;
  }

  .note-template-form__errors {
    background-color: var(--color-red-50);
    color: var(--color-red-500);
    padding-inline: 0.75rem;
    padding-block: 0.5rem;
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    margin-top: 0.75rem;
  }

  .note-template-form__errors-list {
    list-style-type: disc;
    margin-left: 1.5rem;
  }

  .note-template-form__field {
    margin-block: 1.25rem;
  }

  .note-template-form__input {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    border-radius: var(--radius-md);
    box-shadow: 0 1px 2px 0 var(--color-black-5);
    border-color: var(--color-gray-300);

    @media (min-width: 40rem) {
      font-size: var(--text-sm);
      line-height: var(--text-sm--line-height);
    }

    &:focus {
      --focus-ring-color: var(--color-blue-500);
    }
  }

  .note-template-form__input--invalid {
    border-color: var(--color-red-300);

    &:focus {
      --focus-ring-color: var(--color-red-500);
    }
  }

  .note-template-form__editor {
    width: 100%;
    margin-top: 0.25rem;
    border-radius: var(--radius-md);
    box-shadow: 0 1px 2px 0 var(--color-black-5);

    @media (min-width: 40rem) {
      font-size: var(--text-sm);
      line-height: var(--text-sm--line-height);
    }
  }

  .note-template-page {
    width: 100%;

    @media (min-width: 48rem) {
      width: 66.6667%;
    }
  }

  .note-template-page--new {
    margin-bottom: 2rem;
  }

  .note-template-page__back {
    margin-bottom: 1rem;
  }

  .note-template-page__heading {
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-3xl);
    line-height: var(--text-3xl--line-height);
  }

  .note-template-notice {
    padding-block: 0.5rem;
    padding-inline: 0.75rem;
    background-color: var(--color-green-50);
    margin-bottom: 1.25rem;
    color: var(--color-green-500);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    display: inline-block;
  }

  .note-template-show {
    margin-inline: auto;
    width: 100%;
    display: flex;
  }

  .note-template-show__inner {
    margin-inline: auto;
  }

  .note-template-card {
    background-color: var(--color-white);
    box-shadow: 0 10px 15px -3px var(--color-black-10), 0 4px 6px -4px var(--color-black-10);
    border-radius: var(--radius-lg);
    overflow: hidden;
    width: 100%;

    @media (min-width: 48rem) {
      width: 50rem;
    }
  }

  .note-template-card__header {
    background-color: var(--color-blue-600);
    color: var(--color-white);
    padding-inline: 1.5rem;
    padding-block: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .note-template-card__title {
    font-size: var(--text-2xl);
    line-height: var(--text-2xl--line-height);
    font-weight: var(--font-weight-semibold);
  }

  .note-template-card__actions {
    display: flex;

    & > :not(:last-child) {
      margin-inline-end: 1rem;
    }
  }

  .note-template-card__body {
    padding: 1.5rem;
  }

  .note-template-card__sections {
    & > :not(:last-child) {
      margin-block-end: 1.5rem;
    }
  }

  .note-template-card__divider {
    margin-block: 1.5rem;
    border-top-width: 1px;
    border-top-style: solid;
    border-color: var(--color-gray-200);
  }

  .note-template-card__meta {
    margin-top: 1.5rem;
  }

  .note-template-card__meta-list {
    & > :not(:last-child) {
      margin-block-end: 0.75rem;
    }
  }

  .note-templates-index {
    width: 100%;
    max-width: 76rem;
  }

  .note-templates-index__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .note-templates-index__title {
    font-size: var(--text-2xl);
    line-height: var(--text-2xl--line-height);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
  }

  .note-templates-index__description {
    margin-top: 0.125rem;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    text-wrap: pretty;
  }

  .note-templates-index__new {
    --btn-radius: var(--radius-lg);
    flex: none;
    box-shadow:
      inset 0 1px 0 var(--color-white-20),
      0 1px 2px var(--color-black-10),
      0 4px 10px -4px color-mix(in srgb, transparent, var(--color-blue-700) 45%);
    transition-property: color, background-color, filter, scale, box-shadow;

    &:active {
      scale: 0.96;
    }
  }

  .note-templates-index__new-icon {
    height: 1.25rem;
    width: 1.25rem;
  }

  .note-templates-index__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 20rem));
    gap: 2rem 1.5rem;
  }

  .note-template-tile {
    display: block;
    color: inherit;

    &:active .note-template-tile__stack {
      scale: 0.96;
    }
  }

  .note-template-tile__stack {
    position: relative;
    margin-right: 0.5rem;
    margin-bottom: 0.875rem;
    transition: 180ms var(--ease-out);
    transition-property: translate, scale;

    &::before,
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: var(--radius-xl);
      background-color: var(--color-white);
      box-shadow: 0 1px 2px var(--color-black-10);
      outline: 1px solid var(--color-black-5);
      transition: 180ms var(--ease-out);
      transition-property: translate, rotate;
    }

    &::before {
      translate: 0.5rem 0.5rem;
      rotate: 0.5deg;
      background-color: color-mix(in srgb, var(--color-white), var(--color-blue-50) 14%);
    }

    &::after {
      translate: 0.25rem 0.25rem;
      rotate: -0.25deg;
      background-color: color-mix(in srgb, var(--color-white), var(--color-gray-50) 35%);
    }

    @media (any-hover: hover) {
      .note-template-tile:hover & {
        translate: 0 -0.125rem;

        &::before {
          translate: 0.625rem 0.625rem;
          rotate: 0.9deg;
        }

        &::after {
          translate: 0.3125rem 0.3125rem;
          rotate: -0.45deg;
        }
      }
    }
  }

  .note-template-tile__paper {
    position: relative;
    z-index: 1;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background-color: var(--color-white);
    box-shadow:
      0 1px 2px var(--color-black-10),
      0 8px 20px -10px color-mix(in srgb, transparent, var(--color-slate-900) 28%);
    outline: 1px solid var(--color-black-10);
    transition: 180ms var(--ease-out);
    transition-property: box-shadow;

    &::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 28%;
      background: linear-gradient(to bottom, transparent, var(--color-white-90));
      pointer-events: none;
    }

    @media (any-hover: hover) {
      .note-template-tile:hover & {
        box-shadow:
          0 2px 4px var(--color-black-10),
          0 14px 28px -12px color-mix(in srgb, transparent, var(--color-slate-900) 34%);
      }
    }
  }

  .note-template-tile__preview {
    --preview-scale: 0.52;

    position: absolute;
    inset: 1.25rem;
    width: calc((100% - 2.5rem) / var(--preview-scale));
    color: var(--color-gray-700);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    pointer-events: none;
    transform: scale(var(--preview-scale));
    transform-origin: top left;

    & :is(h1, h2, h3, h4, h5, h6) {
      color: var(--color-gray-900);
    }

    & :first-child {
      margin-top: 0;
    }
  }

  .note-template-tile__details {
    padding-inline: 0.125rem 0.625rem;
  }

  .note-template-tile__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    transition: var(--default-transition-duration) var(--ease-out);
    transition-property: color;

    .note-template-tile:hover & {
      color: var(--color-blue-700);
    }
  }

  .note-template-tile__updated {
    margin-top: 0.125rem;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
  }

  .note-templates-index__empty {
    grid-column: span 3 / span 3;
    text-align: center;
    margin-block: 2.5rem;
  }

  .note-templates-index__empty-icon-wrap {
    display: inline-block;
    padding: 1rem;
    border-radius: var(--radius-full);
    background-color: var(--color-gray-50);
    margin-bottom: 1rem;
  }

  .note-templates-index__empty-icon {
    height: 2rem;
    width: 2rem;
    color: var(--color-gray-400);
  }

  .note-templates-index__empty-text {
    color: var(--color-gray-500);
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
  }

  @media (max-width: 32rem) {
    .note-templates-index__header {
      align-items: flex-start;
    }

    .note-templates-index__description {
      max-width: 16rem;
    }

    .note-templates-index__new {
      --btn-padding: 0.5rem 0.75rem;
    }
  }
}