{"version":3,"sources":["../../../../src/govuk/components/breadcrumbs/_index.scss"],"names":[],"mappings":"AAAA,kBAAkB;;AAElB,oBAAoB;;AAEpB;EACE,6DAA6D;EAC7D,cAAc;;EAEd,oCAAoC;EACpC,wCAAwC;;EAExC,wBAAwB;EACxB,8BAA8B;EAC9B,sEAAsE;;EAEtE,mBAAmB;EACnB,+DAA+D;;EAE/D,2EAA2E;EAC3E,iCAAiC;EACjC,CAAC;EACD,0BAA0B;EAC1B,2DAA2D;;EAE3D;IACE,sCAAsC;;IAEtC,4BAA4B;IAC5B,+BAA+B;IAC/B,oCAAoC;EACtC;;EAEA;IACE,uBAAuB;;IAEvB,SAAS;IACT,UAAU;IACV,qBAAqB;EACvB;;EAEA;IACE,qBAAqB;IACrB,kBAAkB;;IAElB,+BAA+B;;IAE/B,qEAAqE;IACrE,8BAA8B;IAC9B,mDAAmD;IACnD,mFAAmF;;IAEnF,WAAW;;IAEX,wEAAwE;IACxE;MACE,WAAW;MACX,cAAc;;MAEd,kBAAkB;MAClB,MAAM;MACN,SAAS;;MAET,sEAAsE;MACtE,4BAA4B;MAC5B,mFAAmF;;MAEnF,oBAAoB;MACpB,qBAAqB;;MAErB,cAAc;;MAEd,wBAAwB;;MAExB,aAAa;MACb,qEAAqE;MACrE,oCAAoC;;MAEpC;QACE,iFAAiF;;QAEjF,sDAAsD;QACtD,uFAAuF;QACvF,0DAA0D;MAC5D;IACF;;IAEA;MACE,cAAc;MACd,eAAe;;MAEf;QACE,aAAa;QACb,aAAa;MACf;IACF;EACF;;EAEA;IACE,0BAA0B;IAC1B,8BAA8B;EAChC;;EAEA;IACE;MACE;QACE,aAAa;;QAEb;;UAEE,qBAAqB;QACvB;;QAEA;UACE,8BAA8B;UAC9B,SAAS;QACX;MACF;;MAEA;QACE,aAAa;MACf;IACF;EACF;;EAEA;IACE,4BAA4B;;IAE5B;MACE,iCAAiC;IACnC;;IAEA;MACE,0BAA0B;IAC5B;EACF;AACF","file":"_index.scss","sourcesContent":["@use \"sass:string\";\n\n@import \"../../base\";\n\n@include govuk-exports(\"govuk/component/breadcrumbs\") {\n  // Component font-size on the Frontend (used for calculations)\n  $font-size: 16;\n\n  // Size of chevron (excluding border)\n  $chevron-size: govuk-em(7px, $font-size);\n\n  // Size of chevron border\n  $chevron-border-min-width: 1px;\n  $chevron-border-width: govuk-em($chevron-border-min-width, $font-size);\n\n  // Colour of chevron\n  $chevron-border-colour: govuk-functional-colour(secondary-text);\n\n  // Calculated altitude (△↕) of the right-angled isosceles chevron with sides\n  // of length 8 (7px + 1px border):\n  //\n  // √(8² + 8²) * 0.5 ≅ 5.655\n  $chevron-altitude-calculated: govuk-em(5.655px, $font-size);\n\n  .govuk-breadcrumbs {\n    @include govuk-font($size: $font-size);\n\n    margin-top: govuk-spacing(3);\n    margin-bottom: govuk-spacing(2);\n    color: govuk-functional-colour(text);\n  }\n\n  .govuk-breadcrumbs__list {\n    @include govuk-clearfix;\n\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n  }\n\n  .govuk-breadcrumbs__list-item {\n    display: inline-block;\n    position: relative;\n\n    margin-bottom: govuk-spacing(1);\n\n    // Add both margin and padding such that the chevron appears centrally\n    // between each breadcrumb item\n    margin-left: govuk-em(govuk-spacing(2), $font-size);\n    padding-left: govuk-em(govuk-spacing(2), $font-size) + $chevron-altitude-calculated;\n\n    float: left;\n\n    // Create a chevron using a box with borders on two sides, rotated 45deg.\n    &::before {\n      content: \"\";\n      display: block;\n\n      position: absolute;\n      top: 0;\n      bottom: 0;\n\n      // Offset by the difference between the width of the non-rotated square\n      // and its width when rotated\n      left: (($chevron-altitude-calculated * -2) + $chevron-size + $chevron-border-width);\n\n      width: $chevron-size;\n      height: $chevron-size;\n\n      margin: auto 0;\n\n      transform: rotate(45deg);\n\n      border: solid;\n      border-width: $chevron-border-min-width $chevron-border-min-width 0 0;\n      border-color: $chevron-border-colour;\n\n      @supports (border-width: string.unquote(\"max(0px)\")) {\n        $border-width-eval: \"max(#{$chevron-border-min-width}, #{$chevron-border-width})\";\n\n        // Ensure that the chevron never gets smaller than 16px\n        border-width: string.unquote($border-width-eval) string.unquote($border-width-eval) 0 0;\n        font-size: string.unquote(\"max(#{$font-size * 1px}, 1em)\");\n      }\n    }\n\n    &:first-child {\n      margin-left: 0;\n      padding-left: 0;\n\n      &::before {\n        content: none;\n        display: none;\n      }\n    }\n  }\n\n  .govuk-breadcrumbs__link {\n    @include govuk-link-common;\n    @include govuk-link-style-text;\n  }\n\n  .govuk-breadcrumbs--collapse-on-mobile {\n    @media #{govuk-until-breakpoint(tablet)} {\n      .govuk-breadcrumbs__list-item {\n        display: none;\n\n        &:first-child,\n        &:last-child {\n          display: inline-block;\n        }\n\n        &::before {\n          top: govuk-em(6px, $font-size);\n          margin: 0;\n        }\n      }\n\n      .govuk-breadcrumbs__list {\n        display: flex;\n      }\n    }\n  }\n\n  .govuk-breadcrumbs--inverse {\n    color: govuk-colour(\"white\");\n\n    .govuk-breadcrumbs__link {\n      @include govuk-link-style-inverse;\n    }\n\n    .govuk-breadcrumbs__list-item::before {\n      border-color: currentcolor;\n    }\n  }\n}\n"]}