/* purgecss start ignore */
@import url("./tailwind-init.css");
@import url("./radix.css");
@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap");
@import url("react-day-picker/dist/style.css");
@import url("react-phone-number-input/style.css");

@layer components {
  .cw-tab-list {
    @apply overflow-x-auto overflow-y-hidden whitespace-nowrap flex flex-row bg-gray-200 rounded-full h-10;
  }
  .cw-tab {
    @apply flex gap-1 lg:gap-3 text-sm lg:text-xl items-center justify-center focus:!shadow-none w-full px-2 py-3 rounded-full font-display hover:bg-primary-500 hover:text-white ui-selected:bg-primary-500 ui-selected:text-white;
  }

  .cw-menu-items {
    @apply absolute text-left p-1.5 right-0 mt-2 w-56 origin-top-right divide-y divide-gray-200 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none transform opacity-100 scale-100;
  }
  .cw-menu-item {
    @apply text-sm text-left font-text hover:bg-primary-700 hover:text-white w-full p-2 rounded;
  }

  .cw-radio
    .cw-radio-input:checked
    ~ .cw-radio-circle
    > .cw-radio-circle-content {
    @apply bg-primary-700;
  }
}

:root {
  --reach-dialog: 1;
  --PhoneInputCountrySelectArrow-width: 0.5em;
  --PhoneInputCountryFlag-height: 0.85em;
}

body {
  @apply bg-gray-100;
  @apply text-gray-900;
}

html,
body,
#root {
  @apply h-full;
}

#root {
  @apply h-full flex flex-col justify-between;
}

/* Animations */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.spin {
  animation: spin 0.5s linear infinite;
}

a[href]:not([tabindex="-1"]):focus,
area[href]:not([tabindex="-1"]):focus,
input:not([disabled]):not([tabindex="-1"]):focus,
select:not([disabled]):not([tabindex="-1"]):focus,
textarea:not([disabled]):not([tabindex="-1"]):focus,
button:not([disabled]):not([tabindex="-1"]):focus,
iframe:not([tabindex="-1"]):focus,
[contentEditable="true"]:not([tabindex="-1"]):focus,
.focus {
  outline: none !important;
  box-shadow: rgba(66, 153, 225, 0.9) 0px 0px 0px 3px;
}

.react-select__control input:not([disabled]):not([tabindex="-1"]):focus {
  box-shadow: none !important;
}

.no-focus {
  outline: none !important;
  box-shadow: none !important;
}

.cw-switch > input:checked ~ .cw-switch-bullet {
  transform: translateX(20px);
}

.cw-switch > input:checked ~ .cw-switch-bg {
  @apply bg-info-500;
}

.react-select__control {
  @apply border-gray-300 !important;
}

.errored .react-select__control {
  @apply border-danger-500 !important;
}

.react-select__indicator-separator {
  @apply bg-gray-300 !important;
}

.react-select__multi-value {
  @apply bg-gray-300 text-gray-800 !important;
}

.react-select--is-disabled .react-select__multi-value {
  @apply opacity-50 !important;
}

.react-select__input input {
  @apply shadow-none !important;
}

.cw-Tabs {
  @apply flex flex-row bg-gray-200 rounded-full h-6 text-sm mb-2;
}

.cw-Tabs [data-selected] {
  background: linear-gradient(270deg, #11a3b6 0%, #27d0dc 100%);
  color: white;
}

.cw-Tabs [data-selected]:hover {
  color: white;
  @apply bg-primary-500;
}

.cw-Tabs [data-reach-tab] {
  @apply flex items-center justify-center w-full py-3 rounded-full font-display;
}

.cw-Tabs [data-reach-tab]:hover {
  @apply bg-primary-300;
}

.cw-Tabs.cw-Tabs--big {
  @apply h-10 text-xl;
}

.cw-ButtonGroup > button {
  @apply whitespace-nowrap h-full px-3 md:px-4 flex items-center justify-center rounded-3xl py-3;
}
.cw-ButtonGroup > button:hover {
  @apply bg-primary-300;
}

.cw-ButtonGroup > button.selected {
  background: linear-gradient(270deg, #11a3b6 0%, #27d0dc 100%);
  color: white;
}

.cw-Checkbox > input:checked + .checkmark > * {
  @apply opacity-100;
}

code {
  font-family: "Fira Code", monospace !important;
}

[data-reach-combobox-input] {
  @apply appearance-none outline-none transition duration-150 ease-in-out block w-full bg-white text-gray-800 border rounded py-2 px-4 leading-tight focus:z-30 relative disabled:bg-gray-200 disabled:text-gray-700;
}

[data-reach-combobox-popover] {
  @apply bg-white border-gray-200 rounded-b p-2 mt-1 shadow;
}

[data-reach-combobox-option] {
  @apply font-normal truncate text-base font-sans py-2;
}

[data-suggested-value] {
  @apply font-normal;
}

[data-user-value] {
  @apply font-semibold;
}

.sidenav {
  top: 64px;
  height: calc(100% - 64px) !important;
}

@media screen and (min-width: 600px) {
  .sidenav.sidenav--closed .sidenav-link:hover .sidenav-link-tooltip {
    visibility: visible;
    opacity: 100%;
  }
  .sidenav.sidenav--closed .sidenav-link .sidenav-link-tooltip:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-100%, -50%);
    border: 6px solid transparent;
    border-right-color: #4a7378;
  }
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* React day picker */

.rdp-caption_label {
  @apply text-neutral-700 capitalize;
}

.rdp-caption_label {
  @apply text-neutral-700;
}
.rdp-day {
  @apply text-neutral-700;
}
.rdp-day_today {
  @apply text-danger-700;
}
.rdp-head_cell {
  @apply text-neutral-600;
}
.rdp-day_selected,
.rdp-day_selected:hover {
  @apply bg-primary-700 text-white;
}
.rdp-day_range_middle,
.rdp-day_range_middle:hover {
  @apply bg-gray-300 text-black;
}
.rdp-day_selected.rdp-day_range_start:not(.rdp-day_range_end),
.rdp-day_range_middle:hover {
  @apply !rounded-tr-none !rounded-br-none;
}

.rdp-day_closed,
.rdp-day_closed:hover {
  @apply !bg-[#ff904b] !text-black;
}
.rdp-day_closed:not(.rdp-day_range_start):not(.rdp-day_range_end),
.rdp-day_closed:not(.rdp-day_range_start):not(.rdp-day_range_end):hover {
  @apply !bg-[#ff634b] !text-black !rounded-none;
}
.rdp-button[disabled].rdp-day_closed {
  @apply !opacity-100;
}
.rdp-button[disabled] {
  @apply cursor-not-allowed;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

.PhoneInputCountry {
  @apply pr-2 m-2 border-r;
}

.PhoneInputInput {
  @apply rounded-r py-2;
}
.PhoneInputCountrySelectArrow {
  @apply relative -top-px ml-2 text-neutral-600;
}

/* purgecss end ignore */