/*
  These variables should mirror the configuration in tailwind.config.cjs.
  They allow us to reference our color palette in places where Tailwind's
  classes can't be used.
*/

:root {
  --font-ui: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-heading: Domine, Georgia, Cambria, "Times New Roman", Times, serif;

  --black: #252B30;

  --gray-50: #F6F8FA;
  --gray-100: #EDF2F4;
  --gray-200: #DDE2E7;
  --gray-300: #CFD4D9;
  --gray-400: #C0C5CB;
  --gray-500: #B0B7BE;
  --gray-600: #8D9298;
  --gray-700: #6A6E72;
  --gray-800: #373F45;
  --gray-900: #252B30;

  --gray-50-rgb: 246, 248, 250;
  --gray-100-rgb: 237, 242, 244;
  --gray-200-rgb: 221, 226, 231;
  --gray-300-rgb: 207, 212, 217;
  --gray-400-rgb: 192, 197, 203;
  --gray-500-rgb: 176, 183, 190;
  --gray-600-rgb: 141, 146, 152;
  --gray-700-rgb: 106, 110, 114;
  --gray-800-rgb: 55, 63, 69;
  --gray-900-rgb: 37, 43, 48;

  --red-50: #FFEFF0;
  --red-100: #FEDFE1;
  --red-200: #FDBFC3;
  --red-300: #FDA0A4;
  --red-400: #FC8086;
  --red-500: #FB6068;
  --red-600: #D3434A;
  --red-700: #AA3137;
  --red-800: #8B2329;
  --red-900: #621E22;

  --red-50-rgb: 255, 239, 240;
  --red-100-rgb: 254, 223, 225;
  --red-200-rgb: 253, 191, 195;
  --red-300-rgb: 253, 160, 164;
  --red-400-rgb: 252, 128, 134;
  --red-500-rgb: 251, 96, 104;
  --red-600-rgb: 211, 67, 74;
  --red-700-rgb: 170, 49, 55;
  --red-800-rgb: 139, 35, 41;
  --red-900-rgb: 98, 30, 34;

  --blue-50: #EDEFF5;
  --blue-100: #DAE0EB;
  --blue-200: #B6C1D7;
  --blue-300: #91A1C4;
  --blue-400: #6D82B0;
  --blue-500: #48639C;
  --blue-600: #324C85;
  --blue-700: #263963;
  --blue-800: #212F4F;
  --blue-900: #1D283E;

  --blue-50-rgb: 237, 239, 245;
  --blue-100-rgb: 218, 224, 235;
  --blue-200-rgb: 182, 193, 215;
  --blue-300-rgb: 145, 161, 196;
  --blue-400-rgb: 109, 130, 176;
  --blue-500-rgb: 72, 99, 156;
  --blue-600-rgb: 50, 76, 133;
  --blue-700-rgb: 38, 57, 99;
  --blue-800-rgb: 33, 47, 79;
  --blue-900-rgb: 29, 40, 62;

  --green-50: #ECF6F2;
  --green-100: #D8EDE6;
  --green-200: #B2DACC;
  --green-300: #8BC8B3;
  --green-400: #65B599;
  --green-500: #3EA380;
  --green-600: #328266;
  --green-700: #26644F;
  --green-800: #1C4A3A;
  --green-900: #123126;

  --green-50-rgb: 236, 246, 242;
  --green-100-rgb: 216, 237, 230;
  --green-200-rgb: 178, 218, 204;
  --green-300-rgb: 139, 200, 179;
  --green-400-rgb: 101, 181, 153;
  --green-500-rgb: 62, 163, 128;
  --green-600-rgb: 50, 130, 102;
  --green-700-rgb: 38, 100, 79;
  --green-800-rgb: 28, 74, 58;
  --green-900-rgb: 18, 49, 38;

  --yellow-50: #FDF8F1;
  --yellow-100: #FBF1E3;
  --yellow-200: #F7E3C6;
  --yellow-300: #F4D4AA;
  --yellow-400: #F0C68D;
  --yellow-500: #ECB871;
  --yellow-600: #D19646;
  --yellow-700: #A6712C;
  --yellow-800: #725122;
  --yellow-900: #473215;

  --yellow-50-rgb: 253, 248, 241;
  --yellow-100-rgb: 251, 241, 227;
  --yellow-200-rgb: 247, 227, 198;
  --yellow-300-rgb: 244, 212, 170;
  --yellow-400-rgb: 240, 198, 141;
  --yellow-500-rgb: 236, 184, 113;
  --yellow-600-rgb: 209, 150, 70;
  --yellow-700-rgb: 166, 113, 44;
  --yellow-800-rgb: 114, 81, 34;
  --yellow-900-rgb: 71, 50, 21;

  --light-blue: #E7FAFA;

  /* primary-* variables are temporary until after the rebrand. */

  --primary-50: var(--red-50);
  --primary-100: var(--red-100);
  --primary-200: var(--red-200);
  --primary-300: var(--red-300);
  --primary-400: var(--red-400);
  --primary-500: var(--red-500);
  --primary-600: var(--red-600);
  --primary-700: var(--red-700);
  --primary-800: var(--red-800);
  --primary-900: var(--red-900);

  --primary-50-rgb: var(--red-50-rgb);
  --primary-100-rgb: var(--red-100-rgb);
  --primary-200-rgb: var(--red-200-rgb);
  --primary-300-rgb: var(--red-300-rgb);
  --primary-400-rgb: var(--red-400-rgb);
  --primary-500-rgb: var(--red-500-rgb);
  --primary-600-rgb: var(--red-600-rgb);
  --primary-700-rgb: var(--red-700-rgb);
  --primary-800-rgb: var(--red-800-rgb);
  --primary-900-rgb: var(--red-900-rgb);
}

