{"version":3,"sources":["../../../../src/govuk/components/button/_index.scss"],"names":[],"mappings":"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","file":"_index.scss","sourcesContent":["////\n/// @group components/button\n////\n\n/// Button component background colour\n///\n/// @type Colour\n/// @access public\n\n$govuk-button-background-colour: govuk-colour(\"green\") !default;\n\n/// Button component text colour\n///\n/// @type Colour\n/// @access public\n\n$govuk-button-text-colour: govuk-colour(\"white\") !default;\n\n/// Inverted button component background colour\n///\n/// @type Colour\n/// @access public\n\n$govuk-inverse-button-background-colour: govuk-colour(\"white\") !default;\n\n/// Inverted button component text colour\n///\n/// @type Colour\n/// @access public\n\n$govuk-inverse-button-text-colour: $govuk-brand-colour !default;\n\n@include govuk-exports(\"govuk/component/button\") {\n $govuk-button-colour: $govuk-button-background-colour;\n $govuk-button-text-colour: $govuk-button-text-colour;\n $govuk-button-hover-colour: govuk-shade($govuk-button-colour, 20%);\n $govuk-button-shadow-colour: govuk-shade($govuk-button-colour, 60%);\n\n // Secondary button variables\n $govuk-secondary-button-colour: govuk-colour(\"light-grey\");\n $govuk-secondary-button-text-colour: govuk-colour(\"black\");\n $govuk-secondary-button-hover-colour: govuk-shade($govuk-secondary-button-colour, 10%);\n $govuk-secondary-button-shadow-colour: govuk-shade($govuk-secondary-button-colour, 40%);\n\n // Warning button variables\n $govuk-warning-button-colour: govuk-colour(\"red\");\n $govuk-warning-button-text-colour: govuk-colour(\"white\");\n $govuk-warning-button-hover-colour: govuk-shade($govuk-warning-button-colour, 20%);\n $govuk-warning-button-shadow-colour: govuk-shade($govuk-warning-button-colour, 60%);\n\n // Inverse button variables\n $govuk-inverse-button-colour: $govuk-inverse-button-background-colour;\n $govuk-inverse-button-text-colour: $govuk-inverse-button-text-colour;\n $govuk-inverse-button-hover-colour: govuk-tint($govuk-inverse-button-text-colour, 90%);\n $govuk-inverse-button-shadow-colour: govuk-shade($govuk-inverse-button-text-colour, 30%);\n\n // Because the shadow (s0) is visually 'part of' the button, we need to reduce\n // the height of the button to compensate by adjusting its padding (s1) and\n // increase the bottom margin to include it (s2).\n $button-shadow-size: $govuk-border-width-form-element;\n\n .govuk-button {\n @include govuk-font($size: 19, $line-height: 19px);\n\n box-sizing: border-box;\n display: inline-block;\n position: relative;\n width: 100%;\n margin-top: 0;\n margin-right: 0;\n margin-left: 0;\n @include govuk-responsive-margin(6, \"bottom\", $adjustment: $button-shadow-size); // s2\n padding: (govuk-spacing(2) - $govuk-border-width-form-element) govuk-spacing(2)\n (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2)); // s1\n border: $govuk-border-width-form-element solid transparent;\n border-radius: 0;\n color: $govuk-button-text-colour;\n background-color: $govuk-button-colour;\n box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0\n text-align: center;\n vertical-align: top;\n cursor: pointer;\n -webkit-appearance: none;\n\n @include govuk-media-query($from: tablet) {\n width: auto;\n }\n\n // Ensure that any global link styles are overridden\n &:link,\n &:visited,\n &:active,\n &:hover {\n color: $govuk-button-text-colour;\n text-decoration: none;\n }\n\n // Fix unwanted button padding in Firefox\n &::-moz-focus-inner {\n padding: 0;\n border: 0;\n }\n\n &:hover {\n background-color: $govuk-button-hover-colour;\n }\n\n &:active {\n // Bump the button down so it looks like its being pressed in\n top: $button-shadow-size;\n }\n\n &:focus {\n border-color: $govuk-focus-colour;\n outline: $govuk-focus-width solid transparent;\n box-shadow: inset 0 0 0 1px $govuk-focus-colour;\n }\n\n &:focus:not(:active):not(:hover) {\n border-color: $govuk-focus-colour;\n color: $govuk-focus-text-colour;\n background-color: $govuk-focus-colour;\n box-shadow: 0 2px 0 $govuk-focus-text-colour;\n }\n\n // The following adjustments do not work for as\n // non-container elements cannot include pseudo elements (i.e. ::before).\n\n // Use a pseudo element to expand the click target area to include the\n // button's shadow as well, in case users try to click it.\n &::before {\n content: \"\";\n display: block;\n\n position: absolute;\n\n top: -$govuk-border-width-form-element;\n right: -$govuk-border-width-form-element;\n bottom: -($govuk-border-width-form-element + $button-shadow-size);\n left: -$govuk-border-width-form-element;\n\n background: transparent;\n }\n\n // When the button is active it is shifted down by $button-shadow-size to\n // denote a 'pressed' state. If the user happened to click at the very top\n // of the button, their mouse is no longer over the button (because it has\n // 'moved beneath them') and so the click event is not fired.\n //\n // This corrects that by shifting the top of the pseudo element so that it\n // continues to cover the area that the user originally clicked, which means\n // the click event is still fired.\n //\n // 🎉\n &:active::before {\n top: -($govuk-border-width-form-element + $button-shadow-size);\n }\n }\n\n .govuk-button[disabled] {\n opacity: (0.5);\n\n &:hover {\n background-color: $govuk-button-colour;\n cursor: not-allowed;\n }\n\n &:active {\n top: 0;\n box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0\n }\n }\n\n .govuk-button--secondary {\n background-color: $govuk-secondary-button-colour;\n box-shadow: 0 $button-shadow-size 0 $govuk-secondary-button-shadow-colour;\n\n &,\n &:link,\n &:visited,\n &:active,\n &:hover {\n color: $govuk-secondary-button-text-colour;\n }\n\n &:hover {\n background-color: $govuk-secondary-button-hover-colour;\n\n &[disabled] {\n background-color: $govuk-secondary-button-colour;\n }\n }\n }\n\n .govuk-button--warning {\n background-color: $govuk-warning-button-colour;\n box-shadow: 0 $button-shadow-size 0 $govuk-warning-button-shadow-colour;\n\n &,\n &:link,\n &:visited,\n &:active,\n &:hover {\n color: $govuk-warning-button-text-colour;\n }\n\n &:hover {\n background-color: $govuk-warning-button-hover-colour;\n\n &[disabled] {\n background-color: $govuk-warning-button-colour;\n }\n }\n }\n\n .govuk-button--inverse {\n background-color: $govuk-inverse-button-colour;\n box-shadow: 0 $button-shadow-size 0 $govuk-inverse-button-shadow-colour;\n\n &,\n &:link,\n &:visited,\n &:active,\n &:hover {\n color: $govuk-inverse-button-text-colour;\n }\n\n &:hover {\n background-color: $govuk-inverse-button-hover-colour;\n\n &[disabled] {\n background-color: $govuk-inverse-button-colour;\n }\n }\n }\n\n .govuk-button--start {\n @include govuk-typography-weight-bold;\n @include govuk-font-size($size: 24, $line-height: 1);\n\n display: inline-flex;\n min-height: auto;\n\n justify-content: center;\n }\n\n .govuk-button__start-icon {\n margin-left: govuk-spacing(1);\n\n @include govuk-media-query($from: desktop) {\n margin-left: govuk-spacing(2);\n }\n vertical-align: middle;\n flex-shrink: 0;\n align-self: center;\n // Work around SVGs not inheriting color from parent in forced color mode\n // (https://github.com/w3c/csswg-drafts/issues/6310)\n forced-color-adjust: auto;\n }\n}\n"]}