@charset "utf-8";

// Import a Google Font
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

// Import Material Icons
// $material-icons-font-path: '~material-icons/iconfont/';
// @import 'material-icons/iconfont/filled.scss';

// Update Bulma's global variables
// $family-sans-serif: "Nunito", sans-serif;
$family-sans-serif: "Lato", "Arial", sans-serif;
// $widescreen-enabled: false;
// $fullhd-enabled: false;

// Update some of Bulma's component variables
// $input-border-color: transparent;
// $input-shadow: none;
$control-border-width: 1px;
// $navbar-breakpoint: 0;

// IOPS-specific css modules
@import "bulma/bulma.sass";
@import "bulma-carousel/src/sass";
@import '@creativebulma/bulma-tooltip/src/sass';
@import '@creativebulma/bulma-badge/src/sass';
@import "@creativebulma/bulma-divider/src/sass";

.iops-ext-modal {
  @extend .modal;
  $modal-content-width: 80%;
}

.cart-popup {
  position: fixed;
  height: 75%;
  bottom: -100%;
  right: 0;
  margin-right: 5px;
  visibility: visible;
  transition: bottom .4s ease-in-out .1s;
}

.open-cart-popup {
  bottom: 0;
  visibility: visible;
}

// .my-step-style {
//   +steps-active-segment {
//     .steps-content {
//       font-weight: bold
//     }
//   }
//   +steps-inactive-segments {
//     .steps-content {
//       color: $grey-lighter
//     }
//   }
// }

.ql-container {
  --lh: 1.4rem;
  --max-lines: 25;
  max-height: calc(var(--lh) * var(--max-lines));
  overflow: hidden;
  overflow-y: scroll;
}

.my-step-style {
  .steps-segment.is-active {
    .steps-content {
      font-weight: bold;
    }
  }

  .steps-segment.is-disabled {
    .steps-content {
      color: $grey-lighter;
    }
  }
}

.iops-full-page {
  min-height: 100vh;
}

.iops-hero {
  background-image: url(/console/images/small-hero.png);
  // background-size: contain;
  background-position: right;
  background-repeat: no-repeat;
}

.product-lightbox {
  /* Default to hidden */
  display: none;

  /* Overlay entire screen */
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  padding: 1em;

  /* Translucent background */
  background: rgba(0, 0, 0, 0.6);
}

/* Unhide the lightbox when it's the target */
.product-lightbox.is-active {
  display: block;
}

