@import 'tailwindcss';

@theme {
  --font-sans: Roboto, sans-serif;
}

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }

  html {
    font-display: swap;
  }

  @media (prefers-color-scheme: dark) {
    a,
    a:hover,
    a:visited {
      @apply text-sky-300;
    }
  }
}

@layer utilities {
  .loading {
    animation: loading 1s linear infinite alternate;
  }

  @keyframes loading {
    0% {
      opacity: 0.6;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0.6;
    }
  }
}

markdown {
  pre {
    @apply p-4 overflow-auto rounded-sm border text-sm border-neutral-900 bg-neutral-50;

    @media (prefers-color-scheme: dark) {
      @apply bg-neutral-900 border-neutral-50;
    }
  }

  blockquote {
    @apply py-0.5 px-4 mx-0 my-3 border-l-8 rounded-sm border-neutral-900 bg-neutral-50;

    @media (prefers-color-scheme: dark) {
      @apply bg-neutral-900 border-neutral-50;
    }
  }

  code {
    @apply py-0.5 px-1 bg-neutral-50;

    @media (prefers-color-scheme: dark) {
      @apply bg-neutral-900;
    }
  }

  h1 {
    @apply text-3xl font-bold my-5 md:text-4xl;
  }

  h2 {
    @apply text-2xl font-bold mb-4 mt-8 md:text-3xl;
  }

  h3 {
    @apply text-xl font-bold my-3 md:text-2xl;
  }

  h4 {
    @apply text-lg font-bold my-2 md:text-lg;
  }

  p {
    @apply my-3;
  }

  ul {
    @apply list-disc pl-10;
  }
}

lib-page-toolbar {
  .mat-mdc-form-field-subscript-wrapper {
    @apply hidden;
  }

  .mat-mdc-text-field-wrapper.mdc-text-field--outlined
    .mat-mdc-form-field-infix {
    @apply py-1 min-h-[34px];
  }
}
