@use "edgel" with (
  $brand: "grey",
  $web-components: true
);

@use "components/preloader" as *;

:root {
  @each $colour in (
    "blue-bright",
    "blue-muted",
    "blue-university",
    "brown",
    "burgundy",
    "green-dark",
    "grey",
    "jade",
    "pink",
    "purple",
    "red"
  ) {
    $edgel-palette: edgel.palette($colour);

    // Custom variable values only support SassScript inside `#{}`
    --#{edgel.$variable-prefix}-brand-#{$colour}: #{map-get($edgel-palette, "brand-color")};
    --#{edgel.$variable-prefix}-brand-hover-#{$colour}: #{map-get($edgel-palette, "brand-hover")};
    --#{edgel.$variable-prefix}-brand-link-#{$colour}: #{map-get($edgel-palette, "brand-link-color")};
    --#{edgel.$variable-prefix}-brand-bg-text-#{$colour}: #{map-get($edgel-palette, "brand-bg-text")};
    --#{edgel.$variable-prefix}-brand-bg-text-hover-#{$colour}: #{map-get($edgel-palette, "brand-bg-text-hover")};
    --#{edgel.$variable-prefix}-brand-as-link-#{$colour}: #{map-get($edgel-palette, "brand-as-link")};
    --#{edgel.$variable-prefix}-brand-as-link-hover-#{$colour}: #{map-get($edgel-palette, "brand-as-link-hover")};
  }
}
