@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    -webkit-tap-highlight-color: transparent;
  }

  ::-webkit-scrollbar {
    width: .25em;
    height: .25em;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    border: .25em solid #9aa1b4;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    border: .25em solid #727886;
  }

  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .heading-1 {
    @apply font-extrabold text-3.25xl
  }

  .heading-2 {
    @apply font-normal text-3.25xl
  }

  .heading-3 {
    @apply font-extrabold text-2xl
  }

  .heading-4 {
    @apply font-extrabold text-xl
  }

  .heading-5 {
    @apply text-xl leading-10
  }

  .subtitle-1 {
    @apply font-extrabold text-base
  }

  .subtitle-2 {
    @apply font-semibold text-base
  }

  .subtitle-3 {
    @apply font-extrabold text-sm
  }

  .subtitle-4 {
    @apply font-semibold text-sm
  }

  .subtitle-5 {
    @apply font-semibold text-xs
  }

  .body-1 {
    @apply font-normal text-sm
  }

  .body-2 {
    @apply font-normal text-base
  }

  .caption {
    @apply font-normal text-xs
  }

  .overline-1 {
    @apply font-extrabold text-xs
  }

  .overline-2 {
    @apply font-extrabold text-2xs
  }

}

/* This utility class handles the bottom bar on newer iPhones without the “Home” button. 
Without it, some elements can fall under the bar, making them unreadable and tough to tap. */
@layer utilities {
  .pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
  }
}