@use "sass:math";

@import "~bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss";

#modal-loopeat {
  @media (max-width: $screen-xs-max) {
    .modal-dialog {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 10px;
      .modal-content {
        height: 100%;
        display: flex;
        flex-direction: column;
        .modal-body {
          flex: 1;
          .embed-responsive.embed-responsive-16by9 {
            height: 100%;
            padding-bottom: 0;
          }
        }
      }
    }
  }
}

$vytalGreen: #53b848;

.vytal-logo-white {

  $vytalWidth: 964px;
  $vytalHeight: 893px;

  background-image: url('../../../assets/logos/vytal_logo_white.png');
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  width: math.div($vytalWidth, 18);
  height: math.div($vytalHeight, 18);
}

.alert-vytal {
  background-color: $vytalGreen;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.en-boite-le-plat-logo-orange {

  $w: 1000px;
  $h: 500px;

  background-image: url('../../../assets/logos/en_boite_le_plat_orange.png');
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  width: ($w * 0.125);
  height: ($h * 0.125);
}

.alert-en-boite-le-plat {
  background-color: #fff7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nonprofit-card {
  .thumbnail {
    cursor: pointer;
    height: 340px;
  }
   &.active {
    .thumbnail {
      border: 1px solid #66afe9;
      background-color: #f3faff;
    }
  }
}

.loopeat-links {
  opacity: 0.6;
  > a {
    color: #1D1D1D;
    font-weight: 600;
  }
}

#dabba-block {

  background-color: #FEF9F4;
  color: #F96C26;
  position: relative;

  & img.dabba-logo {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1rem;
    height: calc(100% - 4rem);
    @media (min-width: $screen-sm-min) {
      height: calc(100% - 2rem);
    }
  }

  & #checkout_address_reusablePackagingPledgeReturn {
    display: inline-block;
    width: 3em;
    padding: .1em .1em .1em .3em;
    height: auto;
    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
     opacity: 1;
    }
  }

}
