@import "./mixins";
@import "./variables";
@import "~swiper/swiper";
@import "~swiper/components/pagination/pagination";
@import "~swiper/components/navigation/navigation";
@import "~react-multi-select-component/src/style.css";

:root {
  --swiper-navigation-size: 1.25rem;
  --lh: 1.75em;
}
// adapt to Safari
.truncate-overflow2 {
  --max-lines: 2;
  max-height: calc(var(--lh) * var(--max-lines));
}

html,
body {
  margin: 0;
  font-size: $font-base;
  font-family: $font-family;
}

p,
h1,
h2,
h3,
h4,
h5,
span,
a,
li {
  line-height: 1.75;
}

p,
h1,
h2,
h3,
h4,
h5,
button,
li {
  font-family: $font-family;
}

h1 {
  font-size: $font-h1;
  font-weight: $regular;
}

h2 {
  font-size: $font-h2;
  font-weight: $regular;
}

h3 {
  font-size: $font-h3;
  font-weight: $regular;
}

h4 {
  font-size: $font-h4;
  font-weight: $regular;
}

h5 {
  font-size: $font-h5;
  font-weight: $regular;
}

ol,
ul,
dl {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  outline: none;
  cursor: pointer;
}

.a-dark {
  color: $white;

  &:hover {
    color: $white;
    opacity: 0.7;
  }
}

.region-header {
  @include region-header();
}

.region-header-white {
  @include region-header($white, rgba($white, 80%));
}

.card-animate-up {
  transition: all 0.25s linear;
  &:hover {
    box-shadow: $shadow-long;
    transform: translateY(-1rem);
  }
}

.common-region-grey {
  background: $grey-light;
  padding: $hl-2 0;
}

.common-h1-title {
  text-align: center;
  color: $black;
  margin-bottom: $hl-4;
}

.common-card-content {
  background: $white;
  border-radius: $radius;
  box-shadow: $shadow-normal;
  height: 100%;
}

.common-center-container {
  max-width: 54rem;
  margin: 0 auto;
}

.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 0;
}

.swiper-button-next,
.swiper-button-prev {
  color: $black;
  opacity: 0.4;
  font-weight: bolder;
}

.product-banner-title {
  img {
    height: 3rem;
    vertical-align: middle;
  }
}

.common-bottom-background-primary {
  background: linear-gradient(
      0deg,
      rgba(36, 43, 72, 0.3),
      rgba(36, 43, 72, 0.3)
    ),
    #3d3fea;
}

@media screen and (max-width: $mobile) {
  #product-banner {
    h4 {
      font-size: $font-h5;
    }
  }
  .product-banner-title {
    flex-direction: column;
    font-size: $font-h3;
    img {
      display: block;
      height: 3rem;
      vertical-align: middle;
    }
  }
}

@media screen and (max-width: $desktop) {
  html,
  body {
    font-size: $font-desktop;
  }
}

.logo-wall-image {
  @include logo-wall-image;
}

.not-found-header {
  background: $blue-dark;
  height: 5.5rem;
}

.not-found-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: $black;
  padding: $hl-6 0 15rem 0;

  img {
    width: 20rem;
    height: 20rem;
  }

  div {
    font-family: "Poppins", sans-serif;
    font-size: 3rem;
    font-weight: 600;
    line-height: 3rem;
  }

  h5 {
    opacity: 0.6;
    margin-top: $hl-9;
  }
}