/*!*********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/css-loader/dist/cjs.js??clonedRuleSet-2.use[1]!../node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-2.use[2]!../node_modules/sass-loader/dist/cjs.js??clonedRuleSet-2.use[3]!./components/async/customers/customers.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************/
/**
 * Config: Configuration
 * -----------------------------------------------------------------------------
 * Master import that's included in all Vue components.
 * - No code should be output from the configuration files as they're reused.
 *
 */
/**
 * Config: SASS variables
 * -----------------------------------------------------------------------------
 * Automatically generated by `design` command, do not edit.
 *
 */
/**
 * Base: Classes
 * -----------------------------------------------------------------------------
 * Automatically generated by `design` command, do not edit.
 *
 */
/**
 * Config: Mixins
 * -----------------------------------------------------------------------------
 * Global and reusable utility functions to reduce common styling.
 * - Add in alphabetical order.
 *
 */
/**
 * Resets form buttons to appear as a standard text link.
 */
/**
 * Sets container properties.
 */
/**
 * Reset container properties.
 */
/**
 * Sets custom scrollbar on element.
 * - Add to element with overflow.
 */
/**
 * Default focus styling for browsers.
 */
/**
 * Resets input elements.
 */
/**
 * Resets list elements to appear as a stacked text links.
 */
/**
 * Loading/skeleton animation.
 */
/**
 * Reset text style to default.
 * - Used for preview bar and Storybook styles.
 */
/**
 * Outputs list of transition properties.
 *
 * Accepts:
 * - $transitions: {String} List of transition properties to set
 *
 * Usage:
 * .selector {
 *   @include transition(width, height var(--timing-quick);
 * }
 */
/**
 * Returns the transition properties in the correct format.
 * This function is used by @mixin transition($transitions...).
 */
/**
 * Hide element but make it accessible to screen readers.
 */
/**
 * Reverse the properties applied by @mixin visually-hidden.
 * @param {String} $position - Positioning method for element.
 */
/**
 * Button background color swipe on hover.
 * @param {String} $background - Background colour for swipe.
 */
/**
 * Template: Customers
 * -----------------------------------------------------------------------------
 * Styles for all customer templates.
 *
 */
.customers {
  /**
   * Onboarding (login, register, reset password, activate account).
   */
  /**
   * Pages (overview, orders, order, addresses).
   */
  /**
   * Errors.
   */
  /**
   * Media queries.
   */
}
.customers.critical-customers-hide {
  display: block;
}
.customers.critical-customers-clear {
  opacity: 1;
}
.customers__onboarding-image {
  height: 200px;
  position: relative;
}
.customers__onboarding-content {
  margin-block-end: var(--layout-padding-bottom);
  margin-block-start: var(--layout-padding-top);
}
.customers__onboarding-title {
  margin-block-end: var(--spacing-xs);
}
.customers__onboarding-text {
  margin-block-end: var(--layout-page-spacing);
}
.customers__onboarding-form-footer {
  gap: var(--spacing-xl);
}
.customers__onboarding-form-footer.customers__onboarding-form-footer--small-gap {
  gap: var(--spacing-s);
}
.customers__onboarding-prompt {
  display: block;
  width: 100%;
}
.customers__pages-content {
  background-color: var(--color-neutral-4);
  margin-block-end: var(--layout-padding-bottom);
  margin-block-start: 0;
}
.customers__pages-title {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-block-end: var(--spacing-xs);
}
.customers__account-content {
  padding: var(--spacing-7xl);
}
.customers__pages-sidebar {
  background-color: var(--color-neutral-5);
}
.customers__error-container {
  display: block;
  width: 100%;
}
.customers__error {
  color: var(--color-system-error-light-mode);
}
.customers__error:not(:first-child) {
  margin-block-start: var(--spacing-xs);
}
@media (max-width: 63.99em) {
  .customers__pages-header {
    padding: var(--spacing-l) var(--spacing-m) 0;
  }
}
@media (min-width: 64em) {
  .customers {
    /**
     * Onboarding (login, register, reset password, activate account).
     */
    /**
     * Pages (overview, orders, order, addresses).
     */
  }
  .customers__onboarding {
    margin-block-end: var(--layout-padding-bottom);
    margin-block-start: var(--layout-padding-top);
  }
  .customers__onboarding.customers__onboarding--has-image {
    margin-inline: auto;
    max-width: var(--max-content-width);
    padding-inline-end: var(--layout-mobile-margin);
    padding-inline-start: var(--layout-mobile-margin);
    width: 100%;
    display: grid;
    grid-gap: var(--layout-desktop-gutter);
    gap: var(--layout-desktop-gutter);
    grid-template-columns: repeat(12, minmax(10px, 1fr));
  }
}
@media (min-width: 64em) and (min-width: 48em) {
  .customers__onboarding.customers__onboarding--has-image {
    padding-inline-end: var(--layout-tablet-margin);
    padding-inline-start: var(--layout-tablet-margin);
  }
}
@media (min-width: 64em) and (min-width: 64em) {
  .customers__onboarding.customers__onboarding--has-image {
    padding-inline-end: var(--layout-desktop-margin);
    padding-inline-start: var(--layout-desktop-margin);
  }
}
@media (min-width: 64em) {
  .customers__onboarding.customers__onboarding--has-image .customers__onboarding-content {
    grid-column: span 6;
    grid-template-columns: repeat(6, minmax(10px, 1fr));
  }
  .customers__onboarding.customers__onboarding--has-image .customers__onboarding-forms.col.xs-span {
    display: flex;
    flex-direction: column;
    grid-column: 2/6;
    justify-content: center;
  }
  .customers__onboarding-image-column {
    display: flex;
    flex-direction: column;
    grid-column: span 6;
    justify-content: center;
  }
  .customers__onboarding-image {
    height: 0;
    padding-block-end: 133%;
  }
  .customers__onboarding-content {
    margin-block-end: 0;
    margin-block-start: 0;
  }
  .customers__pages-header {
    margin-block-end: 0;
    padding-block-start: var(--spacing-7xl);
    padding-inline-start: var(--spacing-7xl);
  }
  .customers__pages-title {
    margin-block-end: var(--spacing-s);
  }
}
/*!***********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/css-loader/dist/cjs.js??clonedRuleSet-2.use[1]!../node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-2.use[2]!../node_modules/sass-loader/dist/cjs.js??clonedRuleSet-2.use[3]!./components/async/customers/header/customers-header.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************/
/**
 * Config: Configuration
 * -----------------------------------------------------------------------------
 * Master import that's included in all Vue components.
 * - No code should be output from the configuration files as they're reused.
 *
 */
