/* Tailwind */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /** Typography */
  html {
    @apply bg-brand-appBg;
  }
  p {
    @apply text-p mb-1;
    letter-spacing: 0.4px;
  }

  h1, .h1 {
    @apply text-3xl mb-1;
    letter-spacing: 0.84px;
  }

  h2, .h2 {
    @apply text-2xl mb-1;
    letter-spacing: 0.4px;
  }

  h3, .h3 {
    @apply text-xl mb-1;
    letter-spacing: 0.4px;
  }

  h4, .h4 {
    @apply text-p mb-1;
    letter-spacing: 0.4px;
  }

  h5, .h5 {
    @apply text-p mb-1;
    letter-spacing: 0.4px;
  }
  h6, .h6 {
    @apply text-p-small mb-1;
    letter-spacing: 0.4px;
  }

  input, textarea {
    &::placeholder {
      @apply text-grey-light;
      letter-spacing: 0.4px;
    }
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar {
    -webkit-appearance: none;
    scrollbar-gutter: auto;
    height: 10px;
    width: 10px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    @apply bg-brand-border2;
    border-radius: 0px;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    @apply bg-primary;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    cursor: pointer;
    @apply bg-brand-border3;
  }

  .fw-scrollable-horizontal {
    overflow-x: auto;
    overflow-y: hidden;
  }

}