/* End variables */

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Base */
hr {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

/* Temp button/input helper */
.leading-5 {
  line-height: 1.25rem;
}

.design-custom-box {
  --active: var(--active-checkbox, rgb(var(--green-500-rgb)));
  --active-inner: var(--active-checkbox-inner, #fff);
  --focus: 2px rgba(var(--blue-500-rgb), 0.3);
  --border: var(--gray-200);
  --border-hover: var(--gray-200);
  --background: #fff;
  --disabled: #f6f8ff;
  --disabled-inner: #e1e6f9;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 20px;
  width: 20px;
  outline: none !important;
  display: inline-block;
  vertical-align: top;
  position: relative;
  margin: 0;
  cursor: pointer;
  border: 1px solid var(--bc, var(--border));
  background: var(--b, var(--background));
  transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
}

.design-custom-box:checked {
  --b: var(--active);
  --bc: var(--active);
  --d-o: 0.3s;
  --d-t: 0.6s;
  --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
  --o: 1;
  --r: 43deg;
  --ab: var(--active-inner);
  --x: 17px;
}

.design-custom-box:after {
  content: "";
  display: block;
  position: absolute;
  opacity: var(--o, 0);
  border: 2px solid var(--active-inner);
}

.design-custom-box:disabled {
  --b: var(--disabled);
  cursor: not-allowed;
  opacity: 0.9;
}
.design-custom-box:disabled:checked {
  --b: var(--disabled-inner);
  --bc: var(--border);
}
.design-custom-box:disabled:not(:checked) {
  opacity: 0.6;
}
.design-custom-box:hover:not(:checked):not(:disabled) {
  --bc: var(--border-hover);
}
.design-custom-box:focus {
  box-shadow: 0 0 0 var(--focus);
}

.design-checkbox {
  border-radius: 0.4rem;
}

.design-checkbox:after {
  content: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.21326 0.176602C4.65788 0.184808 5.02498 0.551902 5.03318 0.99653L5.16675 8.23375C5.18174 8.29327 5.19023 8.35519 5.19141 8.4187C5.19961 8.86333 4.84582 9.21712 4.40119 9.20891L1.11157 9.1482C0.666936 9.13999 0.299843 8.7729 0.291636 8.32827C0.283431 7.88364 0.637221 7.52985 1.08185 7.53806L3.54515 7.58352L3.42304 0.966815C3.41484 0.522186 3.76863 0.168397 4.21326 0.176602Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
  transition: transform var(--d-t, 0.3s) var(--d-t-e, ease),
    opacity var(--d-o, 0.2s);
  left: 6.5px;
  top: -4px;
  transform: rotate(var(--r, 10deg));
  border: none;
}

.design-checkbox:indeterminate {
  --b: var(--active);
  --bc: var(--active);
}
.design-checkbox:indeterminate::after {
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23FFFFFF'%3E%3Cpath d='M16 11.25a.75.75 0 0 1 0 1.5H8a.75.75 0 0 1 0-1.5h8z'%3E%3C/path%3E%3C/svg%3E");
  left: -3px;
  top: -3px;
  opacity: 1;
  transform: none;
}

.design-radio {
  border-radius: 100%;
}

.design-radio:after {
  border-radius: 100%;
  width: 18px;
  height: 18px;
  left: 0;
  top: 0;
}

.design-slider {
  position: relative;
  --range: calc(var(--max) - var(--min));
  --ratio: calc((var(--rangeValue) - var(--min)) / var(--range));
  --progress: calc(var(--ratio) * 100%);
  --progressColor: var(--primary-500);
  --thumbColor: var(--primary-500);
  --trackColor: var(--gray-300);
}

.design-slider input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  height: 22px !important;
}
.design-slider input[type="range"]:focus {
  outline: none;
}
/* CHROME */
.design-slider input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background-image: linear-gradient(var(--progressColor), var(--progressColor));
  background-size: var(--progress) 100%;
  background-repeat: no-repeat;
  background-color: var(--trackColor);
  border-radius: 2px;
}
.design-slider input[type="range"]::-webkit-slider-thumb {
  height: 16px;
  width: 16px;
  border-radius: 8px;
  background: var(--thumbColor);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -6px;
}
/* FIREFOX */
.design-slider input[type="range"]::-moz-range-progress {
  background: var(--progressColor);
}
.design-slider input[type="range"]::-moz-range-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: var(--trackColor);
  border-radius: 2px;
}
.design-slider input[type="range"]::-moz-range-thumb {
  border: 0;
  height: 16px;
  width: 16px;
  border-radius: 8px;
  background: var(--thumbColor);
  cursor: pointer;
}

