@use 'sass:color';
@use 'colours';
@use 'layout';

@mixin hover(
  $color: colours.$off-black,
  $background-color: colours.$white,
  $border-color: colours.$light-grey,
  $hover-color-change-percentage: colours.$color-change-percentage
) {
  background-color: color.scale(
    $background-color,
    $lightness: $hover-color-change-percentage * -1
  );
  border-color: colours.$black;
  border-radius: 0;
  color: $color;
  text-decoration-thickness: 3px;
}

@mixin focus($color: colours.$off-black, $background-color: colours.$white) {
  background-color: $background-color;
  border-color: colours.$black;
  border-radius: 0;
  color: $color;
  outline: layout.$outline-size solid colours.$outline;
  outline-offset: unset;
  position: relative;
  text-decoration: none;
  z-index: layout.$focus-index; // make sure the focus outline isn't below adjacent elements
}

@mixin interactive(
  $color: colours.$off-black,
  $background-color: colours.$white,
  $border-color: colours.$light-grey,
  $hover-color-change-percentage: colours.$color-change-percentage,
  $focus-color-change-percentage: colours.$color-change-percentage
) {
  &:hover {
    @include hover(
      $color,
      $background-color,
      $border-color,
      $hover-color-change-percentage
    );

    @content;
  }

  &:focus {
    @include focus($color, $background-color);

    @content;
  }
}

@mixin visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  display: block;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