.product-lightbox .product-quickview {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

.iops-background-overlay-mixin {
  @include overlay;
  background-color: darkorange;
  border-radius: 0.25em;
  color: white;
  opacity: 0.9;
  padding: 1em;
  z-index: 40;
}

.iops-overlay-mixin.is-active {
  display: none;
}

.product-modal {
  .modal {
    .modal-content {
      width: 80%;
      max-width: 1024px;
    }
  }
}

.menu-bg-color,
.modal-bg-color,
.notif-bg-color,
.button-bg-color {
  background-color: $light;
}

.image.iops-thumbnail img {
  max-width: 64px;
  max-height: 64px;
  min-width: 64px;
  min-height: 64px;
  object-fit: scale-down;
}

.iops-product-card {
  padding: 1em;
  width: 350px;
  margin: 1px;
  margin-left: auto;
  margin-right: auto;
  --lh: 1.4rem;
  line-height: var(--lh);
}

.iops-product-card div.card-content {
  min-height: 180px;
}

.truncate-overflow {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.iops-title-wrap {
  width: 10em;
  overflow-wrap: break-word;
}

.iops-product-card div.card-content ._oldtruncate-overflow {
  --max-lines: 3;
  max-height: calc(var(--lh) * var(--max-lines));
  overflow: hidden;
}

.iops-card-image {
  height: 239px;
  margin-left: auto;
  margin-right: auto;
  object-fit: scale-down;
}

.iops-card-image img {
  height: 200px;
  margin-left: auto;
  margin-right: auto;
  object-fit: scale-down;
  overflow: hidden;
}

.iops-card-list-image {
  height: 200px;
  margin-left: auto;
  margin-right: auto;
  object-fit: scale-down;
}

.iops-card-list-image img {
  height: 150px;
  margin-left: auto;
  margin-right: auto;
  object-fit: scale-down;
  overflow: hidden;
}

.carousel {
  overflow: hidden;
}

.iops-carousel-card {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.product-image-overlay {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.322);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s;
}

.product-carousel-overlay {
  position: absolute;
  overflow: hidden;
  z-index: 10;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.747);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s;
}

.image.iops-card img {
  max-width: 256px;
  max-height: 256px;
  object-fit: contain;
}

.image.proccesor-logo {
  margin-left: 0em;
  margin-bottom: 0em;
  text-align: left;
}

.image.proccesor-logo img {
  width: auto;
  height: auto;
  margin: 0px;
  object-fit: contain;
}

.iops-button:hover {
  cursor: pointer;
}

/* CSS Shapes for ratings */
.product-rating .rating-ico {
  color: #d8d8d8;
}

.rating-ico.is-hover {
  color: #ffa201;
}

.product-rating[data-rating="1"] .rating-ico:nth-child(1),
.rating-ico:nth-child(1):hover {
  color: #ffa201;
}

.product-rating[data-rating="2"] .rating-ico:nth-child(1),
.product-rating[data-rating="2"] .rating-ico:nth-child(2) {
  color: #ffa201;
}

.product-rating[data-rating="3"] .rating-ico:nth-child(1),
.product-rating[data-rating="3"] .rating-ico:nth-child(2),
.product-rating[data-rating="3"] .rating-ico:nth-child(3) {
  color: #ffa201;
}

.product-rating[data-rating="4"] .rating-ico:nth-child(1),
.product-rating[data-rating="4"] .rating-ico:nth-child(2),
.product-rating[data-rating="4"] .rating-ico:nth-child(3),
.product-rating[data-rating="4"] .rating-ico:nth-child(4) {
  color: #ffa201;
}

.product-rating[data-rating="5"] .rating-ico:nth-child(1),
.product-rating[data-rating="5"] .rating-ico:nth-child(2),
.product-rating[data-rating="5"] .rating-ico:nth-child(3),
.product-rating[data-rating="5"] .rating-ico:nth-child(4),
.product-rating[data-rating="5"] .rating-ico:nth-child(5) {
  color: #ffa201;
}

.input-counter {
  display: inline-block;
  vertical-align: top;
  position: relative;
  padding: 13px 0 14px;
  overflow: hidden;
  margin: 0 5px 0 0;
  min-height: initial;
}

.input-counter .count-up {
  position: absolute;
  top: -5px;
  left: 9px;
  line-height: 1;
}

.input-counter .count-down {
  position: absolute;
  bottom: -8px;
  left: 9px;
  line-height: 1;
}

.input-counter input {
  border: none;
  width: 39px;
  text-align: center;
  display: block;
  padding: 0;
  height: 25px;
}

.shop-nav {
  position: sticky;
  top: -1px;
  width: 100%;
  // padding: 10px 20px;
  z-index: 15;
}

.shop-nav-bottom {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  // padding: 10px 20px;
  z-index: 15;
}

.background-video video {
  min-height: 100vh;
  min-width: 100vw;
  object-fit: cover;
  object-position: center;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}

.button.is-borderless {
  border: none;
}

.thumbnail-container {
  overflow-x: scroll;
  width: 100%;
  padding: 0 15px;
}

.thumbnail-list {
  white-space: nowrap;
  list-style: none;
}

.thumbnail-list li {
  display: inline-block;
}

.thumbnail-image {
  display: block;
  padding: 2px;
  max-width: 100px;
  height: auto;
}

.dropzone {
  position: relative;
  background-color: #fff;
  border: dashed 5px transparent;
  border-color: $grey-lighter;
  border-radius: 4px;
  margin: 10px 10px;
  padding: 10px;
  width: 100%;
  transition: background-color 0.3s;
}

.dropzone.active {
  border-color: #29e;
  position: relative;
}

/* Dark mode settings */
$iops-dark: #202124;
$iops-light: #EFF0EB;

.iops-dark-mode * {
  $purple: #8A4D76;
  $pink: #FA7C91;
  $iops-dark-grey: hsl(0, 0%, 29%);
  $beige-light: #D0D1CD;
  $beige-lighter: #EFF0EB;
  $iops-body-text: #bdc1c6;
  $scheme-main: $iops-dark;
  $scheme-main-bis: $iops-dark;
  $scheme-main-ter: $iops-dark;
  $scheme-invert: $iops-light;
  $scheme-invert-bis: $iops-light;
  $scheme-invert-ter: $iops-light;
  $body-color: $iops-body-text;
  $button-color: $iops-body-text;
  $button-focus-color: $iops-body-text;
  $button-hover-color: $iops-body-text;
  $title-color: $iops-body-text;
  $subtitle-color: $iops-body-text;
  $input-color: $iops-body-text;
  $label-color: $iops-body-text;
  $dropdown-item-color: $iops-body-text;
  $tabs-link-color: $iops-body-text;
  $tabs-link-hover-color: $beige-light;
  $navbar-item-color: $iops-body-text;
  $message-body-color: $iops-body-text;
  $card-color: $iops-body-text;
}

.iops-dark-mode * .menu-bg-color,
.iops-dark-mode * .modal-bg-color,
.iops-dark-mode * .notif-bg-color,
.iops-dark-mode * .button-bg-color {
  background-color: $dark;
}

.iops-dark-mode * .button,
.iops-dark-mode * .select select,
.iops-dark-mode * .textarea,
.iops-dark-mode * .input {
  border-color: $dark;
}

.iops-dark-mode * .variant-sel-box {
  background-color: $light;
}

.iops-dark-mode * .variant-sel-box p {
  color: $primary;
}

.iops-dark-mode * .variant-sel-box.box-selected {
  background-color: $primary;
}

.iops-dark-mode * .variant-sel-box.box-selected p button>span {
  color: $iops-light;
}

.iops-dark-mode * button>span {
  color: $iops-light;
}

.iops-dark-mode * input,
.iops-dark-mode * .dropdown-trigger *,
.iops-dark-mode * .dropdown-item,
.iops-dark-mode * .level-item>a>span {
  color: $iops-light;
  background-color: hsl(0deg, 0%, 29%);
  ;
}

/* end dark mode settings */