@charset "UTF-8";

/* Imports
   ------- */

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@import "Fonts.css";
@import "Logo.css";
@import "Notifications.css";

/* 🛠
 ----- */

@layer utilities {
  .scrolling-touch {
    -webkit-overflow-scrolling: touch;
  }

  .scrolling-auto {
    -webkit-overflow-scrolling: auto;
  }
}

/* Base
   ---- */

:root {
  color-scheme: light dark;
}

html,
body {
  overflow: hidden;
  overscroll-behavior: none;
}

html,
body,
.screen-height {
  height: 100dvh;
}

body {
  @apply text-base01;

  background-color: rgb(29, 29, 29);
  background-image: url(images/ocean.jpg);
  font-feature-settings: kern, liga;
  font-weight: 400;
  min-width: 300px;
  text-rendering: optimizeLegibility;
}

*:active {
  outline: none;
}

.align-sub {
  vertical-align: sub;
}

.all-small-caps {
  font-variant-caps: all-small-caps;
}

.flex-basis-0 {
  flex-basis: 0;
}

.smooth-scrolling {
  scroll-behavior: smooth;
}

@screen dark {
  body {
    @apply text-gray-600;
  }
}

/* Buttons
   ------- */

button {
  color: inherit;
  font-family: inherit;
}

/* Dragging
   -------- */

.dragging-something {
  @apply select-none;
  cursor: grabbing;
}

.dragging-something * {
  cursor: grabbing !important;
}

/* Forms
   ----- */

input::placeholder,
textarea::placeholder {
  color: rgba(0, 0, 0, 0.275);
  opacity: 1;
}

input:user-invalid,
textarea:user-invalid {
  @apply border-base08;
  box-shadow: none;
  outline: none;
}

select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 rgb(63, 63, 63);
}

@screen dark {
  input::placeholder,
  textarea::placeholder {
    @apply text-base03;
    opacity: 1;
  }

  select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 rgb(232, 232, 232);
  }
}

/* Loading
   ------- */

.loading-animation {
  animation: loading-rotator 2s linear infinite;
}

.loading-animation__circle {
  animation:
    loading-dash 1.5s ease-in-out infinite,
    loading-colors 6s ease-in-out infinite;
  stroke-dasharray: 1, 86.25;
  stroke-dashoffset: 0;
  transform-origin: center;
}

@keyframes loading-rotator {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes loading-colors {
  0% {
    stroke: rgb(248, 164, 167);
  }

  25% {
    stroke: rgb(254, 196, 24);
  }

  50% {
    stroke: rgb(72, 182, 133);
  }

  75% {
    stroke: rgb(6, 182, 239);
  }

  100% {
    stroke: rgb(248, 164, 167);
  }
}

@keyframes loading-dash {
  0% {
    stroke-dasharray: 1, 86.25;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 64.6875, 86.25;
    stroke-dashoffset: -21.5625;
  }

  100% {
    stroke-dasharray: 64.6875, 86.25;
    stroke-dashoffset: -86.25;
  }
}

/* Overrides
   --------- */

.no-tracks-view > div {
  /* CSS fix for a scrolling issue:
     Element would appear scrolled even though it's not (virtual-dom issue probably)
  */
  overflow: visible !important;
}

/* Range slider
   ------------ */

.range-slider {
  @apply w-24 appearance-none rounded bg-gray-400;
  height: 4px;
}

.range-slider::-webkit-slider-thumb {
  @apply bg-base02 appearance-none;
  border-radius: 100%;
  height: 10px;
  width: 10px;
}

.range-slider::-moz-range-thumb {
  @apply bg-darkest-hour appearance-none;
  border-radius: 100%;
  height: 10px;
  width: 10px;
}

.range-slider::-ms-thumb {
  @apply bg-darkest-hour appearance-none;
  border-radius: 100%;
  height: 10px;
  width: 10px;
}

@screen dark {
  .range-slider {
    @apply bg-base01;
  }

  .range-slider::-webkit-slider-thumb {
    @apply bg-base07;
  }

  .range-slider::-moz-range-thumb {
    @apply bg-base07;
  }

  .range-slider::-ms-thumb {
    @apply bg-base07;
  }
}