input:checked + .fancy-checkbox {
  background-color: var(--color-accent-600);
  border-color: var(--color-accent-600);

  svg {
    width: .8em;
    display: block !important;
  }

  span {
    display: block !important;
  }
}

.form-label {
  @apply dark:text-white;
}

.field_with_errors {
  @apply w-full;

  input {
    @apply border-red-500 w-full dark:border-red-400;
  }
}

.form-input {
  @apply block relative rounded-md border border-gray-300 dark:border-gray-700 focus:outline-primary-600 px-3 py-2 w-full appearance-none
}

.EasyMDEContainer .CodeMirror {
  @apply dark:!bg-gray-700 dark:!text-white dark:!border-gray-700;
}

.EasyMDEContainer {
  .editor-toolbar {
    @apply dark:!border-gray-700 dark:!text-white;
  }

  button {
    @apply dark:hover:!bg-gray-700;
  }

  i.separator {
    @apply dark:!border-gray-700;
  }
}

.template-card-buttons-container form input {
  @apply text-sm p-2;
}

.registrations label {
  @apply block text-sm font-medium text-gray-700 mb-2;
}

.toggle-switch-component {
  @apply flex items-center gap-2;
}

.slide-menu-container .toggle-switch-component {
  @apply justify-between;

  label {
    @apply text-white;
  }
}