// Copied from govuk_elements helpers

// Return ems from a pixel value
// This assumes a base of 19px
@function em($px, $base: 19) {
  @return ($px / $base) + em;
}

@function equilateral-height($base) {
  $square-root-of-three: 1.732;

  @return ($base / 2) * $square-root-of-three;
}

// Mixin to clean up retina bg images
@mixin background-image($path, $width, $height, $extension: ".png") {
  background-image: image-url($path + $extension);
  @include device-pixel-ratio() {
    background-image: image-url($path + "-2x" + $extension);
    background-size: $width $height;
  }
}

@mixin shape-arrow($direction, $base, $height: null, $display: block) {
  display: $display;

  width: 0;
  height: 0;

  border-style: solid;
  border-color: transparent; // 1

  $perpendicular: $base / 2;

  @if not $height {
    $height: equilateral-height($base);
  }

  @if $direction == "up" {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%); // 3

    border-width: 0 $perpendicular $height;
    border-bottom-color: inherit; // 2
  } @else if $direction == "right" {
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%); // 3

    border-width: $perpendicular 0 $perpendicular $height;
    border-left-color: inherit; // 2
  } @else if $direction == "down" {
    clip-path: polygon(0% 0%, 50% 100%, 100% 0%); // 3

    border-width: $height $perpendicular 0 $perpendicular;
    border-top-color: inherit; // 2
  } @else if $direction == "left" {
    clip-path: polygon(0% 50%, 100% 100%, 100% 0%); // 3

    border-width: $perpendicular $height $perpendicular 0;
    border-right-color: inherit; // 2
  } @else {
    @error "Invalid arrow direction: expected `up`, `right`, `down` or `left`, got `#{$direction}`";
  }
}

$spacing-points: (
  0: 0,
  1: 5px,
  2: 10px,
  3: 15px,
  4: 20px,
  5: 25px,
  6: 30px,
  7: 40px,
  8: 50px,
  9: 60px
);

$spacing-responsive-scale: (
  0: (null: 0),
  1: (null: 5px),
  2: (null: 10px),
  3: (null: 15px),
  4: (null: 15px, tablet: 20px),
  5: (null: 15px, tablet: 25px),
  6: (null: 20px, tablet: 30px),
  7: (null: 25px, tablet: 40px),
  8: (null: 30px, tablet: 50px),
  9: (null: 40px, tablet: 60px)
);

@function spacing($spacing-point) {
  $actual-input-type: type-of($spacing-point);
  @if $actual-input-type != "number" {
    @error "Expected a number (integer), but got a "
      + "#{$actual-input-type}.";
  }

  $is-negative: false;
  @if $spacing-point < 0 {
    $is-negative: true;
    $spacing-point: abs($spacing-point);
  }

  @if not map-has-key($spacing-points, $spacing-point) {
    @error "Unknown spacing variable `#{$spacing-point}`.";
  }

  $value: map-get($spacing-points, $spacing-point);
  @return if($is-negative, $value * -1, $value);
}

@mixin _responsive-spacing(
  $responsive-spacing-point,
  $property,
  $direction: "all",
  $important: false,
  $adjustment: false
) {
  $actual-input-type: type-of($responsive-spacing-point);
  @if $actual-input-type != "number" {
    @error "Expected a number (integer), but got a " + "#{$actual-input-type}.";
  }

  @if not map-has-key($spacing-responsive-scale, $responsive-spacing-point) {
    @error "Unknown spacing point `#{$responsive-spacing-point}`";
  }

  // Make sure that the return value from `_settings/spacing.scss` is a map.
  $scale-map: map-get($spacing-responsive-scale, $responsive-spacing-point);
  $actual-map-type: type-of($scale-map);
  @if $actual-map-type != "map" {
    @error "Expected a number (integer), but got a #{$actual-map-type}.";
  }

  // Loop through each breakpoint in the map
  @each $breakpoint, $breakpoint-value in $scale-map {
    @if $adjustment {
      $breakpoint-value: $breakpoint-value + $adjustment;
    }

    // The 'null' breakpoint is for mobile.
    @if not $breakpoint {
      @if $direction == all {
        #{$property}: $breakpoint-value if($important, !important, null);
      } @else {
        #{$property}-#{$direction}: $breakpoint-value if($important, !important, null);
      }
    } @else {
      @include media($breakpoint) {
        @if $direction == all {
          #{$property}: $breakpoint-value if($important, !important, null);
        } @else {
          #{$property}-#{$direction}: $breakpoint-value if($important, !important, null);
        }
      }
    }
  }
}

@mixin responsive-margin($responsive-spacing-point, $direction: "all", $important: false, $adjustment: false) {
  @include _responsive-spacing($responsive-spacing-point, "margin", $direction, $important, $adjustment);
}

@mixin govuk-responsive-padding($responsive-spacing-point, $direction: "all", $important: false, $adjustment: false) {
  @include _govuk-responsive-spacing($responsive-spacing-point, "padding", $direction, $important, $adjustment);
}

@function shade($colour, $percentage) {
  @return mix(#000000, $colour, $percentage);
}

// Hide, but not for screenreaders
.visuallyhidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

// Overrides frontend_toolkit
%outdent-to-full-width {
  margin-left: -$gutter-half;
  margin-right: -$gutter-half;
}
%mobile-outdent {
  @extend %outdent-to-full-width;
  @include media(tablet){
    margin-left: 0;
    margin-right: 0;
  }
}
%mobile-outdent-and-pad {
  @extend %mobile-outdent;
  padding-left: $gutter-half;
  padding-right: $gutter-half;
  @include media(tablet){
    padding-left: 0;
    padding-right: 0;
  }
}