/* Utilities */

@variants focus {
  .outline-blue {
    outline: none;
    border-color: rgba(var(--blue-500-rgb), 0.3);
    box-shadow: rgba(var(--blue-500-rgb), 0.3) 0 0 0 1px;
  }

  .outline-red {
    outline: none;
    border-color: rgb(251, 80, 88);
    box-shadow: rgb(251, 80, 88) 0 0 0 1px;
  }

  .outline-green {
    outline: none;
    border-color: rgb(88, 157, 120);
    box-shadow: rgb(88, 157, 120) 0 0 0 1px;
  }
}

@variants focus-visible {
  .outline-blue {
    outline: none;
    border-color: rgba(var(--blue-500-rgb), 0.3);
    box-shadow: rgba(var(--blue-500-rgb), 0.3) 0 0 0 1px;
  }

  .outline-red {
    outline: none;
    border-color: rgb(251, 80, 88);
    box-shadow: rgb(251, 80, 88) 0 0 0 1px;
  }

  .outline-green {
    outline: none;
    border-color: rgb(88, 157, 120);
    box-shadow: rgb(88, 157, 120) 0 0 0 1px;
  }
}

@variants focus-within {
  .outline-blue {
    outline: none;
    border-color: rgba(var(--blue-500-rgb), 0.3);
    box-shadow: rgba(var(--blue-500-rgb), 0.3) 0 0 0 1px;
  }

  .outline-red {
    outline: none;
    border-color: rgb(251, 80, 88);
    box-shadow: rgb(251, 80, 88) 0 0 0 1px;
  }

  .outline-green {
    outline: none;
    border-color: rgb(88, 157, 120);
    box-shadow: rgb(88, 157, 120) 0 0 0 1px;
  }

  .border-blue {
    border-color: rgba(var(--blue-500-rgb), 0.3);
  }
}

