@forward "settings";
@forward "tools";
@forward "generic";
@forward "elements";
@forward "objects";
@forward "components/buttons";
@forward "components/dropdown";
@forward "components/button-group";
@forward "components/forms";
@forward "components/card";
@forward "components/pagination";
@forward "components/badge";
@forward "components/alert";
@forward "components/progress";
@forward "components/close";
@forward "components/modal";
@forward "components/tooltip";
@forward "components/popover";
@forward "components/carousel";
@forward "components/blockquote";
@forward "components/icons";
@forward "components/preloader";
@forward "utilities";

@use "settings" as edgel;

: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")};
  }
}

@include edgel.configure(
  $web-components: true
);
