{"version":3,"sources":["../../../../src/nhsuk/components/button/_index.scss"],"names":[],"mappings":"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","file":"_index.scss","sourcesContent":["@use \"sass:math\";\n@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n\n////\n/// Button component\n///\n/// 1. Ensure that any global link styles are overridden.\n/// 2. Fix unwanted button padding in Firefox.\n/// 3. 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/// 4. Use a pseudo element to expand and cover the button's bounds, used to\n///    add a button shadow or border without affecting the total height\n/// 5. Adjust margin and padding to accommodate button shadow\n///\n/// @group components/button\n////\n\n$nhsuk-button-padding-top-bottom-mobile: nhsuk-px-to-rem(10px);\n$nhsuk-button-padding-top-bottom-desktop: nhsuk-px-to-rem(14px);\n$nhsuk-button-padding-top-bottom-small: nhsuk-px-to-rem(6px);\n$nhsuk-button-padding-left-right: nhsuk-px-to-rem(16px);\n$nhsuk-button-padding-left-right-small: nhsuk-px-to-rem(12px);\n\n$nhsuk-button-search-icon-size: 28px;\n$nhsuk-button-search-icon-size-large: 38px;\n\n// @deprecated To be removed in v11.0\n$button-border-radius: $nhsuk-button-border-radius;\n$button-padding-top-bottom-mobile: $nhsuk-button-padding-top-bottom-mobile;\n$button-padding-top-bottom-desktop: $nhsuk-button-padding-top-bottom-desktop;\n$button-padding-left-right: $nhsuk-button-padding-left-right;\n$button-shadow-size: $nhsuk-button-shadow-size;\n\n@include nhsuk-exports(\"nhsuk/components/button\") {\n  .nhsuk-button {\n    box-sizing: border-box;\n\n    display: inline-block;\n\n    position: relative;\n\n    width: 100%;\n    min-height: nhsuk-px-to-rem(40px + $nhsuk-button-shadow-size);\n    margin-top: 0;\n    padding: $nhsuk-button-padding-top-bottom-mobile $nhsuk-button-padding-left-right; // [5]\n\n    overflow: visible;\n\n    border: $nhsuk-border-width-form-element solid transparent;\n    border-radius: nhsuk-px-to-rem($nhsuk-button-border-radius);\n\n    text-align: center;\n    vertical-align: top;\n\n    cursor: pointer;\n\n    appearance: none;\n\n    @include nhsuk-button-style(\n      $button-colour: $nhsuk-button-colour,\n      $button-hover-colour: $nhsuk-button-hover-colour,\n      $button-active-colour: $nhsuk-button-active-colour,\n      $button-text-colour: $nhsuk-button-text-colour,\n      $button-shadow-colour: $nhsuk-button-shadow-colour\n    );\n\n    @include nhsuk-font(19, $line-height: 19px, $weight: bold);\n    @include nhsuk-responsive-margin(5, \"bottom\", $adjustment: $nhsuk-button-shadow-size); // [5]\n\n    @include nhsuk-media-query($from: tablet) {\n      width: auto;\n      min-height: nhsuk-px-to-rem(52px + $nhsuk-button-shadow-size);\n      padding: $nhsuk-button-padding-top-bottom-desktop $nhsuk-button-padding-left-right; // [5]\n      line-height: nhsuk-line-height(24px, $font-size: 19px);\n    }\n\n    // [1]\n    &,\n    &:hover,\n    &:active {\n      text-decoration: none;\n    }\n\n    // [2]\n    &::-moz-focus-inner {\n      padding: 0;\n      border: 0;\n    }\n\n    // Reset focus styles added to buttons as links\n    &:focus {\n      outline: none;\n      box-shadow: none;\n    }\n\n    // Add button focus styles ensuring the active \"pressed\" state has priority\n    &:focus:not(:active),\n    &:focus:not(:active):hover {\n      @include nhsuk-focused-button;\n    }\n\n    // Remove button shadow when pressed\n    &:active,\n    &:active:focus {\n      top: $nhsuk-button-shadow-size;\n      box-shadow: none;\n    }\n\n    &:disabled {\n      pointer-events: none;\n      opacity: (0.5);\n    }\n\n    // Default pseudo element styles for [3] and [4]\n    &::before,\n    &::after {\n      content: \"\";\n\n      display: block;\n\n      position: absolute;\n      top: -$nhsuk-border-width-form-element;\n      right: -$nhsuk-border-width-form-element;\n      bottom: -$nhsuk-border-width-form-element;\n      left: -$nhsuk-border-width-form-element;\n\n      border-radius: nhsuk-px-to-rem($nhsuk-button-border-radius);\n    }\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 [3]\n    &::before {\n      bottom: -($nhsuk-border-width-form-element + $nhsuk-button-shadow-size);\n      border: $nhsuk-border-width-form-element solid transparent;\n      background-color: transparent;\n    }\n\n    // When the button is active it is shifted down by $nhsuk-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    &:active::before {\n      top: -($nhsuk-border-width-form-element + $nhsuk-button-shadow-size);\n      bottom: -$nhsuk-border-width-form-element;\n    }\n\n    // Override high-contrast link colours to match buttons\n    @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n      color: ButtonText;\n\n      &,\n      &::before {\n        border-color: ButtonBorder;\n      }\n\n      &:not(:focus):not(:active):hover,\n      &:not(:focus):not(:active):hover::before,\n      &:not(:focus):not(:active):hover::after {\n        border-color: Highlight;\n        color: Highlight;\n      }\n    }\n  }\n\n  // Button variations\n\n  .nhsuk-button--secondary,\n  .nhsuk-button--secondary-solid {\n    @include nhsuk-button-style(\n      $button-colour: $nhsuk-secondary-button-colour,\n      $button-border-colour: $nhsuk-secondary-button-border-colour,\n      $button-hover-colour: $nhsuk-secondary-button-hover-colour,\n      $button-active-colour: $nhsuk-secondary-button-active-colour,\n      $button-text-colour: $nhsuk-secondary-button-text-colour,\n      $button-shadow-colour: $nhsuk-secondary-button-shadow-colour\n    );\n  }\n\n  .nhsuk-button--secondary-solid {\n    background-color: $nhsuk-secondary-button-solid-background-colour;\n  }\n\n  .nhsuk-button--reverse {\n    @include nhsuk-button-style(\n      $button-colour: $nhsuk-reverse-button-colour,\n      $button-hover-colour: $nhsuk-reverse-button-hover-colour,\n      $button-active-colour: $nhsuk-reverse-button-active-colour,\n      $button-text-colour: $nhsuk-reverse-button-text-colour,\n      $button-shadow-colour: $nhsuk-reverse-button-shadow-colour\n    );\n  }\n\n  .nhsuk-button--warning {\n    @include nhsuk-button-style(\n      $button-colour: $nhsuk-warning-button-colour,\n      $button-hover-colour: $nhsuk-warning-button-hover-colour,\n      $button-active-colour: $nhsuk-warning-button-active-colour,\n      $button-text-colour: $nhsuk-button-text-colour,\n      $button-shadow-colour: $nhsuk-warning-button-shadow-colour\n    );\n  }\n\n  .nhsuk-button--brand,\n  .nhsuk-button--login {\n    @include nhsuk-button-style(\n      $button-colour: $nhsuk-login-button-colour,\n      $button-hover-colour: $nhsuk-login-button-hover-colour,\n      $button-active-colour: $nhsuk-login-button-active-colour,\n      $button-text-colour: $nhsuk-button-text-colour,\n      $button-shadow-colour: $nhsuk-login-button-shadow-colour\n    );\n  }\n\n  // =========================================================\n  // Small buttons\n  // =========================================================\n\n  .nhsuk-button--small {\n    min-height: nhsuk-px-to-rem(32px + $nhsuk-button-shadow-size);\n    padding: $nhsuk-button-padding-top-bottom-small $nhsuk-button-padding-left-right-small; // [5]\n\n    @include nhsuk-responsive-margin(4, \"bottom\", $adjustment: $nhsuk-button-shadow-size); // [5]\n\n    @include nhsuk-media-query($from: tablet) {\n      @include nhsuk-font(16, $line-height: 19px, $weight: bold);\n    }\n  }\n\n  // =========================================================\n  // Icon buttons\n  // =========================================================\n\n  .nhsuk-button--icon {\n    display: flex;\n    position: relative;\n    align-items: center;\n\n    // Add minimum width for icon-only buttons\n    min-width: nhsuk-px-to-rem(44px);\n\n    // Prevent users from selecting icon button text\n    // e.g. When double clicking the button\n    user-select: none;\n\n    @include nhsuk-media-query($until: tablet) {\n      // Align icon and text in centre of button\n      justify-content: center;\n\n      // Reduce padding to better fit icon\n      padding-top: 0;\n      padding-bottom: 0;\n    }\n  }\n\n  .nhsuk-button:not(.nhsuk-button--small) {\n    @include nhsuk-media-query($from: tablet) {\n      min-width: nhsuk-px-to-rem(66px);\n    }\n  }\n\n  .nhsuk-button .nhsuk-icon {\n    flex-shrink: 0;\n\n    // Offset icon to the left when at the end, towards text\n    &:not(:only-child):last-child {\n      margin-right: nhsuk-px-to-rem(-6px);\n      margin-left: nhsuk-px-to-rem(-$nhsuk-icon-size + 6px);\n    }\n\n    // Offset icon to the right when at the start, towards text\n    &:not(:only-child):first-child {\n      margin-right: nhsuk-px-to-rem(-$nhsuk-icon-size + 6px);\n      margin-left: nhsuk-px-to-rem(-6px);\n    }\n\n    &:only-child {\n      margin-right: nhsuk-px-to-rem(-6px);\n      margin-left: nhsuk-px-to-rem(-6px);\n    }\n\n    @include nhsuk-media-query($from: tablet) {\n      position: absolute;\n      top: 50%;\n      left: $nhsuk-button-padding-left-right;\n\n      // Offset icon vertically (from top: 50%) into the centre\n      margin-top: nhsuk-px-to-rem(math.div($nhsuk-icon-size, -2));\n\n      // Offset icon to the left when at the end, towards text\n      &:not(:only-child):last-child {\n        right: $nhsuk-button-padding-left-right;\n        left: auto;\n        margin-right: nhsuk-px-to-rem(-6px);\n        margin-left: 0;\n      }\n\n      // Offset icon to the right when at the start, towards text\n      &:not(:only-child):first-child {\n        left: $nhsuk-button-padding-left-right;\n        margin-right: 0;\n        margin-left: nhsuk-px-to-rem(-6px);\n      }\n\n      &:only-child {\n        left: 50%;\n        margin-right: 0;\n        margin-left: nhsuk-px-to-rem(math.div($nhsuk-icon-size, -2));\n      }\n    }\n  }\n\n  // Increase icon size (tablet), excluding small buttons\n  .nhsuk-button:not(.nhsuk-button--small) .nhsuk-icon {\n    @include nhsuk-media-query($from: tablet) {\n      width: nhsuk-px-to-rem($nhsuk-icon-size-large);\n      height: nhsuk-px-to-rem($nhsuk-icon-size-large);\n\n      // Offset icon vertically (from top: 50%) into the centre\n      margin-top: nhsuk-px-to-rem(math.div($nhsuk-icon-size-large, -2));\n\n      // Offset icon to the left when at the end, towards text\n      &:not(:only-child):last-child {\n        margin-left: nhsuk-px-to-rem(-$nhsuk-icon-size-large + 6px);\n      }\n\n      // Offset icon to the right when at the start, towards text\n      &:not(:only-child):first-child {\n        margin-right: nhsuk-px-to-rem(-$nhsuk-icon-size-large + 6px);\n      }\n\n      &:only-child {\n        left: 50%;\n        margin-right: 0;\n        margin-left: nhsuk-px-to-rem(math.div($nhsuk-icon-size-large, -2));\n      }\n    }\n  }\n\n  // Increase icon size (tablet), search only\n  .nhsuk-button:not(.nhsuk-button--small) .nhsuk-icon--search:only-child {\n    @include nhsuk-media-query($from: tablet) {\n      width: nhsuk-px-to-rem($nhsuk-button-search-icon-size-large);\n      height: nhsuk-px-to-rem($nhsuk-button-search-icon-size-large);\n\n      // Offset icon vertically (from top: 50%) into the centre\n      margin-top: nhsuk-px-to-rem(math.div($nhsuk-button-search-icon-size-large, -2));\n      margin-left: nhsuk-px-to-rem(math.div($nhsuk-button-search-icon-size-large, -2));\n    }\n  }\n\n  // Prevent button icon size increase for small buttons (at tablet) by\n  // overriding the core icon size increase back to default size again\n  .nhsuk-button.nhsuk-button--small .nhsuk-icon {\n    @include nhsuk-media-query($from: tablet) {\n      width: nhsuk-px-to-rem($nhsuk-icon-size);\n      height: nhsuk-px-to-rem($nhsuk-icon-size);\n\n      &:not(:only-child):last-child {\n        right: $nhsuk-button-padding-left-right-small;\n      }\n\n      &:not(:only-child):first-child {\n        left: $nhsuk-button-padding-left-right-small;\n      }\n    }\n  }\n\n  // Increase icon size, search only\n  .nhsuk-button .nhsuk-icon--search:only-child {\n    @include nhsuk-media-query($from: mobile) {\n      width: nhsuk-px-to-rem($nhsuk-button-search-icon-size);\n      height: nhsuk-px-to-rem($nhsuk-button-search-icon-size);\n    }\n  }\n\n  .nhsuk-button.nhsuk-button--small .nhsuk-icon--search:only-child {\n    @include nhsuk-media-query($from: tablet) {\n      // Offset icon vertically (from top: 50%) into the centre\n      margin-top: nhsuk-px-to-rem(math.div($nhsuk-button-search-icon-size, -2));\n      margin-left: nhsuk-px-to-rem(math.div($nhsuk-button-search-icon-size, -2));\n    }\n  }\n\n  .nhsuk-button__content {\n    display: block;\n\n    // Preserve space for icon (small) at the end\n    padding-right: nhsuk-px-to-rem($nhsuk-icon-size);\n    padding-left: 0;\n\n    // Preserve space for icon (small) at the start\n    .nhsuk-icon + & {\n      padding-right: 0;\n      padding-left: nhsuk-px-to-rem($nhsuk-icon-size);\n    }\n\n    // Move padding to content to better fit icon\n    @include nhsuk-media-query($until: tablet) {\n      padding-top: $nhsuk-button-padding-top-bottom-mobile;\n      padding-bottom: $nhsuk-button-padding-top-bottom-mobile;\n\n      .nhsuk-button.nhsuk-button--small & {\n        padding-top: $nhsuk-button-padding-top-bottom-small;\n        padding-bottom: $nhsuk-button-padding-top-bottom-small;\n      }\n    }\n\n    @include nhsuk-media-query($from: tablet) {\n      // Preserve space for icon (large) at the end\n      .nhsuk-button:not(.nhsuk-button--small) & {\n        padding-right: nhsuk-px-to-rem($nhsuk-icon-size-large);\n      }\n\n      // Preserve space for icon (large) at the start\n      .nhsuk-button:not(.nhsuk-button--small) .nhsuk-icon + & {\n        padding-right: 0;\n        padding-left: nhsuk-px-to-rem($nhsuk-icon-size-large);\n      }\n    }\n  }\n}\n"]}