@use '../variables' as *;
@use '../mixins' as *;

[theme='dark'] {
  // text colors
  --sb-color-text-gray: var(--sb-color-gray-200);
  --sb-color-text-gray-100: var(--sb-color-gray-800);
  --sb-color-text-gray-950: var(--sb-color-gray-200);
  --sb-color-text-black: var(--sb-color-dark-blue-50);
  --sb-color-text-teal: var(--sb-color-teal-muted-400);
  --sb-color-text-blue: var(--sb-color-blue-200);
  --sb-color-text-dark-blue: var(--sb-color-dark-blue-50);
  --sb-color-text-red-600: var(--sb-color-red-400);
  --sb-color-text-red-700: var(--sb-color-red-300);
  --sb-color-text-yellow-500: var(--sb-color-yellow-400);
  --sb-color-text-blue-600: var(--sb-color-blue-400);
  --sb-color-text-green: var(--sb-color-green-600);

  // background colors
  --sb-color-bg-blue-light: hsl(from var(--sb-color-bg-blue-800) h s l / 20%);
  --sb-color-bg-dark-blue: var(--sb-color-gray-950);
  --sb-color-bg-dark-blue-150: var(--sb-color-gray-900);
  --sb-color-bg-blue-100: var(--sb-color-blue-800);
  --sb-color-bg-gray: var(--sb-color-gray-950);
  --sb-color-bg-gray-50: var(--sb-color-gray-950);
  --sb-color-bg-gray-100: var(--sb-color-gray-950);
  --sb-color-bg-gray-600: transparent;
  --sb-color-bg-red-50: transparent;
  --sb-color-bg-red-light: hsl(from var(--sb-color-red-900) h s l / 20%);
  --sb-color-bg-white: var(--sb-color-gray-1000);
  --sb-color-bg-teal: var(--sb-color-teal-muted-400);
  --sb-color-bg-teal-600: var(--sb-color-teal-50);
  --sb-color-bg-teal-100: var(--sb-color-teal-900);
  --sb-color-bg-yellow-light: hsl(
    from var(--sb-color-bg-yellow-700) h s l / 20%
  );
  --sb-color-bg-yellow-100: var(--sb-color-yellow-300);
  --sb-color-bg-green-light: hsl(from var(--sb-color-green-800) h s l / 20%);
  --sb-color-gray-50: hsl(from var(--sb-color-gray-950) h s l / 20%);

  // border colors
  --sb-color-border-dark-blue: var(--sb-color-gray-950);
  --sb-color-border-blue-light: var(--sb-color-blue-400);
  --sb-color-border-gray: var(--sb-color-gray-800);
  --sb-color-border-gray-light: var(--sb-color-gray-800);
  --sb-color-border-transparent: var(--sb-color-gray-800);
  --sb-color-border-white: var(--sb-color-gray-800);

  // shadow colors
  --sb-color-shadow-teal-100: var(--sb-color-teal-900);

  // other elements
  @include scrollbar($gray-1000, $gray, $s-2);

  color: $gray-200;
  background: $gray-1000;

  // specific styles for DS elements
  .sb-select[aria-expanded='true'] .sb-select-list {
    scrollbar-color: $gray transparent;
  }
}