{"version":3,"sources":["../../../src/govuk/helpers/_shape-arrow.scss"],"names":[],"mappings":"AAAA,GAAG;AACH,wBAAwB;AACxB,GAAG;;AAEH,kDAAkD;AAClD,EAAE;AACF,4EAA4E;AAC5E,8EAA8E;AAC9E,EAAE;AACF,6DAA6D;AAC7D,qDAAqD;AACrD,kBAAkB;;AAElB;EACE,4BAA4B;;EAE5B,2CAA2C;AAC7C;;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,iBAAiB;;AAEjB;EACE,iBAAiB;;EAEjB,QAAQ;EACR,SAAS;;EAET,mBAAmB;EACnB,yBAAyB,EAAE,GAAG;;EAE9B,yBAAyB;;EAEzB;IACE,yCAAyC;EAC3C;;EAEA;IACE,sDAA8C;YAA9C,8CAA8C,EAAE,GAAG;;IAEnD,qDAAqD;IACrD,4BAA4B,EAAE,GAAG;EACnC,EAAE;IACA,oDAA4C;YAA5C,4CAA4C,EAAE,GAAG;;IAEjD,qDAAqD;IACrD,0BAA0B,EAAE,GAAG;EACjC,EAAE;IACA,oDAA4C;YAA5C,4CAA4C,EAAE,GAAG;;IAEjD,qDAAqD;IACrD,yBAAyB,EAAE,GAAG;EAChC,EAAE;IACA,sDAA8C;YAA9C,8CAA8C,EAAE,GAAG;;IAEnD,qDAAqD;IACrD,2BAA2B,EAAE,GAAG;EAClC,EAAE;IACA,+FAA+F;EACjG;AACF","file":"_shape-arrow.scss","sourcesContent":["////\n/// @group helpers/shapes\n////\n\n/// Calculate the height of an equilateral triangle\n///\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/// @param {Number} $base - Length of the base of the triangle\n/// @return {Number} Calculated height of the triangle\n/// @access private\n\n@function _govuk-equilateral-height($base) {\n  $square-root-of-three: 1.732;\n\n  @return ($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/// @access public\n\n@mixin govuk-shape-arrow($direction, $base, $height: null, $display: block) {\n  display: $display;\n\n  width: 0;\n  height: 0;\n\n  border-style: solid;\n  border-color: transparent; // 1\n\n  $perpendicular: $base / 2;\n\n  @if not $height {\n    $height: _govuk-equilateral-height($base);\n  }\n\n  @if $direction == \"up\" {\n    clip-path: polygon(50% 0%, 0% 100%, 100% 100%); // 3\n\n    border-width: 0 $perpendicular $height $perpendicular;\n    border-bottom-color: inherit; // 2\n  } @else if $direction == \"right\" {\n    clip-path: polygon(0% 0%, 100% 50%, 0% 100%); // 3\n\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\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\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"]}