{"version":3,"sources":["../../../../src/nhsuk/core/tools/_shape-arrow.scss"],"names":[],"mappings":"AAAA,gBAAgB;AAChB,uBAAuB;AACvB,8BAA8B;;AAE9B,GAAG;AACH,cAAc;AACd,EAAE;AACF,eAAe;AACf,GAAG;;AAEH,kDAAkD;AAClD,4EAA4E;AAC5E,8EAA8E;AAC9E,EAAE;AACF,6GAA6G;AAC7G,EAAE;AACF,6DAA6D;AAC7D,qDAAqD;AACrD,EAAE;AACF,kBAAkB;;AAElB;EACE,4BAA4B;;EAE5B,kDAAkD;AACpD;;AAEA,cAAc;AACd,EAAE;AACF,6EAA6E;AAC7E,4EAA4E;AAC5E,EAAE;AACF,8EAA8E;AAC9E,sEAAsE;AACtE,0DAA0D;AAC1D,EAAE;AACF,gEAAgE;AAChE,EAAE;AACF,2EAA2E;AAC3E,6DAA6D;AAC7D,6EAA6E;AAC7E,uEAAuE;AACvE,EAAE;AACF,6GAA6G;;AAE7G;EACE,iBAAiB;EACjB,QAAQ;EACR,SAAS;EACT,mBAAmB;EACnB,yBAAyB,EAAE,GAAG;;EAE9B,6BAA6B;EAC7B,kCAAkC;;EAElC;IACE,yCAAyC;EAC3C;;EAEA;IACE,sDAA8C;YAA9C,8CAA8C,EAAE,GAAG;IACnD,sCAAsC;IACtC,4BAA4B,EAAE,GAAG;EACnC,EAAE;IACA,oDAA4C;YAA5C,4CAA4C,EAAE,GAAG;IACjD,qDAAqD;IACrD,0BAA0B,EAAE,GAAG;EACjC,EAAE;IACA,oDAA4C;YAA5C,4CAA4C,EAAE,GAAG;IACjD,qDAAqD;IACrD,yBAAyB,EAAE,GAAG;EAChC,EAAE;IACA,sDAA8C;YAA9C,8CAA8C,EAAE,GAAG;IACnD,qDAAqD;IACrD,2BAA2B,EAAE,GAAG;EAClC,EAAE;IACA,+FAA+F;EACjG;AACF","file":"_shape-arrow.scss","sourcesContent":["@use \"sass:math\";\n@use \"../settings\" as *;\n@use \"../tools/functions\" as *;\n\n////\n/// Shape arrow\n///\n/// @group tools\n////\n\n/// Calculate the height of an equilateral triangle\n/// Multiplying half the length of the base of an equilateral triangle by the\n/// square root of three gives us its height. We use 1.732 as an approximation.\n///\n/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)\n///\n/// @param {Number} $base - Length of the base of the triangle\n/// @return {Number} Calculated height of the triangle\n///\n/// @access private\n\n@function _nhsuk-equilateral-height($base) {\n  $square-root-of-three: 1.732;\n\n  @return math.div($base, 2) * $square-root-of-three;\n}\n\n/// Arrow mixin\n///\n/// Generate Arrows (triangles) by using a mix of transparent (1) and coloured\n/// borders. The coloured borders inherit the text colour of the element (2).\n///\n/// Ensure the arrow is rendered correctly if browser colours are overridden by\n/// providing a clip path (3). Without this the transparent borders are\n/// overridden to become visible which results in a square.\n///\n/// We need both because older browsers do not support clip-path.\n///\n/// @param {String} $direction - Direction for arrow: up, right, down, left.\n/// @param {Number} $base - Length of the triangle 'base' side\n/// @param {Number} $height [null] - Height of triangle. Omit for equilateral.\n/// @param {String} $display [block] - CSS display property of the arrow\n///\n/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)\n\n@mixin nhsuk-shape-arrow($direction, $base, $height: null, $display: block) {\n  display: $display;\n  width: 0;\n  height: 0;\n  border-style: solid;\n  border-color: transparent; // 1\n\n  $base: nhsuk-px-to-rem($base);\n  $perpendicular: math.div($base, 2);\n\n  @if not $height {\n    $height: _nhsuk-equilateral-height($base);\n  }\n\n  @if $direction == \"up\" {\n    clip-path: polygon(50% 0%, 0% 100%, 100% 100%); // 3\n    border-width: 0 $perpendicular $height;\n    border-bottom-color: inherit; // 2\n  } @else if $direction == \"right\" {\n    clip-path: polygon(0% 0%, 100% 50%, 0% 100%); // 3\n    border-width: $perpendicular 0 $perpendicular $height;\n    border-left-color: inherit; // 2\n  } @else if $direction == \"down\" {\n    clip-path: polygon(0% 0%, 50% 100%, 100% 0%); // 3\n    border-width: $height $perpendicular 0 $perpendicular;\n    border-top-color: inherit; // 2\n  } @else if $direction == \"left\" {\n    clip-path: polygon(0% 50%, 100% 100%, 100% 0%); // 3\n    border-width: $perpendicular $height $perpendicular 0;\n    border-right-color: inherit; // 2\n  } @else {\n    @error \"Invalid arrow direction: expected `up`, `right`, `down` or `left`, got `#{$direction}`\";\n  }\n}\n"]}