$eds-c-hero-color: $t-a-palette-default-white;
$eds-c-hero-color--pastel: $t-a-palette-default-black;
$eds-c-hero-default-background-color: $t-a-palette-default-blue-medium-600;
$eds-c-hero-pastel-default-background-color: rgb(102, 170, 204);

$eds-hero-variants: (
  default: (
    button-color: $t-a-palette-default-black,
    button-bg: $t-a-palette-default-white,
    button-border: $t-a-palette-default-white,
    button-hover-color: $t-a-palette-default-white,
    button-hover-bg: transparent,
    button-hover-border: $t-a-palette-default-white,
    citation-color: $t-a-palette-default-white,
    citation-bg: transparent,
    citation-border: $t-a-palette-default-white,
    citation-hover-color: $t-a-palette-default-blue-medium-700,
    citation-hover-bg: $t-a-palette-default-white,
    citation-hover-border: $t-a-palette-default-white
  ),
  pastel: (
    button-color: $t-a-palette-default-white,
    button-bg: $t-a-palette-default-blue-medium-700,
    button-border: $t-a-palette-default-blue-medium-700,
    button-hover-color: $t-a-palette-default-blue-medium-700,
    button-hover-bg: $t-a-palette-default-white,
    button-hover-border: $t-a-palette-default-blue-medium-700,
    citation-color: $t-a-palette-default-blue-medium-700,
    citation-bg: transparent,
    citation-border: $t-a-palette-default-blue-medium-700,
    citation-hover-color: $t-a-palette-default-white,
    citation-hover-bg: $t-a-palette-default-blue-medium-700,
    citation-hover-border: $t-a-palette-default-blue-medium-700	
  )
);

@mixin eds-hero-css-vars($variant) {
  $m: map-get($eds-hero-variants, $variant);
  --eds-c-hero-button-color: #{map-get($m, button-color)};
  --eds-c-hero-button-bg: #{map-get($m, button-bg)};
  --eds-c-hero-button-border: #{map-get($m, button-border)};
  --eds-c-hero-button-hover-color: #{map-get($m, button-hover-color)};
  --eds-c-hero-button-hover-bg: #{map-get($m, button-hover-bg)};
  --eds-c-hero-button-hover-border: #{map-get($m, button-hover-border)};
  --eds-c-hero-button-citations-color: #{map-get($m, citation-color)};
  --eds-c-hero-button-citations-bg: #{map-get($m, citation-bg)};
  --eds-c-hero-button-citations-border: #{map-get($m, citation-border)};
  --eds-c-hero-button-citations-hover-color: #{map-get($m, citation-hover-color)};
  --eds-c-hero-button-citations-hover-bg: #{map-get($m, citation-hover-bg)};
  --eds-c-hero-button-citations-hover-border: #{map-get($m, citation-hover-border)};
}

@mixin eds-hero-button-consume($variant) {
  // Fallback first (older browsers)
  $m: map-get($eds-hero-variants, $variant);
  color: map-get($m, button-color);
  background-color: map-get($m, button-bg);
  border: $t-a-border-width-50 solid map-get($m, button-border);
  // Modern (custom properties)
  color: var(--eds-c-hero-button-color, map-get($m, button-color));
  background-color: var(--eds-c-hero-button-bg, map-get($m, button-bg));
  border: $t-a-border-width-50 solid var(--eds-c-hero-button-border, map-get($m, button-border));
  &:hover,
  &:focus {
    color: map-get($m, button-hover-color);
    background-color: map-get($m, button-hover-bg);
    border: $t-a-border-width-50 solid map-get($m, button-hover-border);
    color: var(--eds-c-hero-button-hover-color, map-get($m, button-hover-color));
    background-color: var(--eds-c-hero-button-hover-bg, map-get($m, button-hover-bg));
    border: $t-a-border-width-50 solid var(--eds-c-hero-button-hover-border, map-get($m, button-hover-border));
  }
}

