:root {
  --_grey-700: 195, 100%, 10%;
  --_grey-600: 196, 13%, 29%;
  --_grey-500: 197, 7%, 40%;
  --_grey-400: 204, 2%, 54%;
  --_grey-300: 192, 5%, 82%;
  --_grey-200: 204, 11%, 91%;
  --_grey-100: 200, 16%, 96%;
  --_white: 0, 0%, 100%;

  --ndw-color-grey-700: hsl(var(--_grey-700));
  --ndw-color-grey-600: hsl(var(--_grey-600));
  --ndw-color-grey-500: hsl(var(--_grey-500));
  --ndw-color-grey-400: hsl(var(--_grey-400));
  --ndw-color-grey-300: hsl(var(--_grey-300));
  --ndw-color-grey-200: hsl(var(--_grey-200));
  --ndw-color-grey-100: hsl(var(--_grey-100));
  --ndw-color-white: hsl(var(--_white));

  --_primary: 19, 100%;
  --_primary-050: var(--_primary), 95%;
  --_primary-100: var(--_primary), 80%;
  --_primary-200: var(--_primary), 73%;
  --_primary-300: var(--_primary), 62%;
  --_primary-400: var(--_primary), 50%;
  --_primary-500: var(--_primary), 40%;
  --_primary-600: var(--_primary), 35%;
  --_primary-700: var(--_primary), 27%;
  --_primary-800: var(--_primary), 15%;

  --ndw-color-primary-050: hsl(var(--_primary-050));
  --ndw-color-primary-100: hsl(var(--_primary-100));
  --ndw-color-primary-200: hsl(var(--_primary-200));
  --ndw-color-primary-300: hsl(var(--_primary-300));
  --ndw-color-primary-400: hsl(var(--_primary-400));
  --ndw-color-primary-500: hsl(var(--_primary-500));
  --ndw-color-primary-600: hsl(var(--_primary-600));
  --ndw-color-primary-700: hsl(var(--_primary-700));
  --ndw-color-primary-800: hsl(var(--_primary-800));

  --ndw-color-primary: var(--ndw-color-primary-500);
  --ndw-color-primary-hover: var(--ndw-color-primary-600);
  --ndw-color-primary-active: var(--ndw-color-primary-700);

  --_secondary-050: 209, 100%, 96%;
  --_secondary-100: 209, 85%, 91%;
  --_secondary-200: 209, 85%, 78%;
  --_secondary-300: 209, 85%, 69%;
  --_secondary-400: 208, 100%, 46%;
  --_secondary-500: 208, 100%, 41%;
  --_secondary-600: 209, 100%, 32%;
  --_secondary-700: 209, 100%, 18%;

  --ndw-color-secondary-050: hsl(var(--_secondary-050));
  --ndw-color-secondary-100: hsl(var(--_secondary-100));
  --ndw-color-secondary-200: hsl(var(--_secondary-200));
  --ndw-color-secondary-300: hsl(var(--_secondary-300));
  --ndw-color-secondary-400: hsl(var(--_secondary-400));
  --ndw-color-secondary-500: hsl(var(--_secondary-500));
  --ndw-color-secondary-600: hsl(var(--_secondary-600));
  --ndw-color-secondary-700: hsl(var(--_secondary-700));

  --ndw-color-secondary: var(--ndw-color-secondary-500);
  --ndw-color-secondary-hover: var(--ndw-color-secondary-600);
  --ndw-color-secondary-active: var(--ndw-color-secondary-700);

  --_tertiary-400: 43, 100%, 50%;
  --_tertiary-500: 42, 100%, 43%;

  --ndw-color-tertiary-400: hsl(var(--_tertiary-400));
  --ndw-color-tertiary-500: hsl(var(--_tertiary-500));

  --_link: 208, 100%;
  --_link-400: var(--_link), 41%;
  --_link-500: var(--_link), 32%;

  --ndw-color-link-400: hsl(var(--_link-400));
  --ndw-color-link-500: hsl(var(--_link-500));

  --_positive: 133, 92%;
  --_positive-100: 117, 56%, 92%;
  --_positive-500: var(--_positive), 33%;
  --_positive-600: var(--_positive), 24%;
  --_warning: 43, 93%;
  --_warning-100: 44, 100%, 94%;
  --_warning-500: var(--_warning), 43%;
  --_warning-600: 42, 83%, 32%;
  --_alternative: 292, 100%;
  --_alternative-100: var(--_alternative), 95%;
  --_alternative-500: 292, 95%, 33%;
  --_critical: 0, 100%;
  --_critical-100: var(--_critical), 98%;
  --_critical-200: var(--_critical), 95%;
  --_critical-300: var(--_critical), 90%;
  --_critical-500: var(--_critical), 46%;
  --_info-100: 210, 100%, 96%;
  --_info-200: 210, 86%, 91%;
  --_info-500: 208, 100%, 41%;

  --ndw-color-positive-100: hsl(var(--_positive-100));
  --ndw-color-positive-500: hsl(var(--_positive-500));
  --ndw-color-positive-600: hsl(var(--_positive-600));
  --ndw-color-warning-100: hsl(var(--_warning-100));
  --ndw-color-warning-500: hsl(var(--_warning-500));
  --ndw-color-warning-600: hsl(var(--_warning-600));
  --ndw-color-alternative-100: hsl(var(--_alternative-100));
  --ndw-color-alternative-500: hsl(var(--_alternative-500));
  --ndw-color-critical-100: hsl(var(--_critical-100));
  --ndw-color-critical-200: hsl(var(--_critical-200));
  --ndw-color-critical-300: hsl(var(--_critical-300));
  --ndw-color-critical-500: hsl(var(--_critical-500));
  --ndw-color-info-100: hsl(var(--_info-100));
  --ndw-color-info-200: hsl(var(--_info-200));
  --ndw-color-info-500: hsl(var(--_info-500));

  --ndw-color-notification: hsl(19, 100%, 35%);

  --_data-a-500: 133, 100%, 21%;
  --_data-a-100: 101, 61%, 81%;
  --_data-b-500: 0, 0%, 27%;
  --_data-b-100: 0, 0%, 87%;
  --_data-c-500: 209, 97%, 38%;
  --_data-c-100: 194, 95%, 84%;
  --_data-d-500: 292, 95%, 33%;
  --_data-d-100: 292, 100%, 87%;
  --_data-e-500: 51, 95%, 23%;
  --_data-e-100: 54, 89%, 79%;
  --_data-f-500: 0, 97%, 35%;
  --_data-f-100: 0, 100%, 94%;

  --ndw-color-data-a-500: hsl(var(--_data-a-500));
  --ndw-color-data-a-100: hsl(var(--_data-a-100));
  --ndw-color-data-b-500: hsl(var(--_data-b-500));
  --ndw-color-data-b-100: hsl(var(--_data-b-100));
  --ndw-color-data-c-500: hsl(var(--_data-c-500));
  --ndw-color-data-c-100: hsl(var(--_data-c-100));
  --ndw-color-data-d-500: hsl(var(--_data-d-500));
  --ndw-color-data-d-100: hsl(var(--_data-d-100));
  --ndw-color-data-e-500: hsl(var(--_data-e-500));
  --ndw-color-data-e-100: hsl(var(--_data-e-100));
  --ndw-color-data-f-500: hsl(var(--_data-f-500));
  --ndw-color-data-f-100: hsl(var(--_data-f-100));

  --_alpha-black: 0, 0%, 0%;
  --_alpha-007: 0.07;
  --_alpha-015: 0.15;
  --_alpha-040: 0.4;

  --ndw-alpha-black-007: hsla(var(--_alpha-black), var(--_alpha-007));
  --ndw-alpha-black-015: hsla(var(--_alpha-black), var(--_alpha-015));
  --ndw-alpha-black-040: hsla(var(--_alpha-black), var(--_alpha-040));

  --ndw-alpha-white-040: hsla(var(--_white), var(--_alpha-040));

  --ndw-alpha-primary-007: hsla(var(--_primary-500), var(--_alpha-007));
  --ndw-alpha-primary-015: hsla(var(--_primary-500), var(--_alpha-015));

  --ndw-color-background: var(--ndw-color-primary);
  --ndw-color-background-hover: var(--ndw-color-primary-hover);
  --ndw-color-background-active: var(--ndw-color-primary-active);
  --ndw-color-background-disabled: var(--ndw-color-grey-300);

  --ndw-color-foreground: var(--ndw-color-white);
  --ndw-color-foreground-hover: var(--ndw-color-white);
  --ndw-color-foreground-active: var(--ndw-color-white);

  --ndw-color-text: var(--ndw-color-grey-700);

  --ndw-spacing-3xs: 0.125rem;
  --ndw-spacing-2xs: 0.25rem;
  --ndw-spacing-xs: 0.5rem;
  --ndw-spacing-sm: 0.75rem;
  --ndw-spacing-md: 1rem;
  --ndw-spacing-lg: 1.5rem;
  --ndw-spacing-xl: 2rem;
  --ndw-spacing-2xl: 2.5rem;
  --ndw-spacing-3xl: 3rem;
  --ndw-spacing-4xl: 5rem;
  --ndw-spacing-5xl: 8rem;

  --ndw-border-size-sm: 1px;
  --ndw-border-size-md: 2px;
  --ndw-border-size-lg: 3px;

  --ndw-border-radius-xs: 0.125rem;
  --ndw-border-radius-sm: 0.25rem;
  --ndw-border-radius-md: 0.5rem;
  --ndw-border-radius-lg: 1.5rem;

  --ndw-elevation-info: 0 0 0.5rem 0 hsla(var(--_link-500), 0.25);
  --ndw-elevation-content: 0 0.125rem 0.125rem 0 hsla(var(--_grey-600), 0.05);
  --ndw-elevation-dropdown: 0 0.25rem 1rem hsla(var(--_grey-600), 0.125);
  --ndw-elevation-popover: 0 0.5rem 1.25rem hsla(var(--_grey-600), 0.125);
  --ndw-backdrop-color: var(--ndw-alpha-black-040);

  --ndw-animation-speed-very-fast: 100ms;
  --ndw-animation-speed-fast: 200ms;
  --ndw-animation-speed-default: 300ms;
  --ndw-animation-speed-slow: 500ms;

  --ndw-icon-size-md: 1rem;
  --ndw-icon-size-lg: 1.5rem;

  --multi-select-default-width: 18.75rem;

  --ndw-font-family-body: 'Nunito Sans', sans-serif;
  --ndw-font-family-heading: 'DM Sans', sans-serif;

  --ndw-base-font-size: 16px;

  --ndw-font-size-2xs: 0.5625rem;
  --ndw-font-size-xs: 0.6875rem;
  --ndw-font-size-sm: 0.8125rem;
  --ndw-font-size-md: 1.125rem;
  --ndw-font-size-lg: 1.25rem;
  --ndw-font-size-xl: 1.5rem;

  --ndw-font-weight-regular: 400;
  --ndw-font-weight-bold: 650;

  --ndw-line-height-sm: 1.375rem;
  --ndw-line-height-md: 1.5rem;

  --ndw-rotate-half: rotate(180deg);

  --ndw-modal-width-sm: 31.25rem;
  --ndw-modal-width-md: 45rem;
}

