/// 1. Abstract
$etImportForCrit: true;
@import 'abstracts/functions'; // Base Functions

// Import colors before variables
@import 'abstracts/colors';
@import 'abstracts/colors_generated';

@import 'abstracts/variables';
@import 'abstracts/mixins_buttons';
@import 'abstracts/mixins_fonts';
@import 'abstracts/mixins_productlist';

// 2, Vendors
@import 'vendors/bootstrap/scss/functions';
@import 'vendors/bootstrap/scss/variables';
@import 'vendors/bootstrap/scss/mixins';
@import 'vendors/bootstrap/scss/root';
@import 'vendors/bootstrap/scss/reboot';
@import 'vendors/bootstrap/scss/images';
@import 'vendors/bootstrap/scss/grid';
@import 'vendors/bootstrap/scss/nav';
@import 'vendors/bootstrap/scss/navbar';
@import 'vendors/bootstrap/scss/utilities';
@import 'vendors/jtl/mixins';

// 3. Base


// ET360 specific imports to prevent flashes of unstyled (and weird) content
@import 'base/containers';
@import 'base/fonts';
@import 'base/fonts_generated';
@import 'base/icons';
@import 'base/images';
@import 'base/text';

// 5a. Components
@import 'components/links';
@import 'components/breadcrumbs';
@import 'components/price';

// header, header usp and menus are critical by definition, as well as probably a main slider
@import 'components/navs';
@import 'components/sliders';



// 5b. widgets
@import 'widgets/breadcrumb';
@import 'widgets/header_usp';
@import 'widgets/header_main';
@import 'widgets/main_slider';
@import 'widgets/masonry_grid';

.fa, .fas, .far, .fal {
  display: inline-block;
}

.label-slide {
  .form-group:not(.exclude-from-label-slide):not(.checkbox) {
    label {
      display: none;
    }
  }
}

.modal {
  display: none;
}

.carousel-thumbnails .slick-arrow {
  /* to hide during load*/
  opacity: 0;
}

.consent-modal:not(.active) {
  display: none;
}

.consent-banner-icon {
  width: 1em;
  height: 1em;
}

.mini>#consent-banner {
  display: none;
}

html {
  overflow-y: scroll;
}

.dropdown-menu {
  display: none;
}

.dropdown-toggle {
  &::after {
    content: '';
    margin-left: .5rem;
    display: inline-block;
  }
}

.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
  > .form-control {
    flex: 1 1 auto;
    width: 1%;
  }
}

.btn-group {
  display: inline-flex;
}

.square {
  display: flex;
  position: relative;
  &::before {
    content: '';
    display: inline-block;
    padding-bottom: 100%;
  }
}

.et-loading-only {
  display: none;
}

/* Accessibility */
.btn-skip-to {
  position: absolute;
  top: 0;
  transition: transform 200ms;
  transform: scale(0);
  margin: 1%;
  z-index: $zindex-tooltip;
  background: $colorContentBackground;
  border: 3px solid $primary;
  font-weight: $font-weight-base;
  color: color-yiq($colorContentBackground);
  text-align: center;
  vertical-align: middle;
  padding: $btn-padding-y $btn-padding-x;
  border-radius: $btn-border-radius;
  font-weight: $font-weight-bolder;
  text-decoration: none;

  &:focus{
    transform: scale(1);
  }
}

.btn-pause{
  &:focus, &:focus-within {
    outline: 2px solid $focus-border-color;
  }
}

.stepper a:focus{
  text-decoration: underline;
}