@forward "_partials/colour-constants";
@forward "_partials/space-constants";
@forward "_partials/text-constants";
@forward "_partials/media-constants";

@use "_partials/colour-constants" as *;
@use "_partials/text-constants" as *;

// Provide an overlay over backgrounds to darken, lighten an image to provide
// better visual contrast for content.
// Can be used as extensions on components that accommodate overlaid content.
%tint {
  position: relative;
  overflow: hidden;

  &-overlay {
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
  }

  &-content {
    position: relative;
    z-index: 2;
  }
}

// Dark tint layer provides a black tint
%dark-tint {
  @extend %tint;
  background-color: $grey-900;

  &::before {
    @extend %tint-overlay;
    background: $black;
  }
}

// Light tint layer provides a white tint
%light-tint {
  @extend %tint;

  &::before {
    @extend %tint-overlay;
    background: $white;
  }
}

// Palettes are colour groups to change all the colours within that wrapper to a specific set.

// Components that set their own element colours may need palette @extend added to them to override specificity. e.g.
// &.light-palette {
//   a {
//     @extend %light-palette;
//   }
// }

// Light
%light-palette {
  border-color: $grey-200;
  color: $grey-50;

  a {
    color: $white;
    font-weight: $font-weight-normal;

    &:hover {
      color: $grey-50;
    }
  }
}

%light-palette-bg {
  background-color: $white;
}

// Dark
%dark-palette {
  border-color: $grey-50;
  color: $grey-900;

  a {
    color: $utility-500;

    &:hover {
      color: $utility-600;
    }
  }
}

%dark-palette-bg {
  background-color: $grey-700;
}