{"version":3,"sources":["../../../../src/nhsuk/core/tools/_shape-chevron.scss"],"names":[],"mappings":"AAAA,gBAAgB;AAChB,kBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;;AAErB,GAAG;AACH,gBAAgB;AAChB,EAAE;AACF,eAAe;AACf,GAAG;;AAEH,gBAAgB;AAChB,EAAE;AACF,+EAA+E;AAC/E,EAAE;AACF,4EAA4E;AAC5E,8CAA8C;AAC9C,sEAAsE;AACtE,uEAAuE;;AAEvE;EACE,2DAA2D;EAC3D,wDAAwD;EACxD,+CAA+C;EAC/C,iBAAiB;;EAEjB,gBAAgB;EAChB,iBAAiB;;EAEjB,kDAA0C;;UAA1C,0CAA0C;;EAE1C,6BAA6B;;EAE7B,0EAA0E;EAC1E,wEAAwE;EACxE,qDAAqD;EACrD,0CAA0C;EAC1C,+BAA+B;;EAE/B,cAAc;;EAEd;IACE,oDAAoD;EACtD,EAAE;IACA,4DAA4D;EAC9D,EAAE;IACA,6DAA6D;EAC/D,EAAE;IACA,oDAAoD;EACtD,EAAE;IACA,+FAA+F;EACjG;;EAEA;IACE,6DAA6D;IAC7D,iFAAiF;;IAEjF,sDAAsD;IACtD,0DAA0D;EAC5D;AACF","file":"_shape-chevron.scss","sourcesContent":["@use \"sass:math\";\n@use \"sass:string\";\n@use \"../settings\" as *;\n@use \"functions\" as *;\n\n////\n/// Shape chevron\n///\n/// @group tools\n////\n\n/// Chevron mixin\n///\n/// Generate chevron by using a box with borders on two sides, then rotating it.\n///\n/// @param {String} $direction - Direction for chevron: up, right, down, left\n/// @param {Colour} $colour - Colour of chevron\n/// @param {Number} $font-size [16] - Font size to base chevron size on\n/// @param {String} $display [block] - CSS display property of the arrow\n\n@mixin nhsuk-shape-chevron($direction, $colour, $font-size: 16, $display: block) {\n  $outline-width: nhsuk-em($nhsuk-chevron-border, $font-size);\n  $box-size: nhsuk-em(math.div($font-size, 2), $font-size);\n  $size: nhsuk-em(nhsuk-chevron-size($font-size));\n  display: $display;\n\n  width: $box-size;\n  height: $box-size;\n\n  clip-path: polygon(100% 100%, 100% 0, 0 0);\n\n  border-radius: $outline-width;\n\n  // Safari renders a hairline gap if we use borders, so use an inset outline\n  // instead. Because outlines are added to all sides of a box, we hide the\n  // outline on the two other two sides using clip-path.\n  outline: $outline-width solid currentcolor;\n  outline-offset: -$outline-width;\n\n  color: $colour;\n\n  @if $direction == \"up\" {\n    transform: translateY($outline-width) rotate(-45deg);\n  } @else if $direction == \"right\" {\n    transform: translateX(-$size + $outline-width) rotate(45deg);\n  } @else if $direction == \"down\" {\n    transform: translateY(-$size + $outline-width) rotate(135deg);\n  } @else if $direction == \"left\" {\n    transform: translateX($outline-width) rotate(225deg);\n  } @else {\n    @error \"Invalid arrow direction: expected `up`, `right`, `down` or `left`, got `#{$direction}`\";\n  }\n\n  @supports (outline-width: string.unquote(\"max(0px)\")) {\n    // Ensure that the chevron outline never gets smaller than 2px\n    outline-width: string.unquote(\"max(#{$nhsuk-chevron-border}, #{$outline-width})\");\n\n    // Ensure that the chevron never gets smaller than 16px\n    font-size: string.unquote(\"max(#{$font-size * 1px}, 1em)\");\n  }\n}\n"]}