@import "tailwindcss";
@source "../../shared/src";

@theme {
  /* using Dark Biscuit de Mar https://github.com/Biscuit-Theme/biscuit */
  --color-licorice: hsl(0, 11%, 9%);
  --color-raisin-black: hsl(0, 11%, 16%);
  --color-van-dyke: hsl(0, 12%, 25%);
  --color-wenge: hsl(0, 12%, 40%);
  --color-cinereous: hsl(0, 12%, 56%);
  --color-champagne-pink: hsl(24, 31%, 80%);
  --color-papaya-whip: hsl(36, 100%, 89%);
  --color-crimson: hsl(352, 72%, 47%);
  --color-burnt-sienna: hsl(13, 85%, 60%);
  --color-persian-orange: hsl(26, 74%, 58%);
  --color-moss-green: hsl(50, 17%, 50%);
  --color-battleship-gray: hsl(129, 6%, 51%);
  --color-chinese-violet: hsl(270, 12%, 49%);
  --color-ultra-violet: hsl(250, 25%, 44%);
  --color-plum: hsl(302, 34%, 36%);
  --color-magenta-haze: hsl(332, 47%, 46%);

  /* using https://github.com/the-moonwitch/Cozette */
  --font-cozette: "CozetteVector", sans-serif;
}

@font-face {
  font-family: 'CozetteVector';
  src: url('/static/fonts/CozetteVector.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* .icon { */
  /* font-family: 'CozetteVector'; */
  /* font-variant-emoji: text; */
/* } */

.toast-container {
  font-family: 'CozetteVector';
  position: fixed;
  display: flex;
  pointer-events: none;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  z-index: 9999;
}

.toast-container::backdrop {
  display: none;
}

.toast-container[data-placement="top-right"] {
  @apply gap-2;
  bottom: 1rem;
  left: calc(100% - 1rem);
  transform: translateX(-100%);
  flex-direction: column-reverse;
}

.toast {
  @apply text-champagne-pink lowercase border border-cinereous p-1 mx-1 min-w-3xs;
  --transition: 300ms;
  pointer-events: auto;
  transition: opacity var(--transition), transform var(--transition), max-height var(--transition), margin var(--transition), padding var(--transition);
}

.toast-title {
  @apply text-xl mb-2;
}

.toast[data-variant="danger"] .toast-title {
  @apply text-crimson;
}

.toast[data-entering] {
  opacity: 0;
  transform: translateY(1rem);
}

.toast[data-exiting] {
  opacity: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  max-height: 0;
  overflow: hidden;
}

range-slider {
  @apply rounded-none w-full mt-4 mb-2 disabled:filter-none disabled:opacity-100;
}

range-slider [data-track] {
  @apply rounded-none;
}

range-slider [data-track-fill] {
  @apply bg-champagne-pink rounded-none;
}

range-slider [data-thumb] {
  @apply rounded-none bg-wenge outline-2 outline-wenge border-2 border-champagne-pink;
}

.switch {
  --width: 48px;
  --height: 24px;
  --gap: 3px;
  --duration: 0.2s;

  display: inline-block;
  cursor: pointer;
}

.switch input {
  appearance: none;
  -webkit-appearance: none;
  width: var(--width);
  height: var(--height);
  position: relative;
  transition: background-color var(--duration) ease;
  cursor: pointer;
}

.switch input::before {
  content: "";
  position: absolute;
  top: var(--gap);
  left: var(--gap);
  width: calc(var(--height) - (var(--gap) * 2));
  height: calc(var(--height) - (var(--gap) * 2));
  transition:
    transform var(--duration) cubic-bezier(0.25, 0.8, 0.25, 1),
    border-color var(--duration) ease;
  z-index: 1;
  @apply bg-wenge outline-2 outline-wenge border-2 border-champagne-pink;
}

.switch input::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 4px;
  transform: translateY(-50%);
  z-index: 0;
  @apply bg-papaya-whip;
}

.switch input:checked::before {
  transform: translateX(calc(var(--width) - var(--height)));
  @apply border-ultra-violet bg-raisin-black outline-ultra-violet;
}

.switch input:focus-visible {
  @apply outline-2 outline-moss-green outline-offset-2;
}