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

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

  .note-templates-index__title {
    font-size: var(--text-2xl);
    line-height: var(--text-2xl--line-height);
    font-weight: var(--font-weight-bold);
  }

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

  .note-templates-index__grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.5rem;

    @media (min-width: 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    @media (min-width: 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .note-template-tile {
    display: block;
    background-color: var(--color-white);
    box-shadow: 0 4px 6px -1px var(--color-black-10), 0 2px 4px -2px var(--color-black-10);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.3s var(--default-transition-timing-function);

    &:hover {
      box-shadow: 0 10px 15px -3px var(--color-black-10), 0 4px 6px -4px var(--color-black-10);
      translate: 0 -0.25rem;
      scale: 102% 102%;
    }
  }

  .note-template-tile__bar {
    border-left-width: 4px;
    border-left-style: solid;
    border-color: var(--color-blue-500);
    height: 100%;
    padding: 1rem;
  }

  .note-template-tile__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .note-template-tile__label-group {
    display: flex;
    align-items: center;

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

  .note-template-tile__icon-badge {
    padding: 0.5rem;
    background-color: var(--color-blue-50);
    border-radius: var(--radius-lg);
  }

  .note-template-tile__icon {
    height: 1.25rem;
    width: 1.25rem;
    color: var(--color-blue-600);
  }

  .note-template-tile__title {
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    transition: var(--default-transition-duration) var(--default-transition-timing-function);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;

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

  .note-template-tile__chevron {
    height: 1.25rem;
    width: 1.25rem;
    color: var(--color-gray-400);
    transition: var(--default-transition-duration) var(--default-transition-timing-function);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;

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

  .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);
  }
}