.right-10 {
  right: 10px;
}

/* Reach UI */
:root {
  --reach-tooltip: 1;
}

[data-reach-tooltip] {
  background: #000000;
  box-shadow: 0 2px 9px 0 rgba(210, 214, 220, 0.45);
  border: solid 1px #000000;
  border-radius: 0.25rem;
  color: #ffffff;
  font-size: 0.75rem;
  pointer-events: none;
  position: absolute;
  padding: 2px 6px;
  white-space: nowrap;
  z-index: 10; /* 10: To render above other parallel portals that may come after it in DOM */
}

[data-reach-dialog-overlay] {
  background: hsla(0, 0%, 0%, 0.7);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  z-index: 51;
}
[data-reach-dialog-content] {
  margin: 27vh auto;
  outline: none;
}

/* Popover Styles */
.popover-arrow .stroke {
  fill: var(--gray-200);
}

.popover-arrow .fill {
  fill: #ffffff;
}

/* DatePickerInput Styles */
.react-datepicker-wrapper {
  display: block !important;
}

.react-datepicker-popper {
  width: 330px !important;
}

.react-datepicker {
  border: none !important;
  overflow: hidden !important;
  @apply shadow-lg rounded !important;
}

.react-datepicker__header {
  @apply bg-white border-none !important;
}

.react-datepicker__day-name {
  @apply my-0 !important;
}

.react-datepicker__triangle {
  display: none !important;
}

.react-datepicker__navigation--previous {
  left: 3px !important;
}

.react-datepicker__navigation--next {
  right: 88px !important;
}

.design-date-field .react-datepicker__navigation--next {
  right: 10px !important;
}

.react-datepicker__current-month {
  @apply font-normal !important;
}

.react-datepicker__day-names {
  @apply bg-gray-50 border-b border-t border-gray-200 !important;
}

.react-datepicker__header--time {
  @apply py-1 !important;
}

.react-datepicker-time__header {
  @apply font-normal !important;
}

.react-datepicker__time-list-item {
  @apply py-1 px-2 h-auto !important;
}

.react-datepicker-popper[data-placement^="bottom"] {
  margin-top: 0px !important;
}

.design-progress {
  height: 3px;
  width: 100%;
  pointer-events: none;
}

.design-progress .bar {
  background: var(--blue-500);
}

/* Bounce Spinner */
.loading-animation {
  width: 40px;
  height: 40px;

  position: relative;
}

.loading-animation--top,
.loading-animation--bottom {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #c1c1c1;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  animation: sk-bounce 2s infinite ease-in-out;
}

.loading-animation--bottom {
  animation-delay: -1s;
}

/* Overides app styles for plain inputs */
.design-input {
  border: 0 !important;
  color: var(--gray-800) !important;
  padding: 0 !important;
  font-size: 14px !important;
}

@-webkit-keyframes sk-bounce {
  0%,
  100% {
    -webkit-transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
  }
}

@keyframes sk-bounce {
  0%,
  100% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
  50% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}

@keyframes slide-in-from-right {
  from {
    transform: translateX(100%);
  }
}

/* Adjusts default toast width and fixes a conflict with Bootstrap. */
.Toaster__manager-bottom {
  max-width: 700px !important;
}

@media (min-width: 768px) {
  .Toaster__message .md\:flex {
    display: flex !important;
  }
}
