@include bundle($type: 'mobile') {
    .#{$andes-bs-namespace} {
      width: 100%;
      background-color: $andes-bs-background-color;
      border-radius: $andes-bs-border-radius;
      box-sizing: border-box;
      height: 0;
      max-height: 100vh;
      transform: translate3d(0, 0, 0);
      position: relative;
  
      & > *,
      &__scroll > * {
        box-sizing: border-box;
        color: $andes-gray-900;
      }
  
      &__overlay {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: $andes-bs-overlay-z-index;
        background-color: $andes-bs-overlay-background-color;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        animation: modal-fade-in 0.2s ease-in-out;
        opacity: 0;
        transition-duration: $andes-bs-transition-duration;
      }
  
      &__scroll {
        overflow-y: auto;
        overflow-x: hidden;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
      }
  
      &__toggle-size-button {
  
        &--focused-by-kb {
          @include add-focus-visible();
        }
      
        left: 38%;
        border: none;
        outline: none;
        position: absolute;
        height: $andes-bs-drag-indicator-height;
        width: 74px;
        border-radius: $andes-bs-drag-indicator-border-radius;
        background-color: transparent;
        margin: $andes-spacing-8 $andes-spacing-16 0 $andes-spacing-16;
      }
  
      &__close {
        @include add-focus-visible();
  
        background-color: transparent;
        border: 0;
        display: flex;
        position: absolute;
        padding: $andes-bs-close-padding;
        right: $andes-bs-close-right-position;
        z-index: 1;
  
        &--hidden {
          opacity: 0;
          pointer-events: none;
  
          &:focus {
            opacity: 1;
            pointer-events: unset;
          }
        }
  
        &--outside {
          top: -$andes-bs-close-outside-top-position;
        }
      }
  
      &__action {
        width: 100%;
        padding: $andes-bs-action-padding;
        transition: border 0.08s ease-in-out;
  
        &--legacy {
          padding: $andes-bs-action-padding-legacy;
        }
      }
  
      &--fixed-action {
        .#{$andes-bs-namespace}__content {
          padding-bottom: 0;
        }
  
        .#{$andes-bs-namespace}__action {
          padding: $andes-bs-action-fixed-padding;
          position: sticky;
          bottom: 0;
          background-color: $andes-bs-background-color;
  
          &--border {
            border-top: $andes-bs-action-border-top;
          }
  
          &--legacy {
            padding: $andes-bs-action-fixed-padding-legacy;
          }
        }
      }
  
      &--hide-dimmer {
        position: absolute;
        left: 0;
        bottom: 0;
        box-shadow: $andes-bs-dimmer-off-box-shadow;;
      }
  
      &__content {
        width: 100%;
        flex-grow: 1;
        padding: $andes-bs-content-padding-legacy;
      }
  
      &--secondary {
        padding-top: $andes-spacing-8;
      }
  
      // Refactor Styles
      &__header {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: $andes-bs-content-padding;
  
        &--legacy {
          padding: 0;
          margin-bottom: $andes-spacing-8;
        }
  
        &--secondary {
          box-sizing: border-box;
          position: fixed;
          line-height: initial;
          left: 0;
          top: 0;
          padding: $andes-bs-secondary-padding;
          background-color: $andes-bs-background-color;
          border-top-left-radius : $andes-bs-border-radius-with-secondary;
          border-top-right-radius : $andes-bs-border-radius-with-secondary;
          box-shadow: $andes-bs-secondary-box-shadow;
          z-index: $andes-bs-secondary-z-index;
          width: 100%;
  
          &.andes-bottom-sheet__header--legacy {
            padding-left: $andes-spacing-24;
            padding-right: $andes-spacing-24;
          }
        }
  
        &-content-container {
          display: flex;
          width: -moz-available;
          width: -webkit-fill-available;
        }
      }
  
      &__header-content {
        flex-shrink: 0;
        line-height: 1;
        width: $andes-bs-header-content-width;
        padding: $andes-bs-header-content-padding;
        font-size: $andes-bs-header-content-font-size;
        font-weight: $andes-bs-header-content-font-weight;
        box-sizing: border-box;
        height: auto;
  
        &--ellipsis {
          overflow-x: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
  
        &--center {
          text-align: center;
          width: $andes-bs-centered-header-content-width;
        }
      }
  
      &__drag-indicator {
        flex-shrink: 0;
        height: $andes-bs-drag-indicator-height;
        width: $andes-bs-drag-indicator-width;
        border-radius: $andes-bs-drag-indicator-border-radius;
        background-color: $andes-bs-drag-indicator-background-color;
        margin: $andes-bs-drag-indicator-margin;
      }
      }
  }

  

  // Base
$andes-bs-namespace: 'andes-bottom-sheet';
$andes-bs-padding: $andes-spacing-16;
$andes-bs-background-color: $andes-white;
$andes-bs-border-radius: $border-radius-6 $border-radius-6 0 0;
$andes-bs-border-radius-with-secondary: $border-radius-6;
$andes-bs-transition-duration: 200ms;