@mixin eds-hero-citation-button-consume($variant) {
  $m: map-get($eds-hero-variants, $variant);
  // Fallback
  color: map-get($m, citation-color);
  background-color: map-get($m, citation-bg);
  border: $t-a-border-width-50 solid map-get($m, citation-border);
  // Modern
  color: var(--eds-c-hero-button-citations-color, map-get($m, citation-color));
  background-color: var(--eds-c-hero-button-citations-bg, map-get($m, citation-bg));
  border: $t-a-border-width-50 solid var(--eds-c-hero-button-citations-border, map-get($m, citation-border));
  &:hover,
  &:focus {
    color: map-get($m, citation-hover-color);
    background-color: map-get($m, citation-hover-bg);
    border: $t-a-border-width-50 solid map-get($m, citation-hover-border);
    color: var(--eds-c-hero-button-citations-hover-color, map-get($m, citation-hover-color));
    background-color: var(--eds-c-hero-button-citations-hover-bg, map-get($m, citation-hover-bg));
    border: $t-a-border-width-50 solid var(--eds-c-hero-button-citations-hover-border, map-get($m, citation-hover-border));
  }
}

.eds-c-hero {
	@include eds-hero-css-vars(default);
	color: $eds-c-hero-color;
	color: var(--eds-c-hero-color, $eds-c-hero-color);
	background-color: $eds-c-hero-default-background-color;
	background-color: var(--eds-c-hero-background-color, $eds-c-hero-default-background-color);

	&__link {
    color: var(--eds-c-hero-color, $eds-c-hero-color);

    &:hover {
      color: var(--eds-c-hero-color, $eds-c-hero-color);
      text-decoration-thickness: .25rem;
      text-underline-offset: .25rem;
    }

		&:visited {
        color: var(--eds-c-hero-color, $eds-c-hero-color);
        text-decoration-thickness: .25rem;
        text-underline-offset: .25rem;
    }
  }

	&__bg-overlay {
		background-image: radial-gradient(circle at top right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7));
		background-image: radial-gradient(circle at top right, var(--eds-c-hero-gradient-light, rgba(0, 0, 0, 0.4)), var(--eds-c-hero-gradient-dark, rgba(0, 0, 0, 0.7)));
	
		&--with-image {
            background-image: linear-gradient(to right, $eds-c-hero-default-background-color 60%, transparent);
            background-image: linear-gradient(to right, var(--eds-c-hero-background-color, $eds-c-hero-default-background-color) 60%, transparent);
			background-position: left center;
			background-size: 85%;
			background-repeat: no-repeat;
		}
	}

	.eds-c-button {
		@include eds-hero-button-consume(default);
	}

	.eds-c-hero__button--citations {
		@include eds-hero-citation-button-consume(default);
	}
}

.eds-c-hero .eds-c-breadcrumbs,
.eds-c-hero .eds-c-breadcrumbs__link {
	color: $eds-c-hero-color;
	color: var(--eds-c-hero-color, $eds-c-hero-color);
}

.eds-c-hero__colour-1 {
	--eds-c-hero-background-color: rgb(255, 21, 0);
}

.eds-c-hero__colour-2 {
	--eds-c-hero-background-color: rgb(255, 64, 0);
}

.eds-c-hero__colour-3 {
	--eds-c-hero-background-color: rgb(255, 106, 0);
}

.eds-c-hero__colour-4 {
	--eds-c-hero-background-color: rgb(255, 149, 0);
	--eds-c-hero-gradient-light: rgba(0, 0, 0, 0.5);
	--eds-c-hero-gradient-dark: rgba(0, 0, 0, 0.8);
}

.eds-c-hero__colour-5 {
	--eds-c-hero-background-color: rgb(255, 191, 0);
	--eds-c-hero-gradient-light: rgba(0, 0, 0, 0.5);
	--eds-c-hero-gradient-dark: rgba(0, 0, 0, 0.8);
}

.eds-c-hero__colour-6 {
	--eds-c-hero-background-color: rgb(255, 234, 0);
	--eds-c-hero-gradient-light: rgba(0, 0, 0, 0.5);
	--eds-c-hero-gradient-dark: rgba(0, 0, 0, 0.8);
}

.eds-c-hero__colour-7 {
	--eds-c-hero-background-color: rgb(234, 255, 0);
	--eds-c-hero-gradient-light: rgba(0, 0, 0, 0.5);
	--eds-c-hero-gradient-dark: rgba(0, 0, 0, 0.8);
}

.eds-c-hero__colour-8 {
	--eds-c-hero-background-color: rgb(191, 255, 0);
	--eds-c-hero-gradient-light: rgba(0, 0, 0, 0.5);
	--eds-c-hero-gradient-dark: rgba(0, 0, 0, 0.8);
}

.eds-c-hero__colour-9 {
	--eds-c-hero-background-color: rgb(149, 255, 0);
	--eds-c-hero-gradient-light: rgba(0, 0, 0, 0.5);
	--eds-c-hero-gradient-dark: rgba(0, 0, 0, 0.8);
}

