:root {

  /* Toggle */
  --ui-toggle-width: 20px;
  --ui-toggle-padding: 3px;
  --ui-toggle-background-inactive: var(--ui-color-grey-200);
  --ui-toggle-background-hover: var(--ui-color-grey-400);
  --ui-toggle-background-active: rgb(74 222 128);
  --ui-toggle-box-shadow: var(--ui-shared-box-shadow);

  /* Greys */
  --ui-color-grey-50: rgb(249 250 251);
  --ui-color-grey-100: rgb(243 244 246);
  --ui-color-grey-200: rgb(229 231 235);
  --ui-color-grey-300: rgb(209 213 219);
  --ui-color-grey-400: rgb(156 163 175);
  --ui-color-grey-500: rgb(107 114 128);
  --ui-color-grey-600: rgb(75 85 99);
  --ui-color-grey-700: rgb(55 65 81);
  --ui-color-grey-800: rgb(31 41 55);
  --ui-color-grey-900: rgb(17 24 39);
  --ui-color-grey-950: rgb(3 7 18);

  /* Greens */
  --ui-color-green-50: rgb(240 253 244);
  --ui-color-green-100: rgb(220 252 231);
  --ui-color-green-200: rgb(187 247 208);
  --ui-color-green-300: rgb(134 239 172);
  --ui-color-green-400: rgb(74 222 128);
  --ui-color-green-500: rgb(34 197 94);
  --ui-color-green-600: rgb(22 163 74);
  --ui-color-green-700: rgb(21 128 61);
  --ui-color-green-800: rgb(22 101 52);
  --ui-color-green-900: rgb(20 83 45);
  --ui-color-green-950: rgb(5 46 22);

  /* Blues */
  --ui-color-blue-500: rgb(59 130 246);
  --ui-color-blue-600: rgb(37 99 235);
  --ui-color-blue-700: rgb(29 78 216);
  --ui-color-blue-800: rgb(30 64 175);
  --ui-color-blue-900: rgb(30 58 138);
  --ui-color-blue-950: rgb(23 37 84);
  --sidebar-bg-color: #153846;

  /* Modal */
  --ui-modal-max-width-3xl: 800px;
  --ui-modal-max-width-4xl: 1000px;
  --ui-modal-max-width-5xl: 1200px;

}

/* Add in slider toggle from cdn */
.ui-toggle {
  position: relative;
  display: inline-block;
  width: calc((var(--ui-toggle-width) * 2) + (2 * var(--ui-toggle-padding)));
  height: calc(var(--ui-toggle-width) + (2 * var(--ui-toggle-padding)));

  .--slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--ui-toggle-background-inactive);
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px;

    &:hover {
      background-color: var(--ui-toggle-background-hover);
    }
  }

  .--slider:before {
    position: absolute;
    content: "";
    height: var(--ui-toggle-width);
    width: var(--ui-toggle-width);
    left: var(--ui-toggle-padding);
    bottom: var(--ui-toggle-padding);
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
  }

  input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  input:checked+.--slider {
    background-color: var(--ui-toggle-background-active);
  }

  input:checked+.--slider:before {
    transform: translateX(var(--ui-toggle-width));
  }
}

.ui-search-input:focus {
  border-color: var(--ui-shared-element-border-color);
  outline: none;
}

.ui-button {
  cursor: pointer;
  border: none;
  transition: background-color 0.2s ease, color 0.2s ease;

  &.--cursor-not-allowed {
    cursor: not-allowed;

    &:hover {
      background-color: transparent;
      cursor: not-allowed;
    }
  }

  &.--sidebar-green {
    background-color: var(--ui-color-green-950);
    color: white;
    border-radius: 999px;

    &:hover {
      background-color: var(--ui-color-green-800);
    }
  }

  &.--sidebar-blue {
    background-color: var(--ui-color-blue-950);
    color: white;
    border-radius: 0.375rem;

    &:hover {
      background-color: var(--ui-color-blue-800);
    }
  }

  &.--toggle {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.375rem;
    color: rgb(55 65 81);
    background-color: transparent;

    &:hover {
      background-color: rgb(249 250 251);
    }

    &.--active {
      background-color: rgb(59 130 246);
      color: white;

      &:hover {
        background-color: rgb(37 99 235);
      }
    }
  }

  &.--circular {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 9999px;
    background-color: rgb(229 231 235);
    color: rgb(75 85 99);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;

    &:hover {
      background-color: rgb(209 213 219);
      transform: scale(1.05);
    }

    &.--active {
      background-color: var(--ui-color-green-400);
      color: white;

      &:hover {
        background-color: var(--ui-color-green-500);
      }
    }
  }

  &.--icon {
    padding: 0.5rem;
    background-color: transparent;
    color: rgb(156 163 175);
    border-radius: 0.375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, background-color 0.2s ease;

    &:hover {
      color: rgb(75 85 99);
      background-color: rgb(249 250 251);
    }

    &.--sm svg {
      width: 1rem;
      height: 1rem;
    }

    &.--md svg {
      width: 1.25rem;
      height: 1.25rem;
    }

    &.--lg svg {
      width: 1.5rem;
      height: 1.5rem;
    }
  }
}

.ui-button-group {
  display: flex;
  background-color: white;
  border-radius: 0.5rem;
  border: 1px solid rgb(229 231 235);
  padding: 0.25rem;
  gap: 0;

  & .ui-button.--toggle {
    &:not(:last-child) {
      margin-right: 0;
    }
  }

  &.--circular {
    gap: 0.5rem;
    background-color: transparent;
    border: none;
    padding: 0;
  }
}

