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

// Fonts
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

//Globals

body {
  @apply bg-black m-0 select-none;
  -ms-overflow-style: none;
  scrollbar-width: none;

  // Disable selection, might wanna comment when debugging
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */

  overscroll-behavior: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
button,
a {
  @apply font-titles text-white font-medium m-0;
}

p,
span,
li,
label {
  @apply font-default text-white;
}

button,
a {
  @apply font-medium drop-shadow-20;
}

button,
input {
  @apply border-none bg-transparent;

  &[type='number'] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
  }
  &[type='number']::-webkit-inner-spin-button,
  &[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
  }
}

.input-cyan {
  @apply py-2 px-2.5 font-titles border border-solid border-cyan bg-white/80 rounded;
  &:focus,
  &:focus-visible {
    @apply outline-2 outline-cyan;
  }
}

button {
  @apply text-center;

  &.btn-cyan {
    @apply bg-cyan/50 border border-solid border-white/25 rounded drop-shadow-20;

    &.active,
    &:hover {
      @apply bg-cyan;
    }
  }

  &.btn-bordeaux {
    @apply bg-bordeaux/50 border border-solid border-white/25 rounded drop-shadow-20;

    &.active,
    &:hover {
      @apply bg-bordeaux;
    }
  }

  &:hover {
    @apply cursor-pointer;
  }
}

::-webkit-scrollbar {
  @apply hidden;
}