[data-theme='nwb'] {
  --_primary-050: 176, 44%, 95%;
  --_primary-100: 176, 44%, 82%;
  --_primary-200: 176, 44%, 73%;
  --_primary-300: 176, 50%, 60%;
  --_primary-400: 176, 55%, 48%;
  --_primary-500: 176, 58%, 41%;
  --_primary-600: 176, 60%, 34%;
  --_primary-700: 176, 68%, 21%;
  --_primary-800: 176, 68%, 13%;

  --ndw-color-primary-050: hsl(var(--_primary-050));
  --ndw-color-primary-100: hsl(var(--_primary-100));
  --ndw-color-primary-200: hsl(var(--_primary-200));
  --ndw-color-primary-300: hsl(var(--_primary-300));
  --ndw-color-primary-400: hsl(var(--_primary-400));
  --ndw-color-primary-500: hsl(var(--_primary-500));
  --ndw-color-primary-600: hsl(var(--_primary-600));
  --ndw-color-primary-700: hsl(var(--_primary-700));
  --ndw-color-primary-800: hsl(var(--_primary-800));

  --_secondary-050: 0, 100%, 95%;
  --_secondary-100: 0, 100%, 90%;
  --_secondary-200: 0, 100%, 82%;
  --_secondary-300: 0, 100%, 74%;
  --_secondary-400: 0, 100%, 66%;
  --_secondary-500: 0, 100%, 58%;
  --_secondary-600: 0, 75%, 42%;
  --_secondary-700: 0, 79%, 26%;

  --ndw-color-secondary-050: hsl(var(--_secondary-050));
  --ndw-color-secondary-100: hsl(var(--_secondary-100));
  --ndw-color-secondary-200: hsl(var(--_secondary-200));
  --ndw-color-secondary-300: hsl(var(--_secondary-300));
  --ndw-color-secondary-400: hsl(var(--_secondary-400));
  --ndw-color-secondary-500: hsl(var(--_secondary-500));
  --ndw-color-secondary-600: hsl(var(--_secondary-600));
  --ndw-color-secondary-700: hsl(var(--_secondary-700));

  --_tertiary-400: 309, 29%, 36%;
  --_tertiary-500: 309, 29%, 18%;

  --ndw-color-tertiary-400: hsl(var(--_tertiary-400));
  --ndw-color-tertiary-500: hsl(var(--_tertiary-500));

  --ndw-alpha-primary-007: hsla(var(--_primary-500), var(--_alpha-007));
  --ndw-alpha-primary-015: hsla(var(--_primary-500), var(--_alpha-015));
}

