{"version":3,"file":"4370-afbf19321cb2338f12f6.js","mappings":"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","sources":["webpack://ess-mep/./src/helpers/animate.ts","webpack://ess-mep/./src/helpers/brand.ts","webpack://ess-mep/./src/helpers/fluid.ts","webpack://ess-mep/./src/helpers/fonts.ts","webpack://ess-mep/./src/helpers/media.ts","webpack://ess-mep/./src/helpers/scrollbars.ts","webpack://ess-mep/./src/helpers/srOnly.ts","webpack://ess-mep/./src/helpers/typography.ts","webpack://ess-mep/./src/stories/Components/Global/Buttons/Button/Button.styles.ts"],"sourcesContent":["import { css } from 'styled-components';\r\nexport const rootMargin = '0px 0px -33% 0px';\r\nexport const cubicEaseOut = `cubic-bezier(0.33, 1, 0.68, 1)`;\r\nexport const shouldAnimate = (innerCss) => {\r\n    return css `\r\n    @media (prefers-reduced-motion: no-preference) {\r\n      ${innerCss}\r\n    }\r\n  `;\r\n};\r\nexport const transition = (properties, duration = 0.35, timing = cubicEaseOut) => {\r\n    return shouldAnimate(css `\r\n    transition-duration: ${typeof duration === 'string' ? duration : `${duration}s`};\r\n    transition-property: ${properties};\r\n    transition-timing-function: ${timing};\r\n    will-change: ${properties};\r\n  `);\r\n};\r\n","export default {\r\n    global: {\r\n        /** Hex: #CD202C */\r\n        red: '#CD202C',\r\n        /** Hex: #BC1D28 */\r\n        darkRed: '#BC1D28',\r\n        /** Hex: #fff */\r\n        white: '#fff',\r\n        /** Hex: #f7f7f7 */\r\n        background: '#f7f7f7',\r\n    },\r\n    ess: {\r\n        /** Hex: #000 */\r\n        primary: '#000',\r\n        secondary: {\r\n            /** Hex: #EDEDED */\r\n            lightestGrey: '#EDEDED',\r\n            /** Hex: #E2DFDF */\r\n            lightGrey: '#E2DFDF',\r\n            /** Hex: #939598 */\r\n            midGrey: '#939598',\r\n            /** Hex: #58595B */\r\n            darkGrey: '#58595B',\r\n            /** Hex: #373737 */\r\n            darkestGrey: '#373737',\r\n        },\r\n    },\r\n    mep: {\r\n        /** Hex: #3D3C3E */\r\n        primary: '#3D3C3E',\r\n        secondary: {\r\n            /** Hex: ##F4F4F4 */\r\n            lightestGrey: '#F4F4F4',\r\n            /** Hex: #EEEEEF */\r\n            lightGrey: '#EEEEEF',\r\n            /** Hex: #E6E6E6 */\r\n            midGrey: '#E6E6E6',\r\n            /** Hex: #8C8E91 */\r\n            darkGrey: '#8C8E91',\r\n            /** Hex: #58595B */\r\n            darkestGrey: '#58595B',\r\n        },\r\n    },\r\n};\r\n","import { Device } from './media';\r\n/**\r\n * Base pixel value for the \"rem\" unit.\r\n */\r\nexport const PIXELS_PER_REM = 16;\r\n/**\r\n * Default pixel value for the min width.\r\n */\r\nexport const DEFAULT_MIN_VALUE = Device.TabletLarge;\r\n/**\r\n * Default pixel value for the max width.\r\n */\r\nexport const DEFAULT_MAX_VALUE = Device.ActualDesktop;\r\n/**\r\n * Define a fluid value between the min/max values at the min/max widths.\r\n */\r\nexport function fluid(min, max, minWidth = DEFAULT_MIN_VALUE, maxWidth = DEFAULT_MAX_VALUE) {\r\n    const minRem = min / PIXELS_PER_REM;\r\n    const maxRem = max / PIXELS_PER_REM;\r\n    const minWidthRem = minWidth / PIXELS_PER_REM;\r\n    const maxWidthRem = maxWidth / PIXELS_PER_REM;\r\n    const slope = (maxRem - minRem) / (maxWidthRem - minWidthRem);\r\n    const yAxisIntersection = -minWidthRem * slope + minRem;\r\n    const clampMin = `${round(minRem)}rem`;\r\n    const clampVal = `${round(yAxisIntersection)}rem + ${round(slope * 100)}vw`;\r\n    const clampMax = `${round(maxRem)}rem`;\r\n    return `clamp(${clampMin}, ${clampVal}, ${clampMax})`;\r\n}\r\n/**\r\n * Define a fluid value between the min/max values at the min/max widths.\r\n */\r\nexport function fluidUnit(min, max, unit = '', minWidth = DEFAULT_MIN_VALUE, maxWidth = DEFAULT_MAX_VALUE) {\r\n    const slope = (max - min) / (maxWidth - minWidth);\r\n    const yAxisIntersection = -minWidth * slope + min;\r\n    const clampMin = `${round(min)}`;\r\n    const clampVal = `${round(yAxisIntersection)}${unit} + ${round(slope * 100)}vw`;\r\n    const clampMax = `${round(max)}`;\r\n    return `clamp(${clampMin}${unit}, ${clampVal}, ${clampMax}${unit})`;\r\n}\r\n/**\r\n * Round to nearest hundredth.\r\n */\r\nfunction round(num) {\r\n    return Math.round(num * 100) / 100;\r\n}\r\n","import { css } from 'styled-components';\r\nexport default {\r\n    daxWide: {\r\n        light: css `\r\n      font-family: 'DaxWide', sans-serif;\r\n      font-style: normal;\r\n      font-weight: 300;\r\n    `,\r\n        regular: css `\r\n      font-family: 'DaxWide', sans-serif;\r\n      font-style: normal;\r\n      font-weight: 400;\r\n    `,\r\n        medium: css `\r\n      font-family: 'DaxWide', sans-serif;\r\n      font-style: normal;\r\n      font-weight: 500;\r\n    `,\r\n        bold: css `\r\n      font-family: 'DaxWide', sans-serif;\r\n      font-style: normal;\r\n      font-weight: 700;\r\n    `,\r\n        extraBold: css `\r\n      font-family: 'DaxWide', sans-serif;\r\n      font-style: normal;\r\n      font-weight: 900;\r\n    `,\r\n    },\r\n    museoSlab: {\r\n        medium: css `\r\n      font-family: 'museo-slab', serif;\r\n      font-style: normal;\r\n      font-weight: 500;\r\n    `,\r\n        bold: css `\r\n      font-family: 'museo-slab', serif;\r\n      font-style: normal;\r\n      font-weight: 700;\r\n    `,\r\n    },\r\n};\r\n","export var Device;\r\n(function (Device) {\r\n    Device[Device[\"MobileSmall\"] = 320] = \"MobileSmall\";\r\n    Device[Device[\"Mobile\"] = 375] = \"Mobile\";\r\n    Device[Device[\"MobileLarge\"] = 480] = \"MobileLarge\";\r\n    Device[Device[\"TabletSmall\"] = 568] = \"TabletSmall\";\r\n    Device[Device[\"Tablet\"] = 768] = \"Tablet\";\r\n    Device[Device[\"TabletLarge\"] = 1024] = \"TabletLarge\";\r\n    Device[Device[\"DesktopSmall\"] = 1280] = \"DesktopSmall\";\r\n    Device[Device[\"Desktop\"] = 1366] = \"Desktop\";\r\n    Device[Device[\"DesktopLarge\"] = 1600] = \"DesktopLarge\";\r\n    Device[Device[\"ActualDesktop\"] = 1920] = \"ActualDesktop\";\r\n    Device[Device[\"DesktopXL\"] = 2560] = \"DesktopXL\";\r\n})(Device || (Device = {}));\r\nexport function from(size) {\r\n    return `(min-width: ${size}px)`;\r\n}\r\nexport function until(size) {\r\n    return `(max-width: ${size - 1}px)`;\r\n}\r\nexport function between(start, end) {\r\n    return `${from(start)} and ${until(end)}`;\r\n}\r\n","import { css } from 'styled-components';\r\nimport brand from './brand';\r\nexport default css `\r\n  &::-webkit-scrollbar,\r\n  &::-webkit-scrollbar-track {\r\n    background-color: var(--bgColor);\r\n\r\n    [data-site='ess'] & {\r\n      --bgColor: ${brand.ess.secondary.lightGrey};\r\n    }\r\n\r\n    [data-site='mep'] & {\r\n      --bgColor: ${brand.mep.secondary.midGrey};\r\n    }\r\n  }\r\n\r\n  &::-webkit-scrollbar {\r\n    height: 8px;\r\n    width: 8px;\r\n  }\r\n\r\n  &::-webkit-scrollbar-thumb {\r\n    background-color: var(--fgColor);\r\n    border-radius: 4px;\r\n    cursor: pointer;\r\n\r\n    [data-site='ess'] & {\r\n      --fgColor: ${brand.ess.secondary.midGrey};\r\n    }\r\n\r\n    [data-site='mep'] & {\r\n      --fgColor: ${brand.ess.secondary.darkGrey};\r\n    }\r\n  }\r\n`;\r\n","import { css } from 'styled-components';\r\n/**\r\n * Show only for screen readers.\r\n * @description Sourced from https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034\r\n */\r\nconst srOnly = css `\r\n  border: 0 !important;\r\n  clip: rect(1px, 1px, 1px, 1px) !important;\r\n  -webkit-clip-path: inset(50%) !important;\r\n  clip-path: inset(50%) !important;\r\n  height: 1px !important;\r\n  margin: -1px !important;\r\n  overflow: hidden !important;\r\n  padding: 0 !important;\r\n  position: absolute !important;\r\n  width: 1px !important;\r\n  white-space: nowrap !important;\r\n`;\r\nexport default srOnly;\r\n","import svgQuoteMEP from '@img/icons/background/quote-mep.svg?url';\r\nimport svgQuote from '@img/icons/background/quote.svg?url';\r\nimport { css } from 'styled-components';\r\nimport { transition } from './animate';\r\nimport brand from './brand';\r\nimport { fluid } from './fluid';\r\nimport fonts from './fonts';\r\nimport scrollbars from './scrollbars';\r\nexport const headingStyles = css `\r\n  ${fonts.daxWide.bold};\r\n\r\n  color: currentColor;\r\n  margin: 0 0 ${fluid(24, 32)};\r\n`;\r\nexport const h1 = css `\r\n  ${headingStyles};\r\n\r\n  font-size: ${fluid(30, 60)};\r\n  line-height: ${fluid(38, 70)};\r\n`;\r\nexport const h2 = css `\r\n  ${headingStyles};\r\n\r\n  font-size: ${fluid(26, 40)};\r\n  line-height: ${fluid(36, 50)};\r\n`;\r\nexport const h3 = css `\r\n  ${headingStyles};\r\n\r\n  font-size: ${fluid(20, 32)};\r\n  line-height: ${fluid(28, 42)};\r\n`;\r\nexport const h4 = css `\r\n  ${headingStyles};\r\n\r\n  font-size: ${fluid(18, 24)};\r\n  line-height: ${fluid(26, 32)};\r\n`;\r\nconst paragraphStyles = css `\r\n  color: currentColor;\r\n  margin: 0 0 ${fluid(16, 24)};\r\n`;\r\nexport const paragraphLarge = css `\r\n  ${paragraphStyles};\r\n  ${fonts.daxWide.medium};\r\n\r\n  font-size: ${fluid(16, 20)};\r\n  line-height: ${fluid(26, 30)};\r\n`;\r\nexport const paragraphRegular = css `\r\n  ${paragraphStyles};\r\n  ${fonts.daxWide.regular};\r\n\r\n  font-size: ${fluid(16, 18)};\r\n  line-height: ${fluid(26, 28)};\r\n`;\r\nexport const paragraphSmall = css `\r\n  ${paragraphStyles};\r\n  ${fonts.daxWide.regular};\r\n\r\n  font-size: ${fluid(12, 14)};\r\n  line-height: ${fluid(16, 20)};\r\n`;\r\nexport const link = css `\r\n  ${transition('text-decoration-color')};\r\n\r\n  display: inline-block;\r\n  color: ${brand.global.red};\r\n  text-decoration: underline;\r\n  text-decoration-color: currentColor;\r\n  text-decoration-thickness: 1px;\r\n  text-underline-offset: 2px;\r\n\r\n  &:focus {\r\n    outline: none;\r\n  }\r\n\r\n  &:focus-visible {\r\n    outline: auto;\r\n    outline-offset: 2px;\r\n    outline-width: 1px;\r\n    outline-style: solid;\r\n  }\r\n\r\n  &:focus,\r\n  &:hover {\r\n    text-decoration-color: transparent;\r\n  }\r\n`;\r\nexport const blockquote = css `\r\n  ${paragraphLarge};\r\n\r\n  color: currentColor;\r\n  text-align: left;\r\n  position: relative;\r\n  padding-left: ${fluid(58, 80)};\r\n  background-size: ${fluid(42, 56)};\r\n  background-repeat: no-repeat;\r\n  background-position: top left;\r\n\r\n  [data-site='ess'] & {\r\n    background-image: url(${svgQuote});\r\n  }\r\n\r\n  [data-site='mep'] & {\r\n    background-image: url(${svgQuoteMEP});\r\n  }\r\n`;\r\nexport const blockquoteName = css `\r\n  ${paragraphStyles};\r\n\r\n  [data-site='mep']& {\r\n    > strong {\r\n      ${fonts.museoSlab.bold};\r\n    }\r\n  }\r\n\r\n  margin-top: ${fluid(16, 24)};\r\n  text-align: left;\r\n\r\n  > strong {\r\n    display: block;\r\n    color: ${brand.global.red};\r\n  }\r\n`;\r\nexport const table = css `\r\n  ${paragraphRegular};\r\n\r\n  background: ${brand.global.white};\r\n  border-collapse: collapse;\r\n  color: currentColor;\r\n  margin-bottom: 1em;\r\n  width: 100% !important;\r\n\r\n  td,\r\n  th {\r\n    border-right: 2px solid ${brand.global.white};\r\n    padding: 12px 16px;\r\n    text-align: left;\r\n  }\r\n\r\n  thead {\r\n    tr {\r\n      [data-site='ess'] & {\r\n        background: ${brand.ess.secondary.darkestGrey};\r\n      }\r\n\r\n      [data-site='mep'] & {\r\n        background: ${brand.global.red};\r\n      }\r\n\r\n      td,\r\n      th {\r\n        color: ${brand.global.white};\r\n\r\n        [data-site='ess'] & {\r\n          ${fonts.daxWide.bold};\r\n\r\n          text-transform: uppercase;\r\n        }\r\n\r\n        [data-site='mep'] & {\r\n          ${fonts.museoSlab.bold};\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  tbody {\r\n    tr {\r\n      &:nth-child(odd) {\r\n        background-color: #f1f1f1;\r\n      }\r\n\r\n      &:nth-child(even) {\r\n        background-color: #fcfcfc;\r\n      }\r\n\r\n      th {\r\n        [data-site='ess'] & {\r\n          ${fonts.daxWide.bold};\r\n\r\n          text-transform: uppercase;\r\n        }\r\n\r\n        [data-site='mep'] & {\r\n          ${fonts.museoSlab.bold};\r\n        }\r\n      }\r\n    }\r\n  }\r\n`;\r\nexport const contentStyles = css `\r\n  h1,\r\n  .h1-styles {\r\n    ${h1};\r\n  }\r\n\r\n  h2,\r\n  .h2-styles {\r\n    ${h2};\r\n  }\r\n\r\n  h3,\r\n  .h3-styles {\r\n    ${h3};\r\n  }\r\n\r\n  h4,\r\n  .h4-styles {\r\n    ${h4}\r\n  }\r\n\r\n  h5,\r\n  .h5-styles {\r\n    ${h4}\r\n  }\r\n\r\n  h1,\r\n  .h1-styles,\r\n  h2,\r\n  .h2-styles,\r\n  h3,\r\n  .h3-styles,\r\n  h4,\r\n  .h4-styles,\r\n  h5,\r\n  .h5-styles {\r\n    margin: ${fluid(24, 32)} 0 ${fluid(16, 24)};\r\n  }\r\n\r\n  p {\r\n    ${paragraphRegular}\r\n\r\n    a {\r\n      ${link};\r\n    }\r\n  }\r\n\r\n  strong {\r\n    ${fonts.daxWide.bold};\r\n  }\r\n\r\n  .large {\r\n    ${paragraphLarge}\r\n  }\r\n\r\n  .small {\r\n    ${paragraphSmall}\r\n  }\r\n\r\n  a {\r\n    ${link}\r\n  }\r\n\r\n  ol,\r\n  ul {\r\n    ${paragraphRegular};\r\n\r\n    margin: ${fluid(8, 12)} 0 ${fluid(24, 32)};\r\n\r\n    li {\r\n      color: currentColor;\r\n      margin: 0 0 ${fluid(8, 12)};\r\n    }\r\n  }\r\n\r\n  ol,\r\n  ul {\r\n    list-style: none;\r\n    padding-left: 1.2em;\r\n\r\n    li::before {\r\n      color: ${brand.global.red};\r\n      display: inline-block;\r\n      width: 1.2em;\r\n      margin-left: -1.2em;\r\n    }\r\n  }\r\n\r\n  ol {\r\n    counter-reset: li;\r\n\r\n    li {\r\n      counter-increment: li;\r\n\r\n      &::before {\r\n        content: counter(li) '.';\r\n\r\n        [data-site='ess'] & {\r\n          width: 3ch; // Allow space for double digit numbers\r\n        }\r\n\r\n        [data-site='mep'] & {\r\n          ${fonts.museoSlab.medium};\r\n\r\n          width: 2.5ch; // Allow space for double digit numbers\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  ul li::before {\r\n    content: '\\\\2022';\r\n    font-weight: bold;\r\n  }\r\n\r\n  blockquote {\r\n    ${blockquote};\r\n  }\r\n\r\n  .quote-name {\r\n    ${blockquoteName}\r\n  }\r\n\r\n  hr {\r\n    display: block;\r\n    background: ${brand.global.red};\r\n    border: 0;\r\n    height: 2px;\r\n    margin: ${fluid(24, 32)} 0;\r\n    padding: 0;\r\n    width: 100%;\r\n  }\r\n\r\n  table {\r\n    ${table};\r\n  }\r\n\r\n  .responsive-table {\r\n    ${scrollbars};\r\n\r\n    position: relative;\r\n    overflow-x: auto;\r\n  }\r\n\r\n  > *:first-child {\r\n    margin-top: 0;\r\n  }\r\n\r\n  > *:last-child {\r\n    margin-bottom: 0;\r\n  }\r\n\r\n  /**\r\n  * Allow for font changes within Rich Text on MEP\r\n  */\r\n  [data-site='mep'] & {\r\n    .dax {\r\n      ${fonts.daxWide.regular};\r\n    }\r\n\r\n    .dax-bold {\r\n      ${fonts.daxWide.bold};\r\n    }\r\n\r\n    .museo {\r\n      ${fonts.museoSlab.medium};\r\n    }\r\n\r\n    .museo-bold {\r\n      ${fonts.museoSlab.bold};\r\n    }\r\n  }\r\n`;\r\n","import { transition } from '@helpers/animate';\r\nimport brand from '@helpers/brand';\r\nimport { fluid } from '@helpers/fluid';\r\nimport fonts from '@helpers/fonts';\r\nimport { Device, from, until } from '@helpers/media';\r\nimport srOnly from '@helpers/srOnly';\r\nimport styled, { css } from 'styled-components';\r\nconst hoverStyles = css `\r\n  color: var(--colourTextActive);\r\n  border-color: var(--colourBorderActive);\r\n  background-size: 100% 100%;\r\n  text-decoration-color: var(--colourTextDecorationActive);\r\n\r\n  [data-site='ess'] & {\r\n    &[data-type='default'],\r\n    &[data-type='secondary'],\r\n    &[data-type='outline'] {\r\n      &::before,\r\n      &::after {\r\n        background-color: var(--colourBgActive);\r\n        opacity: 1;\r\n      }\r\n\r\n      &::before {\r\n        transform: translateX(100%);\r\n      }\r\n\r\n      &::after {\r\n        transform: translateX(125%);\r\n      }\r\n    }\r\n\r\n    &[data-type='back'] {\r\n      &::before,\r\n      &::after {\r\n        background-color: var(--colourBgActive);\r\n        opacity: 1;\r\n      }\r\n\r\n      &::before {\r\n        transform: translateX(-100%);\r\n      }\r\n\r\n      &::after {\r\n        transform: translateX(-125%);\r\n      }\r\n    }\r\n  }\r\n\r\n  [data-site='mep'] & {\r\n    &[data-type='default'],\r\n    &[data-type='secondary'],\r\n    &[data-type='secondary-alt'],\r\n    &[data-type='outline'],\r\n    &[data-type='back'] {\r\n      &::before {\r\n        opacity: var(--hoverOpacity);\r\n      }\r\n    }\r\n  }\r\n`;\r\nexport const CommonButtonStyles = css `\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: var(--borderWidth) solid var(--colourBorder);\r\n  background: var(--colourBg);\r\n  background-image: linear-gradient(to right, var(--colourBgActive), var(--colourBgActive));\r\n  background-repeat: no-repeat;\r\n  background-size: 0% 100%;\r\n  color: var(--colourText);\r\n  height: 44px;\r\n  padding: 0 ${fluid(12, 16)};\r\n  text-decoration: none;\r\n  user-select: none;\r\n  width: auto;\r\n`;\r\nconst Container = styled.button `\r\n  ${CommonButtonStyles};\r\n\r\n  /* Mobile click styles - button should mimic press */\r\n  @media ${until(Device.TabletLarge)} {\r\n    ${transition('transform, opacity', 0.15)};\r\n\r\n    span& {\r\n      button:active &,\r\n      a:active & {\r\n        transform: translateY(1.5px);\r\n      }\r\n    }\r\n\r\n    &:not(span) {\r\n      &:active {\r\n        transform: translateY(1.5px);\r\n      }\r\n    }\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    ${transition('background-size, border-color, color, text-decoration-color, opacity', 0.2)};\r\n\r\n    span& {\r\n      .focus-ring & {\r\n        outline: auto;\r\n        outline-offset: 3px;\r\n        outline-width: 2px;\r\n        outline-style: solid;\r\n      }\r\n\r\n      button:hover &,\r\n      a:hover & {\r\n        ${hoverStyles};\r\n      }\r\n    }\r\n\r\n    &:not(span) {\r\n      cursor: pointer;\r\n\r\n      &.focus-ring {\r\n        outline: auto;\r\n        outline-offset: 3px;\r\n        outline-width: 2px;\r\n        outline-style: solid;\r\n      }\r\n\r\n      &:hover {\r\n        ${hoverStyles};\r\n\r\n        background-color: var(--colourBg);\r\n        background-size: 100% 100%;\r\n      }\r\n    }\r\n  }\r\n\r\n  /* ESS hover icon styles */\r\n  [data-site='ess'] & {\r\n    &[data-type='default'],\r\n    &[data-type='secondary'],\r\n    &[data-type='outline'] {\r\n      position: relative;\r\n      z-index: 1;\r\n\r\n      &::before,\r\n      &::after {\r\n        ${transition('transform, background-color, opacity', 0.3)};\r\n\r\n        content: '';\r\n        position: absolute;\r\n        top: 0;\r\n        background-color: var(--colourBg);\r\n        height: 44px;\r\n        width: 30px;\r\n        z-index: -1;\r\n        opacity: 0;\r\n      }\r\n\r\n      &:before {\r\n        clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0% 100%, 0 50%, 0 0);\r\n        right: 12px;\r\n\r\n        @media ${until(Device.TabletLarge)} {\r\n          transform: translateX(100%);\r\n          opacity: 1;\r\n        }\r\n      }\r\n\r\n      &:after {\r\n        clip-path: polygon(30% 0, 80% 50%, 30% 100%, 0% 100%, 50% 50%, 0 0);\r\n        right: calc(var(--borderWidth) * -1);\r\n\r\n        @media ${until(Device.TabletLarge)} {\r\n          transform: translateX(125%);\r\n          opacity: 1;\r\n        }\r\n      }\r\n    }\r\n\r\n    &[data-type='back'] {\r\n      position: relative;\r\n      z-index: 1;\r\n\r\n      &::before,\r\n      &::after {\r\n        ${transition('transform, background-color, opacity', 0.3)};\r\n\r\n        content: '';\r\n        position: absolute;\r\n        top: 0;\r\n        background-color: var(--colourBg);\r\n        height: 44px;\r\n        width: 30px;\r\n        z-index: -1;\r\n        opacity: 0;\r\n      }\r\n\r\n      &:before {\r\n        clip-path: polygon(50% 0, 0 50%, 50% 100%, 100% 100%, 100% 50%, 100% 0);\r\n        left: 12px;\r\n\r\n        @media ${until(Device.TabletLarge)} {\r\n          transform: translateX(-100%);\r\n          opacity: 1;\r\n        }\r\n      }\r\n\r\n      &:after {\r\n        clip-path: polygon(70% 0, 20% 50%, 70% 100%, 100% 100%, 50% 50%, 100% 0);\r\n        left: calc(var(--borderWidth) * -1);\r\n\r\n        @media ${until(Device.TabletLarge)} {\r\n          transform: translateX(-125%);\r\n          opacity: 1;\r\n        }\r\n      }\r\n    }\r\n\r\n    &[data-type='outline'] {\r\n      &::before,\r\n      &::after {\r\n        top: -0.05rem;\r\n      }\r\n    }\r\n  }\r\n\r\n  /* MEP hover overlay styles */\r\n  [data-site='mep'] & {\r\n    border-radius: 6px;\r\n\r\n    &[data-type='default'],\r\n    &[data-type='secondary'],\r\n    &[data-type='secondary-alt'],\r\n    &[data-type='outline'],\r\n    &[data-type='back'] {\r\n      position: relative;\r\n\r\n      &::before {\r\n        ${transition('opacity', 0.25)};\r\n\r\n        border-radius: 6px;\r\n        content: '';\r\n        display: block;\r\n        background-color: ${brand.mep.primary};\r\n        position: absolute;\r\n        top: calc(var(--borderWidth) * -1);\r\n        left: calc(var(--borderWidth) * -1);\r\n        height: calc(100% + (var(--borderWidth) * 2));\r\n        width: calc(100% + (var(--borderWidth) * 2));\r\n        clip-path: polygon(\r\n          0% 100%,\r\n          5% 77%,\r\n          9% 66%,\r\n          14% 60%,\r\n          20% 56%,\r\n          28% 52%,\r\n          64% 52%,\r\n          72% 51%,\r\n          80% 47%,\r\n          86% 41%,\r\n          91% 29%,\r\n          95% 17%,\r\n          100% 0,\r\n          100% 100%\r\n        );\r\n        opacity: 0;\r\n      }\r\n    }\r\n  }\r\n\r\n  &[data-type='link'],\r\n  &[data-type='link-alt'],\r\n  &[data-type='link-black'] {\r\n    padding: 0;\r\n    text-decoration: underline;\r\n    text-decoration-color: var(--colourTextDecoration);\r\n    text-decoration-thickness: 2px;\r\n    text-underline-offset: 4px;\r\n    height: auto;\r\n  }\r\n\r\n  &[data-icon-only='true'] {\r\n    height: ${fluid(44, 60)};\r\n    justify-content: center;\r\n    padding: 0;\r\n    width: ${fluid(44, 60)};\r\n  }\r\n\r\n  /* Increase specificity to override :not(span) style */\r\n  &:disabled:disabled:disabled {\r\n    opacity: 0.66;\r\n    background-size: 0% 100%;\r\n    pointer-events: none;\r\n    text-decoration: none;\r\n\r\n    &::before,\r\n    &::after {\r\n      opacity: 0;\r\n    }\r\n  }\r\n\r\n  /* Colour settings */\r\n\r\n  &[data-type='default'] {\r\n    [data-site='ess'] & {\r\n      --borderWidth: 0px;\r\n      --colourBorder: ${brand.global.red};\r\n      --colourBorderActive: ${brand.global.red};\r\n      --colourBg: ${brand.global.red};\r\n      --colourBgActive: ${brand.global.red};\r\n      --colourText: ${brand.global.white};\r\n      --colourTextActive: ${brand.global.white};\r\n\r\n      @media ${from(Device.TabletLarge)} {\r\n        --colourBorder: ${brand.global.white};\r\n        --colourBg: ${brand.global.white};\r\n        --colourText: ${brand.ess.secondary.darkGrey};\r\n      }\r\n    }\r\n\r\n    [data-site='mep'] & {\r\n      --borderWidth: 1px;\r\n      --colourBorder: ${brand.global.red};\r\n      --colourBorderActive: ${brand.global.white};\r\n      --colourBg: ${brand.global.red};\r\n      --colourBgActive: ${brand.global.white};\r\n      --colourText: ${brand.global.white};\r\n      --colourTextActive: ${brand.global.red};\r\n      --hoverOpacity: 0.15;\r\n    }\r\n  }\r\n\r\n  &[data-type='secondary'],\r\n  /* secondary-alt is MEP only, use secondary as fallback on ESS */\r\n  &[data-type='secondary-alt'],\r\n  &[data-type='back'] {\r\n    [data-site='ess'] & {\r\n      --borderWidth: 0px;\r\n      --colourBorder: ${brand.global.red};\r\n      --colourBorderActive: ${brand.ess.secondary.darkGrey};\r\n      --colourBg: ${brand.global.red};\r\n      --colourBgActive: ${brand.ess.secondary.darkGrey};\r\n      --colourText: ${brand.global.white};\r\n      --colourTextActive: ${brand.global.white};\r\n    }\r\n  }\r\n\r\n  &[data-type='secondary'] {\r\n    [data-site='mep'] & {\r\n      --borderWidth: 1px;\r\n      --colourBorder: ${brand.global.white};\r\n      --colourBorderActive: ${brand.global.red};\r\n      --colourBg: ${brand.global.white};\r\n      --colourBgActive: ${brand.global.red};\r\n      --colourText: ${brand.global.red};\r\n      --colourTextActive: ${brand.global.white};\r\n      --hoverOpacity: 0.33;\r\n    }\r\n  }\r\n\r\n  &[data-type='secondary-alt'] {\r\n    [data-site='mep'] & {\r\n      --borderWidth: 1px;\r\n      --colourBorder: ${brand.global.white};\r\n      --colourBorderActive: ${brand.global.white};\r\n      --colourBg: ${brand.global.white};\r\n      --colourBgActive: ${brand.global.white};\r\n      --colourText: ${brand.global.red};\r\n      --colourTextActive: ${brand.global.red};\r\n      --hoverOpacity: 0.15;\r\n    }\r\n  }\r\n\r\n  &[data-type='outline'] {\r\n    [data-site='ess'] & {\r\n      --borderWidth: 0.05rem;\r\n      --colourBorder: ${brand.ess.secondary.darkGrey};\r\n      --colourBorderActive: ${brand.ess.secondary.darkGrey};\r\n      --colourBg: ${brand.ess.secondary.darkGrey};\r\n      --colourBgActive: ${brand.ess.secondary.darkGrey};\r\n      --colourText: ${brand.global.white};\r\n      --colourTextActive: ${brand.global.white};\r\n\r\n      @media ${from(Device.TabletLarge)} {\r\n        --colourBorder: ${brand.global.red};\r\n        --colourBg: transparent;\r\n        --colourText: ${brand.global.red};\r\n      }\r\n    }\r\n\r\n    [data-site='mep'] & {\r\n      --borderWidth: 2px;\r\n      --colourBorder: ${brand.global.red};\r\n      --colourBorderActive: ${brand.global.red};\r\n      --colourBg: transparent;\r\n      --colourBgActive: ${brand.global.red};\r\n      --colourText: ${brand.global.white};\r\n      --colourTextActive: ${brand.global.white};\r\n      --hoverOpacity: 0.33;\r\n    }\r\n  }\r\n\r\n  &[data-type='outline-alt'] {\r\n    [data-site='ess'] & {\r\n      --borderWidth: 1px;\r\n      --colourBorder: ${brand.global.red};\r\n      --colourBorderActive: ${brand.global.red};\r\n      --colourBg: ${brand.global.red};\r\n      --colourBgActive: ${brand.global.red};\r\n      --colourText: ${brand.global.white};\r\n      --colourTextActive: ${brand.global.white};\r\n\r\n      @media ${from(Device.TabletLarge)} {\r\n        --colourBorder: ${brand.global.white};\r\n        --colourBg: transparent;\r\n      }\r\n    }\r\n\r\n    [data-site='mep'] & {\r\n      --borderWidth: 2px;\r\n      --colourBorder: ${brand.global.red};\r\n      --colourBorderActive: ${brand.global.red};\r\n      --colourBg: ${brand.global.red};\r\n      --colourBgActive: ${brand.global.red};\r\n      --colourText: ${brand.global.white};\r\n      --colourTextActive: ${brand.global.white};\r\n\r\n      @media ${from(Device.TabletLarge)} {\r\n        --colourBorder: ${brand.global.white};\r\n        --colourBg: transparent;\r\n      }\r\n    }\r\n  }\r\n\r\n  &[data-type='link'] {\r\n    --borderWidth: 0;\r\n    --colourBorder: transparent;\r\n    --colourBorderActive: transparent;\r\n    --colourBg: transparent;\r\n    --colourBgActive: transparent;\r\n    --colourText: ${brand.global.white};\r\n    --colourTextActive: ${brand.global.white};\r\n    --colourTextDecoration: ${brand.global.white};\r\n    --colourTextDecorationActive: ${brand.global.white};\r\n\r\n    @media ${from(Device.TabletLarge)} {\r\n      --colourTextDecoration: transparent;\r\n    }\r\n  }\r\n\r\n  &[data-type='link-alt'] {\r\n    --borderWidth: 0;\r\n    --colourBorder: transparent;\r\n    --colourBorderActive: transparent;\r\n    --colourBg: transparent;\r\n    --colourBgActive: transparent;\r\n    --colourText: ${brand.global.red};\r\n    --colourTextActive: ${brand.global.red};\r\n    --colourTextDecoration: ${brand.global.red};\r\n    --colourTextDecorationActive: ${brand.global.red};\r\n\r\n    @media ${from(Device.TabletLarge)} {\r\n      --colourTextDecoration: transparent;\r\n    }\r\n  }\r\n\r\n  &[data-type='link-black'] {\r\n    --borderWidth: 0;\r\n    --colourBorder: transparent;\r\n    --colourBorderActive: transparent;\r\n    --colourBg: transparent;\r\n    --colourBgActive: transparent;\r\n    --colourText: #000000;\r\n    --colourTextActive: #000000;\r\n    --colourTextDecoration: #000000;\r\n    --colourTextDecorationActive: #000000;\r\n\r\n    @media ${from(Device.TabletLarge)} {\r\n      --colourTextDecoration: transparent;\r\n    }\r\n  }\r\n`;\r\nconst Text = styled.span `\r\n  ${transition('color', 0.2)}\r\n  ${fonts.daxWide.bold};\r\n\r\n  color: currentColor;\r\n  font-size: ${fluid(16, 18)};\r\n  line-height: 1em;\r\n  text-decoration: none;\r\n  text-transform: uppercase;\r\n  /* Ensure text sits on top of MEP overlay */\r\n  position: relative;\r\n\r\n  [data-icon-only='true'] & {\r\n    ${srOnly};\r\n  }\r\n`;\r\nconst IconWrapper = styled.div `\r\n  ${transition('color, transform', 0.2)}\r\n\r\n  display: block;\r\n  color: currentColor;\r\n  height: 14px;\r\n  margin: 0;\r\n  padding: 0;\r\n  /* Ensure icon sits on top of MEP overlay */\r\n  position: relative;\r\n\r\n  > svg,\r\n  > img {\r\n    height: 14px;\r\n    display: block;\r\n  }\r\n\r\n  [data-icon-position='left'] & {\r\n    margin-right: auto;\r\n    order: -1;\r\n    padding-right: 12px;\r\n  }\r\n\r\n  [data-icon-position='right'] & {\r\n    margin-left: auto;\r\n    order: 1;\r\n    padding-left: 12px;\r\n  }\r\n\r\n  [data-icon-only='true'] & {\r\n    color: currentColor;\r\n    height: 22px;\r\n    margin: 0;\r\n    padding: 0;\r\n\r\n    > svg,\r\n    > img {\r\n      height: 22px;\r\n    }\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    ${Container}[data-type='link']:hover &,\r\n    ${Container}[data-type='link'].focus-ring &,\r\n    ${Container}[data-type='link-alt']:hover &,\r\n    ${Container}[data-type='link-alt'].focus-ring &,\r\n    ${Container}[data-type='link-black']:hover &,\r\n    ${Container}[data-type='link-black'].focus-ring & {\r\n      transform: translateX(15%);\r\n    }\r\n  }\r\n`;\r\nconst ButtonStyles = {\r\n    Container,\r\n    IconWrapper,\r\n    Text,\r\n};\r\nexport default ButtonStyles;\r\n"],"names":["rootMargin","cubicEaseOut","shouldAnimate","innerCss","css","transition","properties","duration","arguments","length","undefined","timing","global","red","darkRed","white","background","ess","primary","secondary","lightestGrey","lightGrey","midGrey","darkGrey","darkestGrey","mep","PIXELS_PER_REM","DEFAULT_MIN_VALUE","Device","DEFAULT_MAX_VALUE","fluid","min","max","minRem","maxRem","minWidthRem","slope","yAxisIntersection","round","fluidUnit","unit","minWidth","num","Math","daxWide","light","regular","medium","bold","extraBold","museoSlab","from","size","until","between","start","end","brand","headingStyles","fonts","h1","h2","h3","h4","paragraphStyles","paragraphLarge","paragraphRegular","paragraphSmall","link","blockquote","svgQuote","svgQuoteMEP","blockquoteName","table","contentStyles","scrollbars","hoverStyles","CommonButtonStyles","Container","styled","displayName","componentId","Text","srOnly","IconWrapper"],"sourceRoot":""}