/**
 * Config: SASS variables
 * -----------------------------------------------------------------------------
 * Automatically generated by `design` command, do not edit.
 *
 */
/**
 * Base: Classes
 * -----------------------------------------------------------------------------
 * Automatically generated by `design` command, do not edit.
 *
 */
/**
 * Config: Mixins
 * -----------------------------------------------------------------------------
 * Global and reusable utility functions to reduce common styling.
 * - Add in alphabetical order.
 *
 */
/**
 * Resets form buttons to appear as a standard text link.
 */
/**
 * Sets container properties.
 */
/**
 * Reset container properties.
 */
/**
 * Sets custom scrollbar on element.
 * - Add to element with overflow.
 */
/**
 * Default focus styling for browsers.
 */
/**
 * Resets input elements.
 */
/**
 * Resets list elements to appear as a stacked text links.
 */
/**
 * Loading/skeleton animation.
 */
/**
 * Reset text style to default.
 * - Used for preview bar and Storybook styles.
 */
/**
 * Outputs list of transition properties.
 *
 * Accepts:
 * - $transitions: {String} List of transition properties to set
 *
 * Usage:
 * .selector {
 *   @include transition(width, height var(--timing-quick);
 * }
 */
/**
 * Returns the transition properties in the correct format.
 * This function is used by @mixin transition($transitions...).
 */
/**
 * Hide element but make it accessible to screen readers.
 */
/**
 * Reverse the properties applied by @mixin visually-hidden.
 * @param {String} $position - Positioning method for element.
 */
/**
 * Button background color swipe on hover.
 * @param {String} $background - Background colour for swipe.
 */
/**
 * Styles: Customers header (customers-header)
 * -----------------------------------------------------------------------------
 * Base styles for customers header component.
 * - Non-Vue component.
 *
 */