.ui-checkbox {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgb(209 213 219);
  border-radius: 50%;
  background-color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  flex-shrink: 0;

  &:hover {
    border-color: var(--ui-color-green-400);
  }

  &:checked {
    background-color: var(--ui-color-green-400);
    border-color: var(--ui-color-green-400);
  }

  &:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--ui-color-green-100);
  }

  &.--sm {
    width: 0.75rem;
    height: 0.75rem;
  }

  &.--md {
    width: 1rem;
    height: 1rem;
  }

  &.--lg {
    width: 1.25rem;
    height: 1.25rem;
  }

  &.--green {
    &:hover {
      border-color: var(--ui-color-green-600);
    }

    &:checked {
      background-color: var(--ui-color-green-600);
      border-color: var(--ui-color-green-600);
    }

    &:focus {
      box-shadow: 0 0 0 3px var(--ui-color-green-100);
    }
  }
}

.ui-box {
  &.--bg-gray-100 {
    background-color: var(--ui-color-grey-100);
  }
}

.ui-modal {
  .--dialog {
    &.--3xl {
      max-width: var(--ui-modal-max-width-3xl);
    }

    &.--4xl {
      max-width: var(--ui-modal-max-width-4xl);
    }

    &.--5xl {
      max-width: var(--ui-modal-max-width-5xl);
    }
  }
}

.ui-dropdown,
.ui-combobox {
  position: relative;
  display: inline-block;




  .--trigger {
    position: relative;
    padding: var(--ui-button-padding);
    font-size: var(--ui-shared-font-size-base);
    border-radius: var(--ui-button-border-radius);
    border-color: var(--ui-button-border-color);
    border-width: var(--ui-button-border-width);
    transition: background-color 0.3s, border-color 0.3s;
    cursor: pointer;
    box-shadow: var(--ui-shared-element-box-shadow);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' aria-hidden='true' viewBox='0 0 10 6'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 1 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right .75rem center;
    background-repeat: no-repeat;
    background-size: .75em .75em;
    padding-inline-end: 4rem;

    &:hover {
      background-color: var(--ui-button-color-bg-hover);
    }
  }

  .--drawer {
    position: absolute;
    top: calc(var(--ui-dropdown-top-gap) + 100%);
    left: 0;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.95);
    transition: opacity 0.1s ease-out, transform 0.1s ease-out;
    transform-origin: top left;
    box-shadow: var(--ui-shared-element-box-shadow);
    border-color: var(--ui-button-border-color);
    border-width: var(--ui-button-border-width);
    min-width: 200px;
    max-width: 300px;
    border-radius: var(--ui-button-border-radius);
    background-color: white;
    z-index: var(--ui-z-index-level-1);
  }

  &.--open {
    .--drawer {
      opacity: 1;
      pointer-events: auto;
      transform: scale(1);
    }
  }

  .--counter {
    --ui-counter-size: 20px;
    padding: 0 6px;
    position: absolute;
    right: 2rem;
    background-color: var(--ui-color-gray-100);
    color: var(--ui-color-gray-500);
    border-radius: calc(var(--ui-counter-size) / 2);
    height: var(--ui-counter-size);
    line-height: var(--ui-counter-size);
    min-width: var(--ui-counter-size);
    top: calc((var(--ui-button-height) - var(--ui-counter-size))/2);
    font-size: var(--ui-shared-font-size-sm);
    font-weight: var(--ui-shared-font-weight-bold);
  }

  &.--align-right .--drawer {
    left: auto;
    right: 0;
    transform-origin: top right;
  }
}

.ui-link,
.ui-button,
.ui-form button,
.ui-dropdown .--trigger,
.ui-combobox .--trigger {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  column-gap: 0.5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ui-button-color-foreground);
  height: var(--ui-button-height);

  svg,
  img {
    width: 19px;
    height: 19px;
    transition: transform 0.2s ease-in-out;
  }

  &.--icon {
    width: var(--ui-button-icon-dimension);
    height: var(--ui-button-icon-dimension);
  }

  &.--motion-forward svg,
  &.--motion-backward svg,
  &.--motion-forward img,
  &.--motion-backward img {
    transition: transform 0.2s ease-in-out;
  }

  &.--motion-forward:hover svg,
  &.--motion-forward:hover img {
    transform: translateX(2px);
  }

  &.--motion-backward:hover svg,
  &.--motion-backward:hover img {
    transform: translateX(-2px);
  }

  &.--motion-upward:hover svg,
  &.--motion-upward:hover img {
    transform: translateY(-2px);
  }

  &.--motion-downward:hover svg,
  &.--motion-downward:hover img {
    transform: translateY(2px);
  }
}

.ui-dropdown {
  &>[popover] {
    position-area: top center;
    /* default position - only works for chrome */
    interest-show-delay: 0s;
    interest-hide-delay: 0s;
    background: white;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e5e5;
    pointer-events: auto;

    /* Exit state (closed) */
    opacity: 0;
    transform: scale(0.8);
    transform-origin: top center;

    /* Essential: Include display, overlay, and allow-discrete */
    transition:
      opacity 0.3s ease,
      transform 0.3s ease,
      overlay 0.3s allow-discrete;

    &.--top {
      position-area: top center;
      ;
      /* default position - only works for chrome */
      margin-bottom: 10px;
    }

    &.--bottom {
      position-area: bottom center;
      ;
      /* default position - only works for chrome */
      margin-top: 10px;
    }
  }

  /* Native popover support */
  [popover]:popover-open {
    position: absolute;
    inset: unset;
    top: 0;
    left: 0;
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;

    /* Starting style for entry animation*/
    @starting-style {
      opacity: 0;
      transform: scale(0.8);
    }
  }
}