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

@layer base {
  @font-face {
    font-family: Bebas;
    font-weight: 400;
    src: url(/fonts/Bebas-Regular.otf) format("opentype");
  }
}

@layer components {
  input[type='range'] {
    @apply w-full bg-transparent appearance-none my-1;
  }
  input[type='range']:focus {
    @apply outline-none;
  }
  input[type='range']::-webkit-slider-runnable-track {
    @apply bg-gray-300 dark:bg-gray-500 border-none rounded-none w-full h-3 cursor-pointer;
  }
  input[type='range']::-webkit-slider-thumb {
    margin-top: -7px;
    @apply w-6 h-6 bg-blue-700 dark:bg-blue-500 border-none rounded-md cursor-pointer appearance-none;
  }
  input[type='range']:focus::-webkit-slider-runnable-track {
    @apply bg-gray-300 dark:bg-gray-500;
  }
  input[type='range']::-moz-range-track {
    @apply bg-gray-300 dark:bg-gray-500 border-none rounded-none w-full h-3 cursor-pointer;
  }
  input[type='range']::-moz-range-thumb {
    @apply w-6 h-6 bg-blue-700 dark:bg-blue-500 border-none rounded-md cursor-pointer;
  }
  input[type='range']::-ms-track {
    @apply bg-transparent border-transparent border-t-8 w-full h-3 cursor-pointer;
  }
  input[type='range']::-ms-fill-lower {
    @apply bg-gray-300 dark:bg-gray-500 border-none;
  }
  input[type='range']::-ms-fill-upper {
    @apply bg-gray-300 dark:bg-gray-500 border-none;
  }
  input[type='range']::-ms-thumb {
    @apply w-6 h-6 bg-blue-700 dark:bg-blue-500 border-none rounded-md cursor-pointer mt-0;
    /*Needed to keep the Edge thumb centred*/
  }
  input[type='range']:focus::-ms-fill-lower {
    @apply bg-gray-300 dark:bg-gray-500;
  }
  input[type='range']:focus::-ms-fill-upper {
    @apply bg-gray-300 dark:bg-gray-500;
  }
  @supports (-ms-ime-align: auto) {
    /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
    input[type='range'] {
      @apply m-0;
      /*Edge starts the margin from the thumb, not the track as other browsers do*/
    }
  }
}
