@use './variables' as *;

@function -flatten($map, $prefix: '') {
  $output: ();
  @each $x, $y in $map {
    @if type-of($y) == 'map' {
      $output: map-merge($output, -flatten($y, $prefix + '-' + $x));
    } @else {
      $output: map-merge(
        $output,
        (
          '--theme#{$prefix}-#{$x}': $y,
        )
      );
    }
  }
  @return $output;
}

@each $name, $material in ('light': $material-light-theme, 'dark': $material-dark-theme) {
  .theme--#{$name} {
    @each $x, $y in -flatten($material) {
      #{$x}: #{$y};
    }

    background-color: var(--theme-surface);
    color: var(--theme-text-primary);

    a {
      color: map-deep-get($material, 'text', 'link');
    }

    .text--primary {
      color: var(--theme-text-primary);
    }

    .text--secondary {
      color: var(--theme-text-secondary);
    }

    .text--disabled {
      color: var(--theme-text-disabled);
    }
  }
}

:root {
  --theme-bp-xs: #{map-get($grid-breakpoints, 'xs')};
  --theme-bp-sm: #{map-get($grid-breakpoints, 'sm')};
  --theme-bp-md: #{map-get($grid-breakpoints, 'md')};
  --theme-bp-lg: #{map-get($grid-breakpoints, 'lg')};
  --theme-bp-xl: #{map-get($grid-breakpoints, 'xl')};
}