.eds-c-hero__colour-10 {
	--eds-c-hero-background-color: rgb(106, 255, 0);
	--eds-c-hero-gradient-light: rgba(0, 0, 0, 0.5);
	--eds-c-hero-gradient-dark: rgba(0, 0, 0, 0.8);
}

.eds-c-hero__colour-11 {
	--eds-c-hero-background-color: rgb(43, 255, 0);
	--eds-c-hero-gradient-light: rgba(0, 0, 0, 0.5);
	--eds-c-hero-gradient-dark: rgba(0, 0, 0, 0.8);
}

.eds-c-hero__colour-12 {
	--eds-c-hero-background-color: rgb(0, 255, 43);
	--eds-c-hero-gradient-light: rgba(0, 0, 0, 0.5);
	--eds-c-hero-gradient-dark: rgba(0, 0, 0, 0.8);
}

.eds-c-hero__colour-13 {
	--eds-c-hero-background-color: rgb(0, 255, 106);
	--eds-c-hero-gradient-light: rgba(0, 0, 0, 0.5);
	--eds-c-hero-gradient-dark: rgba(0, 0, 0, 0.8);
}

.eds-c-hero__colour-14 {
	--eds-c-hero-background-color: rgb(0, 255, 149);
	--eds-c-hero-gradient-light: rgba(0, 0, 0, 0.5);
	--eds-c-hero-gradient-dark: rgba(0, 0, 0, 0.8);
}

.eds-c-hero__colour-15 {
	--eds-c-hero-background-color: rgb(0, 255, 191);
	--eds-c-hero-gradient-light: rgba(0, 0, 0, 0.5);
	--eds-c-hero-gradient-dark: rgba(0, 0, 0, 0.8);
}

.eds-c-hero__colour-16 {
	--eds-c-hero-background-color: rgb(0, 255, 234);
	--eds-c-hero-gradient-light: rgba(0, 0, 0, 0.5);
	--eds-c-hero-gradient-dark: rgba(0, 0, 0, 0.8);
}

.eds-c-hero__colour-17 {
	--eds-c-hero-background-color: rgb(0, 234, 255);
	--eds-c-hero-gradient-light: rgba(0, 0, 0, 0.5);
	--eds-c-hero-gradient-dark: rgba(0, 0, 0, 0.8);
}

.eds-c-hero__colour-18 {
	--eds-c-hero-background-color: rgb(0, 191, 255);
	--eds-c-hero-gradient-light: rgba(0, 0, 0, 0.5);
	--eds-c-hero-gradient-dark: rgba(0, 0, 0, 0.8);
}

.eds-c-hero__colour-19 {
	--eds-c-hero-background-color: rgb(0, 149, 255);
}

.eds-c-hero__colour-20 {
	--eds-c-hero-background-color: rgb(0, 106, 255);
}

.eds-c-hero__colour-21 {
	--eds-c-hero-background-color: rgb(0, 21, 255);
}

.eds-c-hero__colour-22 {
	--eds-c-hero-background-color: rgb(121, 77, 255);
}

.eds-c-hero__colour-23 {
	--eds-c-hero-background-color: rgb(151, 77, 255);
}

.eds-c-hero__colour-24 {
	--eds-c-hero-background-color: rgb(170, 51, 255);
}

.eds-c-hero__colour-25 {
	--eds-c-hero-background-color: rgb(198, 26, 255);
}

.eds-c-hero__colour-26 {
	--eds-c-hero-background-color: rgb(255, 0, 234);
}

.eds-c-hero__colour-27 {
	--eds-c-hero-background-color: rgb(255, 0, 191);
}

.eds-c-hero__colour-28 {
	--eds-c-hero-background-color: rgb(255, 0, 149);
}

.eds-c-hero__colour-29 {
	--eds-c-hero-background-color: rgb(255, 0, 106);
}

.eds-c-hero__colour-30 {
	--eds-c-hero-background-color: rgb(255, 0, 64);
}

.eds-c-hero__colour-31 {
	--eds-c-hero-background-color: rgb(255, 0, 21);
}

.eds-c-hero__colour-32 {
	--eds-c-hero-background-color: rgb(26, 26, 26);
}

.eds-c-hero__colour-33 {
	--eds-c-hero-background-color: rgb(1, 50, 75);
}
