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

html,
body {
  -ms-overflow-style: none; /* IE and Edge /
scrollbar-width: none; / Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
html::-webkit-scrollbar {
  display: none;
}

$motiva: (
  ("MotivaSansThin.ttf", "ttf", 100, normal),
  ("MotivaSansLight.woff.ttf", "woff", 300, normal),
  ("MotivaSansRegular.woff.ttf", "woff", 400, normal),
  ("MotivaSansMedium.woff.ttf", "woff", 500, normal),
  ("MotivaSansBold.woff.ttf", "woff", 600, normal),
  ("MotivaSansExtraBold.ttf", "woff", 700, normal),
  ("MotivaSansBlack.woff.ttf", "woff", 900, normal)
);

$helvetica: (
  ("Helvetica.woff", "woff", 400, normal),
  ("Helvetica-Oblique.woff", "woff", 400, italic),
  ("Helvetica-Bold.woff", "woff", 600, normal),
  ("Helvetica-BoldOblique.woff", "woff", 600, italic),
  ("helvetica-light-587ebe5a59211.woff2", "woff2", 300, normal)
);

@each $file, $format, $weight, $style in $motiva {
  @font-face {
    font-family: "Motiva Sans";
    src: url("/fonts/motiva/#{$file}") format($format);
    font-weight: $weight;
    font-style: $style;
  }
}

@each $file, $format, $weight, $style in $helvetica {
  @font-face {
    font-family: "Helvetica";
    src: url("/fonts/helvetica/#{$file}") format($format);
    font-weight: $weight;
    font-style: $style;
  }
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter/InterVariable.ttf");
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter/InterVariable-Italic.ttf");
  font-style: italic;
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
  scrollbar-width: 4px;
  scrollbar-color: #52525b #00000000;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 4px;
}

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

*::-webkit-scrollbar-thumb {
  background-color: #52525b;
  border-radius: 10px;
  border: 3px solid #52525b;
}