@use "sass:meta";
@use "sass:map";
@use '~@nuskin/ns-core-styles/src/scss/colors';
@use '~@nuskin/ns-core-styles/src/scss/typography';
@use '~@nuskin/ns-core-styles/src/scss/other';

$nsblue: map.get(colors.$baseColors, nuskinblue);
$gridWidth: 1000px;
$error: #c71013;
$info: #d9c86b;
$radius: 3px;
$nsbordergrey: #cccccc;


#page-checkout, body[page="checkout"] {
  &.mec-style {
    @include meta.load-css('scss/mec-styles');
    
    .container i.v-icon {
      font-family: "Material Icons";
    }
  }
  .mec-only {
    display: none;
  }
  #content {
    max-width: 1440px;
  }
}

#page-checkout, body[page="checkout"] {
  &.overflow-none {
    overflow: hidden;
  }
  
  .container {
    font-size: 13px;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #fafafa;
    max-width: 100%;

    #shippingMethod {
      #shippingMethodSelect {
        width: 100%;
      }
    }

    @include meta.load-css('scss/normalize');


    @include meta.load-css('scss/app');
    @include meta.load-css('scss/qas');
    @include meta.load-css('scss/responsiveTableStyles');
    @include meta.load-css('scss/main');
    @include meta.load-css('scss/tooltip');
    @include meta.load-css('scss/animations');
    @include meta.load-css('scss/mobile');
    @include meta.load-css('scss/print');
    @include meta.load-css('scss/shippingRates');
    @include meta.load-css('scss/adrShipModal');
    @include meta.load-css('scss/pickupPoints');
    @include meta.load-css('scss/pointsCheckout');
    @include meta.load-css('scss/paymentSection');

    // Prevent the user from scrolling the page horizontally
    @media (max-width:767px) {
      max-width: 100%;
      overflow-x: hidden;
    }
  }
}

// Un-scoped global class
// Bootstrap inspired solution for preventing scrolling through a modal
body.modal-open {
  overflow: hidden;
  position: fixed;
  display: block;
  width: 100%;
}