@import 'react-nice-dates/build/style.css';
@import 'react-toastify/dist/ReactToastify.css';

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

/* Nicer check for checkbox */
.form-checkbox:checked,
.switch--checked {
  background-image: url("data:image/svg+xml,%3Csvg fill='white' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6.9919558 12.0005941c-.26547704 0-.52006014-.1054507-.7077524-.293l-2.00319264-2.00000003c-.37937552-.39237889-.37394992-1.01608478.01219439-1.40181858.3861443-.38573379 1.01051394-.39115363 1.40331041-.01218142l1.20234127 1.2 3.30864357-5.107c.3394637-.43630494.9687248-.51510281 1.4054941-.17599998.4367692.33910283.515651.96769503.1761873 1.40399998l-4.00638527 6.00000003c-.1761023.2273124-.44160568.3679379-.72877475.386z'/%3E%3C/svg%3E");
}

/* RangeInput styles */
.range-input__tick-item {
  bottom: 100%;
}
.range-input__tick-item::after {
  content: '';
  left: 50%;
  top: 100%;
  @apply w-0 border-0 border-r border-gray-300 border-solid h-1.5 absolute;
}
.range-input__handle {
  touch-action: 'pan-x';
}
.range-input__handle::before {
  content: attr(data-value);
  @apply absolute px-1 mb-2 text-xs text-center text-white transition-opacity duration-200 transform -translate-x-1/2 bg-gray-900 bg-opacity-75 rounded opacity-0 bottom-full left-1/2;
}
.range-input__handle:hover::before,
.range-input__handle:focus::before {
  opacity: 1;
}
.range-input__track {
  touch-action: none;
}

/* Combobox styles */
.combobox:focus-within .combobox__input-icon {
  @apply text-gray-600 hover:text-black;
}

/* To remove the arrow where an input element is used in conjunction with a datalist element */
input.datalist-input[list]::-webkit-calendar-picker-indicator {
  display: none !important;
}

/* DatePicker styles */
.nice-dates-day::before {
  @apply bg-blue-500 !important;
}
.nice-dates-day::after {
  @apply border-blue-500 !important;
}

:root {
  --toastify-toast-width: auto;
}

.Toastify__zoom-enter {
  @apply animate-toast-enter;
}

.Toastify__zoom-exit {
  @apply animate-toast-leave;
}