body {
  font-family: var(--ndw-font-family-body);
  font-size: var(--ndw-base-font-size);
}

.sidebar-container.css-r1cy5n {
  background-color: var(--ndw-color-grey-700);
  color: var(--ndw-color-grey-400);

  div.sidebar-header.css-1be7p8e {
    padding-left: 0.25rem;
    padding-top: 0.125rem;

    img.css-32o4gv {
      max-width: 130px !important;
    }
  }

  div.search-field.css-1bn0s81 {
    background-color: var(--ndw-color-white);
    height: 2rem;
  }

  .sidebar-item.css-ld0a14 {
    border-radius: 0;
    color: var(--ndw-color-grey-400);
    height: 1.75rem;
    margin-inline: -0.75rem;

    svg {
      &.css-1e3avu6,
      &.css-1omskcr,
      &.css-ndobih,
      &.css-rqpmm3,
      &.css-9ilfw8 {
        color: var(--ndw-color-grey-400);
      }
    }

    &:hover {
      background-color: var(--ndw-color-grey-600);
      color: var(--ndw-color-white);
    }

    &[data-selected='true'] {
      background-color: transparent;
      color: var(--ndw-color-white);
      font-weight: 500;

      svg {
        &.css-1e3avu6,
        &.css-1omskcr,
        &.css-ndobih,
        &.css-rqpmm3,
        &.css-9ilfw8 {
          color: var(--ndw-color-white);
        }
      }

      &:hover {
        background-color: var(--ndw-color-grey-600);
      }
    }
  }
}