@import '../helpers/variables';
@import '../helpers/helpers';
@import '../common/scroll-disable';

.energy-efficiency {
  margin: 15px 0 5px;

  &__link {
    display: block;
    margin-top: 5px;
  }

  &--empty {
    min-height: 27px;

    .energy-efficiency__link {
      line-height: 20px;
      padding-top: 37px;
    }
  }

  &--pdp {
    margin: 20px 20px 0 0;

    .btn-energy-label {
      margin-bottom: 5px;
    }

    @include media-breakpoint-down(sm) {
      margin-right: 15px;
    }

    .btn-energy-label {
      margin-bottom: 5px;
    }
  }

  &--basket {
    margin: 0 0 20px;

    @include media-breakpoint-down(lg) {
      margin-top: 5px;
    }

    @include media-breakpoint-down(md) {
      margin-top: 0;
    }

    @include media-breakpoint-down(sm) {
      margin: 15px 0;
    }
  }

  &__link {
    font-size: 13px;
    line-height: 20px;
    margin-top: 10px;
    display: block;
  }

  &--project-list {
    margin: 0 0 15px;
  }

  &--order {
    margin: 10px 0 8px;
  }
}

.energy-label {
  width: 45px;
  position: relative;
  height: 25px;
  clip-path: polygon(0% 0%, calc(100% - .87em) 0%, 100% 50%, calc(100% - .87em) 100%, 0% 100%);
  background-color: $gray;
  padding-right: 10px;

  &__new {
    padding-left: 8px;

    &:before {
      content: '';
      background: $white url('../../img/energy-efficiency/energy-marker.svg') no-repeat center / cover;
      width: 9px;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      border-radius: .5px 0 0 .5px;
    }

    .energy-label-text {
      -webkit-text-stroke: .5px $black;
    }
  }

  &__old {
    padding-left: 3px;
  }

  &__multiple {
    padding-left: 3px;
    letter-spacing: -.3px;
  }

  &-text {
    font-size: 17px;
    color: $white;
    font-weight: 700;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;

    .plus {
      font-size: 11px;
      padding-top: 2px;
    }

    &--multi {
      letter-spacing: -1.4px;
    }
  }
}

.btn-energy-label {
  padding: 0;
  display: flex;
  background: none;
  border: 1px solid transparent;

  &__new {
    border: 1px solid $black;
    clip-path: polygon(0 0, 73% 0, 100% 50%, 73% 100%, 0 100%);
    background: $black;
    border-radius: .5px;
  }

  &--c-auto:not(:disabled):not(.disabled) {
    cursor: auto;
  }
}

.bg-green-haze {
  background-color: $green-haze;
}

.bg-green-apple {
  background-color: $green-apple;
}

.bg-rio-grande {
  background-color: $rio-grande;
}

.bg-yellow-turbo {
  background-color: $yellow-turbo;
}

.bg-yellow-selective {
  background-color: $yellow-selective;
}

.bg-christine {
  background-color: $christine;
}

.bg-monza {
  background-color: $monza;
}

.modal-energy-efficiency {
  .modal-header {
    border: 0;
    padding: 17px;

    &:after {
      content: initial;
    }
  }

  .modal-body {
    padding: 0 45px 25px;
    height: 100%;
    overflow-y: auto;
  }

  .modal-content {
    max-height: calc(100vh - 3.5rem);
    overflow: hidden;
    border-radius: 0;
    border: 0;

    @include media-breakpoint-up(md) {
      box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .4);
    }
  }

  .close {
    opacity: 1;
    padding: 0;
    margin: 0;
    font-size: 1rem;

    .icon {
      color: $downriver;

      svg {
        font-size: 26px;
      }
    }
  }

  .modal-images {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    overscroll-behavior: contain;

    img {
      width: 100%;
      max-width: 210px;
      height: auto;

      & + img {
        margin-top: 25px;
      }
    }
  }

  .modal-dialog {
    padding: 0;
  }

  .modal-box__row {
    margin: 0;
  }

  .modal-box__columns {
    max-width: 500px;
    padding: 0;
  }

  .modal-box__inner-row {
    display: none;
  }

  .modal-box__header .close {
    position: relative;
    right: 0;
    top: 0;
  }
}

.modal.modal-energy-efficiency {
  overflow-y: hidden;
}

@include media-breakpoint-down(xs) {
  .modal-energy-efficiency {
    .modal-box__container {
      margin: 0;
      max-width: none;
      height: 100%;
    }

    .modal-box__content,
    .modal-box__row,
    .modal-box__columns {
      height: 100%;
    }

    .modal-box__columns {
      max-width: 100%;
    }

    .modal-content {
      max-height: 100%;
    }

    .modal-body {
      height: 100vh;
      padding: 0 20px 20px;
    }

    .modal-images {
      img {
        max-width: 100%;
      }
    }
  }
}

@media only screen and (max-width: 364px) {
  .energy-efficiency {
    .energy-efficiency__link--empty {
      padding-top: 20px;
      line-height: 20px;
    }

    &--empty {
      .energy-efficiency__link {
        padding-top: 57px;
        line-height: 20px;
      }
    }
  }
}


@media print {
  .energy-efficiency {
    display: none !important;
  }
}