.customers-header {
  /**
   * Media queries.
   */
}
.customers-header__header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-block-end: var(--layout-page-spacing);
}
.customers-header__back-to.button .button__label {
  line-height: var(--icon-m);
}
.customers-header__back-to.button.button--reversed .button__label {
  margin-inline-start: var(--spacing-s);
}
.customers-header__back-to.button .button__icon .icon {
  height: var(--icon-m);
  width: var(--icon-m);
}
.customers-header__navigation {
  display: flex;
  flex-direction: column;
  gap: var(--layout-page-spacing);
}
.customers-header__navigation-link {
  align-items: center;
  display: inline-flex;
  gap: var(--spacing-s);
}
.customers-header__navigation-link .icon:last-of-type {
  margin-inline-start: auto;
}
@media (max-width: 63.99em) {
  .customers-header {
    /**
     * Added by address book form opening.
     */
  }
  .customers-header__navigation {
    gap: 0;
    margin-block-start: var(--spacing-xl);
  }
  .customers-header__navigation--mobile-hidden, .customers-header__navigation-item--mobile-hidden {
    display: none;
  }
  .customers-header__navigation-item:not(:last-child) {
    border-bottom: 1px solid var(--color-neutral-3);
  }
  .customers-header__navigation-link {
    padding-block: var(--spacing-l);
    width: 100%;
  }
  .customers-header__navigation-link .icon {
    height: 10px;
    width: 5.5px;
  }
  .customers-header.mobile-hidden {
    display: none;
  }
}
@media (min-width: 64em) {
  .customers-header__header, .customers-header__back-to, .customers-header__navigation-link .icon:last-of-type {
    display: none;
  }
  .customers-header__navigation-link {
    border-bottom: 2px solid transparent;
    color: var(--color-neutral-2);
  }
  .customers-header__navigation-link:hover {
    color: var(--color-neutral-1);
  }
  .customers-header__navigation-link.is-active {
    border-bottom: 2px solid var(--color-neutral-1);
    color: var(--color-neutral-1);
  }
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/css-loader/dist/cjs.js??clonedRuleSet-2.use[1]!../node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-2.use[2]!../node_modules/sass-loader/dist/cjs.js??clonedRuleSet-2.use[3]!./components/async/customers/onboarding-navigation/customers-onboarding-navigation.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Config: Configuration
 * -----------------------------------------------------------------------------
 * Master import that's included in all Vue components.
 * - No code should be output from the configuration files as they're reused.
 *
 */
/**
 * Config: SASS variables
 * -----------------------------------------------------------------------------
 * Automatically generated by `design` command, do not edit.
 *
 */
/**
 * Base: Classes
 * -----------------------------------------------------------------------------
 * Automatically generated by `design` command, do not edit.
 *
 */
/**
 * Config: Mixins
 * -----------------------------------------------------------------------------
 * Global and reusable utility functions to reduce common styling.
 * - Add in alphabetical order.
 *
 */
/**
 * Resets form buttons to appear as a standard text link.
 */
/**
 * Sets container properties.
 */
/**
 * Reset container properties.
 */
/**
 * Sets custom scrollbar on element.
 * - Add to element with overflow.
 */
/**
 * Default focus styling for browsers.
 */
/**
 * Resets input elements.
 */
/**
 * Resets list elements to appear as a stacked text links.
 */
/**
 * Loading/skeleton animation.
 */
/**
 * Reset text style to default.
 * - Used for preview bar and Storybook styles.
 */
/**
 * Outputs list of transition properties.
 *
 * Accepts:
 * - $transitions: {String} List of transition properties to set
 *
 * Usage:
 * .selector {
 *   @include transition(width, height var(--timing-quick);
 * }
 */
/**
 * Returns the transition properties in the correct format.
 * This function is used by @mixin transition($transitions...).
 */
/**
 * Hide element but make it accessible to screen readers.
 */
/**
 * Reverse the properties applied by @mixin visually-hidden.
 * @param {String} $position - Positioning method for element.
 */
/**
 * Button background color swipe on hover.
 * @param {String} $background - Background colour for swipe.
 */
/**
 * Styles: Customers onboarding navigation (customers-onboarding-navigation)
 * -----------------------------------------------------------------------------
 * Base styles for customers onboarding navigation component.
 * - Non-Vue component.
 *
 */
.customers-onboarding-nav {
  display: flex;
  gap: var(--spacing-2xl);
  justify-content: flex-start;
  margin-block-end: var(--spacing-l);
  position: relative;
}
.customers-onboarding-nav .button__label {
  color: var(--color-neutral-2);
  padding-block-end: var(--spacing-xs);
  position: relative;
}
.customers-onboarding-nav .button__label.is-active {
  color: var(--color-neutral-1);
}
.customers-onboarding-nav .button__label.is-active::after {
  background-color: var(--color-neutral-1);
  bottom: 0;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: var(--layer-flat);
}
.customers-onboarding-nav .button__label:hover {
  color: var(--color-neutral-1);
}