.input-code-container {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;

  .input-code-textfield {
    min-width: 364px;
    min-height: 80px;
    max-width: fit-content;

    .button__container {
      margin-right: 8px;
    }

    .textfield-icon {
      position: absolute;
      left: 12px;
      margin-top: 4px;
    }

    .andes-form-control__field {
      padding-left: 42px !important;
      box-shadow: none !important;
      text-transform: unset;

      &::placeholder {
        text-transform: none;
      }
    }
  }

  .andes-form-control--error {
    .andes-form-control__control {
      box-shadow: 0 0 0 2px $red;
    }
  }
}


.cart-spinner {
    display: flex;
    margin: auto;
    justify-content: center;
    align-items: center;
  
    &--inline {
      position: absolute;
    }
  
    &--block {
      width: 100%;
      position: absolute;
      height: 100%;
      left: 0;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1022;
  
      .cart-spinner__container {
        text-align: center;
      }
    }
  
    &--fullscreen {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1022;
  
      .cart-spinner__container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1023;
      }
    }
  
    &--transparent {
      background-color: transparentize($color: $andes-white, $amount: 0.1);
    }
  
    &--yellow {
      background-color: $light-yellow;
    }
  
    &--white {
      background-color: $andes-white;
    }
  }
  @include bundle($type: 'shared') {
    .andes-button {
      @include add-focus-visible;
  
      font-family: $font-family-primary;
      font-size: $button-font-size;
      font-weight: $font-weight-semibold;
      line-height: $button-height-large;
      padding: $button-padding-large;
      height: $button-height-large;
      text-align: center;
      border-radius: $border-radius-6;
      display: inline-block;
      width: auto;
      -webkit-font-smoothing: antialiased;
  
      @media (prefers-reduced-motion: no-preference) {
        transition: 0.18s ease-out;
        transition-property: background, color;
      }
  
      &:link {
        text-decoration: none;
      }
  
      &,
      & * {
        box-sizing: border-box;
      }
  
      svg {
        display: inline-block;
        vertical-align: middle;
        max-width: $button-icon-size;
        max-height: $button-icon-size;
      }
  
      &--full-width {
        width: 100%;
        display: block;
      }
  
      &:disabled,
      &[disabled],
      &[aria-disabled='true'] {
        pointer-events: none;
      }
  
      &--loading {
        .andes-progress-indicator-circular {
          align-items: center;
          display: flex;
          height: 100%;
          justify-content: center;
          position: relative;
          width: 100%;
        }
  
        .andes-progress-indicator-circular__container {
          align-items: center;
          display: inline-flex;
          justify-content: center;
          position: relative;
          width: 100%;
  
          @media (prefers-reduced-motion: no-preference) {
            animation: translateInButtonSpinner 0.2s, fadeIn 0.2s;
            animation-fill-mode: forwards;
          }
        }
  
        .andes-progress-indicator-circular__progress {
          display: block;
          stroke-width: 6px;
  
          div {
            display: flex;
            align-items: center;
            justify-content: center;
          }
  
          svg {
            position: relative;
            top: 3px;
          }
        }
  
        .andes-button__content {
          opacity: 0;
          max-height: 0;
          margin: -1px 0;
  
          @media (prefers-reduced-motion: no-preference) {
            animation:
              translateOutButtonSpinner 0.2s,
              fadeOut 0.2s;
            animation-fill-mode: forwards;
          }
        }
      }
  
      &--loading-complete {
        .andes-button__content {
          opacity: 1;
          max-height: none;
          margin: 0;
  
          @media (prefers-reduced-motion: no-preference) {
            animation: translateInButtonSpinnerComplete 0.2s, fadeIn 0.2s;
            animation-fill-mode: forwards;
          }
        }
      }
    }
  
    // Content
    .andes-button__content {
      @include clearfix;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
  
      // Hack to maintain desired height in elements,
      // not achieveable using inline-block in children elements
      * {
        display: block;
        float: left;
      }
    }
  
    .andes-button__text {
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  
      & + svg,
      svg + & {
        margin-left: $button-spacing-12;
      }
    }
  
    @keyframes fadeIn {
      from {
        opacity: 0;
      }
  
      to {
        opacity: 1;
      }
    }
  
    @keyframes fadeOut {
      from {
        opacity: 1;
      }
  
      to {
        opacity: 0;
      }
    }
  
    @keyframes translateInButtonSpinner {
      from {
        transform: translateY(50%);
      }
    }
  
    @keyframes translateOutButtonSpinner {
      to {
        transform: translateY(-50%);
      }
    }
  
    @keyframes translateInButtonSpinnerComplete {
      from {
        transform: translateY(50%);
      }
  
      to {
        transform: translateY(calc(-50% + 22px));
      }
    }
  }
  // Fonts
  $button-font-size: 16px;
  $button-font-size-base-value: 16;
  $button-font-size-small-value: 16;
  $button-font-size-medium: $font-size-14;
  $button-font-size-small: $font-size-12;
  
  // Spacings
  $button-padding-large: 0 $andes-spacing-24;
  $button-padding-medium: 0 $andes-spacing-12;
  $button-padding-small: 0 $andes-spacing-8;
  
  // Heights
  $button-height-large: 48px;
  $button-height-medium: 32px;
  $button-height-small: 24px;
  
  $button-icon-size: em(18, $button-font-size-base-value);
  
  $button-spacing-16: $andes-spacing-16;
  $button-spacing-12: $andes-spacing-12;
  $button-spacing-8: $andes-spacing-8;
  
  // Colors
  $button-chevron-border-color: $andes-gray-100;
  
  // andes button button class
  $andes-button: 'andes-button';
  $andes-button-border-radius: 2em;
  $andes-button-padding-lg: 14px;
  $andes-button-collapsed-max-width-sm: 2.6em;
  $andes-button-collapsed-max-width-lg: 3em;
  $andes-button-padding-right-12: 12px;
  
  // Button states variables
  
  // Loud type set by state
  $button-loud: (
    default: (
      background: $andes-blue-500,
      color: $andes-white,
      border: transparent
    ),
    hover: (
      background: $andes-blue-600,
      color: $andes-white,
      border: transparent
    ),
    pressed: (
      background: $andes-blue-700,
      color: $andes-white,
      border: transparent
    ),
    disabled: (
      background: $andes-gray-100,
      color: $andes-text-color-disabled,
      border: transparent
    ),
    focus: $andes-blue-300,
    box-shadow: $andes-white
  );
  
  // Quiet type set by state
  $button-quiet: (
    default: (
      background: $andes-blue-150,
      color: $andes-blue-500,
      border: transparent
    ),
    hover: (
      background: $andes-blue-200,
      color: $andes-blue-500,
      border: transparent
    ),
    pressed: (
      background: $andes-blue-300,
      color: $andes-blue-500,
      border: transparent
    ),
    disabled: (
      background: $andes-gray-100,
      color: $andes-text-color-disabled,
      border: transparent
    ),
    focus: $andes-blue-300,
    box-shadow: $andes-white
  );
  
  // Transparent type set by state
  $button-transparent: (
    default: (
      background: transparent,
      color: $andes-blue-500,
      border: transparent
    ),
    hover: (
      background: $andes-blue-100,
      color: $andes-blue-500,
      border: transparent
    ),
    pressed: (
      background: $andes-blue-200,
      color: $andes-blue-500,
      border: transparent
    ),
    disabled: (
      background: transparent,
      color: $andes-text-color-disabled,
      border: transparent
    ),
    focus: $andes-blue-300,
    box-shadow: $andes-white
  );
  
  $button-white: (
    default: (
      background: rgba($andes-white, 0),
      color: $andes-white,
      border: transparent
    ),
    hover: (
      background: rgba($andes-white, 0.04),
      color: $andes-white,
      border: none
    ),
    pressed: (
      background: rgba($andes-white, 0.04),
      color: $andes-white,
      border: none
    ),
    disabled: (
      background: rgba($andes-white, 0),
      color: $andes-text-color-disabled,
      border: rgba($andes-white, 0)
    ),
    focus: none
  );
  // Button common rules mixin
  @mixin button-shared-styles($map, $type) {
    border-color: map-deep-get($map, $type, 'border');
    background-color: map-deep-get($map, $type, 'background');
    color: map-deep-get($map, $type, 'color');
  
    // Icons should look like it's text
    svg[stroke]:not([stroke="none"]),
    path[stroke]:not([stroke="none"]) {
      stroke: map-deep-get($map, $type, 'color') !important;
    }
  
    svg[fill]:not([fill="none"]),
    path[fill]:not([fill="none"]) {
      fill: map-deep-get($map, $type, 'color') !important;
    }
  }
  
  // Layer element progress animation
  @mixin andes-button-layer-animation($map) {
    @include button-shared-styles($map: $map, $type: 'hover');
  
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: em(1, 18);
    margin: em(-1, 18);
    border-radius: em(4, 18);
    box-sizing: content-box;
    transform: scaleX(0);
    transform-origin: left center;
  }
  
  // progress animation
  @keyframes andes-button-start-width-animation {
    from {
      width: 0;
    }
  
    to {
      width: 90%;
    }
  }
  
  @keyframes andes-button-start-width-animation-reduce-motion {
    from {
      width: 0;
    }
  
    30% {
      width: 30%;
    }
  
    60% {
      width: 60%;
    }
  
    to {
      width: 90%;
    }
  }
  
  @mixin andes-button-finish-animation {
    transform: scaleX(1);
  
    @media (prefers-reduced-motion: no-preference) {
      transition: transform 250ms ease-in, opacity 500ms ease-in;
    }
  }
  @include bundle($type: 'desktop') {
    .#{$modal-namespace}--large {
      &.#{$modal-namespace}--fixed-actions {
        .#{$modal-namespace}__content {
          padding-bottom: $modal-fixed-actions-content-padding-large;
        }
      }
  
      .#{$modal-namespace}__actions {
        padding: $modal-actions-padding-large;
  
        &--fixed {
          padding: $modal-fixed-actions-padding-large;
        }
      }
    }
  }
  @include bundle($type: 'desktop') {
    .#{$modal-namespace}--large {
      &.#{$modal-namespace}--asset {
        .#{$modal-namespace}__header {
          padding-bottom: $modal-hader-media-padding-bottom-large;
        }
      }
  
      .#{$modal-namespace}__header {
        padding: $modal-padding-large;
        padding-bottom: $modal-header-padding-bottom-large;
  
        &.#{$modal-namespace}__header--sticky,
        &.#{$modal-namespace}__header--secondary {
          .#{$modal-namespace}__close-button {
            margin-top: 0;
          }
        }
      }
  
      .#{$modal-namespace}__close-button {
        margin-top: $modal-close-button-margin-top-large;
      }
  
      .#{$modal-namespace}__title {
        font-size: $modal-title-font-size-large;
      }
  
      .#{$modal-namespace}__content {
        padding: $modal-padding-large;
        padding-top: 0;
      }
    }
  }
  @include bundle($type: 'shared') {
    .#{$modal-namespace} {
      background-color: $modal-background-color;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      outline: none;
      position: relative;
      transform: translate3d(0, 0, 0);
  
      @media (prefers-reduced-motion: no-preference) {
        animation: modal-translate-in 0.2s ease-in-out, modal-fade-in 0.2s ease-in-out;
      }
  
      &__focus-retainer {
        @include remove-focus;
      }
  
      &--closing {
        @media (prefers-reduced-motion: no-preference) {
          animation: modal-translate-out 0.2s ease-in-out, modal-fade-out 0.2s ease-in-out;
        }
      }
  
      & > * {
        box-sizing: border-box;
        color: $andes-gray-900;
      }
  
      &__overlay {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: $modal-overlay-z-index;
        background-color: $modal-overlay-background-color;
        display: flex;
        justify-content: center;
        align-items: center;
  
        @media (prefers-reduced-motion: no-preference) {
          animation: modal-fade-in 0.2s ease-in-out;
        }
  
        &--closing {
          @media (prefers-reduced-motion: no-preference) {
            animation: modal-fade-out 0.2s ease-in-out;
          }
        }
  
        &--small,
        &--large {
          padding: $modal-overlay-padding-desktop;
        }
  
        &--full-webview-ios {
          padding-top: $modal-overlay-padding-top-webview-ios;
          padding-bottom: $modal-overlay-padding-bottom-webview-ios;
        }
      }
  
      &.#{$modal-namespace}--small,
      &.#{$modal-namespace}--large,
      &.#{$modal-namespace}--card {
        border-radius: $modal-br;
      }
  
      &.#{$modal-namespace}--small,
      &.#{$modal-namespace}--large {
        .#{$modal-namespace}__header--sticky,
        .#{$modal-namespace}__header--secondary {
          padding-top: $modal-header-sticky-padding-y;
          padding-bottom: $modal-header-sticky-padding-y;
  
          .#{$modal-namespace}__title {
            font-size: $modal-title-sticky-font-size;
          }
        }
      }
  
      &.#{$modal-namespace}--small,
      &.#{$modal-namespace}--large {
        .#{$modal-namespace}__header__contents {
          * + .#{$modal-namespace}__title {
            margin-top: $modal-media-title-spacing-desktop;
          }
        }
      }
  
      &.#{$modal-namespace}--full,
      &.#{$modal-namespace}--card {
        .#{$modal-namespace}__header__contents {
          * + .#{$modal-namespace}__title {
            margin-top: $modal-media-title-spacing-mobile;
          }
        }
      }
  
      &__scroll {
        overflow-y: auto;
        overflow-x: hidden;
        border-radius: $modal-br;
      }
  
      &__title {
        font-weight: $font-weight-semibold;
        line-height: 1;
      }
  
      &__header,
      &__actions {
        box-shadow: none;
        background-color: $modal-background-color;
      }
  
      &__actions {
        border-radius: $modal-actions-br;
        transition-property: box-shadow, padding, background-color;
        transition-duration: 0.08s;
        transition-timing-function: ease-in-out;
  
        &--fixed {
          position: sticky;
          bottom: 0;
        }
  
        &--border {
          border-top: $modal-actions-border-top;
          box-shadow: $modal-actions-shadow;
  
          &.padding {
            box-shadow: none;
            border-top: 0;
          }
        }
  
        .andes-button:not(:first-of-type) {
          margin-left: $modal-actions-margin;
        }
  
        .andes-button + .andes-button--full-width {
          margin-left: 0;
          margin-top: $modal-actions-margin;
        }
      }
  
      &__header {
        top: 0;
        display: flex;
        border-radius: $modal-header-br;
        position: relative;
        transition-property: box-shadow, background-color;
        transition-duration: 0.08s;
        transition-timing-function: ease-in-out;
  
        &__contents {
          display: flex;
          flex-direction: column;
          justify-content: center;
          flex-grow: 1;
  
          &--centered {
            align-items: center;
            text-align: center;
          }
        }
  
        &--sticky,
        &--secondary {
          .#{$modal-namespace}__header__contents {
            overflow: hidden;
          }
  
          .#{$modal-namespace}__title {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 100%;
          }
        }
  
        &--sticky {
          position: sticky;
          background-color: $modal-background-color;
          box-shadow: $modal-header-shadow;
          z-index: $modal-header-sticky-z-index;
        }
  
        &--secondary {
          width: 100%;
          position: fixed;
          background-color: transparent;
          z-index: $modal-overlay-z-index + 1;
  
          .#{$modal-namespace}__title {
            display: none;
          }
        }
  
        &--show {
          background-color: $modal-background-color;
          box-shadow: $modal-header-shadow;
        }
  
        &--show-title {
          .#{$modal-namespace}__title {
            display: block;
          }
        }
      }
  
      &__close-button {
        @include add-focus-visible;
  
        height: $modal-close-button-size;
        width: $modal-close-button-size;
        cursor: pointer;
        background-color: transparent;
        border: 0;
        appearance: none;
        padding: 0;
        font-size: inherit;
      }
    }
  
    @keyframes modal-fade-in {
      from { opacity: 0; }
      to { opacity: 1; }
    }
  
    @keyframes modal-fade-out {
      from { opacity: 1; }
      to { opacity: 0; }
    }
  
    @keyframes modal-translate-in {
      from { margin-top: 300px; }
      to { margin-top: 0; }
    }
  
    @keyframes modal-translate-out {
      from { margin-top: 0; }
      to { margin-top: 300px; }
    }
  }
  // Base
  $modal-namespace: 'andes-modal';
  $modal-background-color: $andes-white;
  $modal-padding-small: em(32);
  $modal-padding-large: em(48);
  $modal-padding-full: em(24);
  $modal-padding-card: em(24);
  $modal-br: $border-radius-6;
  
  // Overlay
  $modal-overlay-background-color: rgba(0, 0, 0, 0.8);
  $modal-overlay-padding-bottom-webview-ios: 60px;
  $modal-overlay-padding-top-webview-ios: 65px;
  $modal-overlay-padding-desktop: em(48);
  $modal-overlay-padding-card: em(48) em(24);
  $modal-overlay-z-index: $z-index;
  
  // Header
  $modal-header-shadow: 0 1px 0 0 $andes-gray-070, 0 0 $andes-spacing-24 0 $andes-gray-100;
  $modal-header-padding-bottom-small: em(24);
  $modal-header-padding-bottom-large: em(28);
  $modal-header-padding-card: em(26) $modal-padding-card em(20);
  $modal-header-padding-full: em(32) $modal-padding-full;
  $modal-header-sticky-padding-full: em(26) $modal-padding-full;
  $modal-header-sticky-padding-card: em(23) $modal-padding-card;
  $modal-header-sticky-padding-y: em(22);
  $modal-header-sticky-z-index: $modal-overlay-z-index + 1;
  $modal-hader-media-padding-bottom-small: em(16);
  $modal-hader-media-padding-bottom-large: em(20);
  $modal-header-br: $modal-br $modal-br 0 0;
  
  // Close Button
  $modal-close-button-size: em(20);
  $modal-close-button-top-card: -$andes-spacing-32;
  $modal-close-button-right-card: -$andes-spacing-4;
  $modal-close-button-margin-top-small: 2px;
  $modal-close-button-margin-top-large: $andes-spacing-4;
  $modal-close-button-margin-top-full: 2px;
  $modal-close-button-outline: 3px solid $andes-blue-300;
  
  // Title
  $modal-title-font-size-small: $font-size-24;
  $modal-title-font-size-large: $font-size-28;
  $modal-title-font-size-full: $font-size-24;
  $modal-title-font-size-card: $font-size-20;
  $modal-title-sticky-font-size: $font-size-20;
  $modal-media-title-spacing-desktop: $andes-spacing-32;
  $modal-media-title-spacing-mobile: 26px;
  
  // Content
  $modal-fixed-actions-content-padding-small: em(16);
  $modal-fixed-actions-content-padding-large: em(36);
  $modal-fixed-actions-content-padding-full: em(16);
  $modal-fixed-actions-content-padding-card: em(8);
  
  // Actions
  $modal-actions-margin: $andes-spacing-8;
  $modal-actions-br: 0 0 $modal-br $modal-br;
  $modal-actions-padding-small: 0 $modal-padding-small $modal-padding-small;
  $modal-actions-padding-large: em(4) $modal-padding-large $modal-padding-large;
  $modal-actions-padding-full: 0 $modal-padding-full $modal-padding-full;
  $modal-actions-padding-card: 0 $modal-padding-card $modal-padding-card;
  $modal-fixed-actions-padding-small: em(16) $modal-padding-small;
  $modal-fixed-actions-padding-large: em(16) $modal-padding-large;
  $modal-fixed-actions-padding-card: em(16) $modal-padding-card;
  $modal-fixed-actions-padding-full: em(16) $modal-padding-full;
  $modal-actions-shadow: 0 6px $andes-spacing-16 0 transparentize($andes-black, 0.9);
  $modal-actions-border-top: 1px solid $andes-gray-070;