// Overlay
$andes-bs-overlay-z-index: $z-index;
$andes-bs-overlay-background-color: rgba(0, 0, 0, 0.8);

// Dimmer off
$andes-bs-dimmer-off-box-shadow: 0 -6px $andes-spacing-16 0 rgba(0, 0, 0, 0.1);

// Drag Indicator
$andes-bs-drag-indicator-height: $andes-spacing-4;
$andes-bs-drag-indicator-width: $andes-spacing-32;
$andes-bs-drag-indicator-border-radius: $border-radius-2;
$andes-bs-drag-indicator-background-color: $andes-gray-250;
$andes-bs-drag-indicator-margin: 0 0 $andes-spacing-8 0;

// Close
$andes-bs-close-padding: $andes-spacing-8 0px $andes-spacing-12 $andes-spacing-8;
$andes-bs-close-right-position: $andes-spacing-16;
$andes-bs-close-outside-top-position: $andes-spacing-32;

// Header Content
$andes-bs-header-content-width: calc(100% - $andes-spacing-24);
$andes-bs-header-content-font-size: $font-size-20;
$andes-bs-header-content-padding: 6px 0px $andes-spacing-8 0px;
$andes-bs-header-content-font-weight: $font-weight-semibold;
$andes-bs-header-content-width: 100%;
$andes-bs-header-content-padding: $andes-spacing-8 0 $andes-spacing-12 0;
$andes-bs-centered-header-content-width: 100%;

// Secondary
$andes-bs-secondary-padding: $andes-spacing-8 $andes-spacing-16 0px $andes-spacing-16;
$andes-bs-secondary-z-index: $andes-bs-overlay-z-index + 1;
$andes-bs-secondary-box-shadow: 0 0 3px 1px transparentize($andes-black, 0.85);

// Content
$andes-bs-content-padding: $andes-spacing-8 $andes-bs-padding 0 $andes-bs-padding;
$andes-bs-content-padding-legacy: $andes-spacing-8 $andes-spacing-24 $andes-spacing-24 $andes-spacing-24;

// Action
$andes-bs-action-padding: 0 $andes-bs-padding $andes-bs-padding;
$andes-bs-action-padding-legacy: 0 $andes-spacing-24 $andes-spacing-24;
$andes-bs-action-fixed-padding: $andes-spacing-16 $andes-bs-padding $andes-bs-padding;
$andes-bs-action-fixed-padding-legacy: $andes-spacing-16 $andes-spacing-24 $andes-spacing-24;
$andes-bs-action-border-top: 1px solid $andes-gray-070;


@import './/atomic/InputCodeButton/input_code_button.mobile';

.input-code {
  bottom: 0;
  left: 0;
  height: 80px;
  background: $main-background-buyingflow;
  width: 100%;

  .is-open {
    position: relative;
  }

  &:not(.is-open) {
    border-top: 1px solid #e4e4e4;
    position: fixed;
  }
}

.input-code-open {
  padding: 0 20px;

  .textfield {
    margin-bottom: 24px;
  }
}

.andes-bottom-sheet__content {
  padding: 0;
}
@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));
      }
    }
  }

  
  // 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;
  }
}



// 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
);
/* stylelint-disable prettier/prettier */
/* stylelint-disable font-family-no-duplicate-names */
body {
    --coupon-icon-color: #{$coupon-icon-color};
    --coupon-icon-background: #{$coupon-icon-background};
    
    font-family: 'Proxima Nova', 'Helvetica Neue', Helvetica, Roboto, Arial,
      sans-serif, sans-serif;
  }
  
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
  }

  $andes-theme: 'mercadolibre' !default;
$demo-font-size: 1rem;
$demo-color-gray: #666;
$main-background: #f5f5f5;
$main-background-buyingflow: #fff;
$coupon-icon-color: #3483fa;
$coupon-icon-background: #4189e6;
$rgb-1: rgb(0 0 0 / 10%);
$rgb-5-5: rgb(0 0 0 / 55%);
$rgb-9: rgb(0 0 0 / 90%);
$rgb-12: rgb(0 0 0 / 12%);
$rgb-15: rgb(0 0 0 / 15%);
$rgb-25: rgb(0 0 0 / 25%);
$blue-ml: #3483fa;
$orange: #f73;
$white: #fff;
$grey-c: #ccc;
$grey: #9b9b9b;
$gold: #d98900;
$red: #f23d4f;
$green: #00a650;
$fw-light: 300;
$fw-regular: 400;
$fw-semi-bold: 500;
$fw-bold: 600;
$fw-extra-bold: 700;

@if $andes-theme == 'mercadopago' {
  $coupon-icon-color: #009ee3;
  $coupon-icon-background: #479ad1;
}