@import '@shared/styles/main.css';

.Content,
.ProseMirror {
  &:focus-visible {
    outline: none;
  }

  blockquote {
    @apply border-l-4 border-l-gray-200 px-3 py-2;
  }

  ol {
    list-style: decimal;
  }

  ul {
    list-style: disc;
  }

  ol,
  ul {
    @apply ltr:pl-2 rtl:pr-2;

    list-style-position: inside;

    p {
      display: inline-block;
    }
  }

  h1 {
    @apply mb-2 mt-1 text-2xl font-bold;
  }

  h2 {
    @apply my-1 text-xl font-bold;
  }

  h3 {
    @apply my-1 text-lg font-bold;
  }

  a {
    @apply text-blue;
  }
}

@layer base {
  [type='text'],
  [type='password'],
  [type='email'],
  [type='number'],
  [type='url'],
  [type='date'],
  [type='datetime-local'],
  [type='time'],
  [type='search'],
  [type='tel'],
  select,
  select[multiple] {
    @apply p-2;
  }

  textarea {
    @apply px-2 py-1;
  }
}

@layer components {
  .absolute-floating-input:focus-within label,
  .absolute-floating-input.formkit-outer[data-populated] label {
    @apply -translate-y-2 scale-75 opacity-75 ltr:translate-x-[2px] rtl:translate-x-6;
  }

  .floating-input.formkit-outer[data-populated] label {
    @apply text-xs opacity-75;
  }

  .floating-textarea:focus-within label,
  .floating-textarea.formkit-outer[data-populated] label {
    @apply translate-y-0 text-xs opacity-75;
  }
}