// Stylings for the amazon pay banner
$amazonpay-color-smile: #ff9900;
$amazonpay-color-ink: #333e48;
$amazonpay-color-storm: #6c7778;
$amazonpay-color-gulfstream: #002f36;
$amazonpay-color-tidal: #075692;
$amazonpay-color-snow: #eaeded;
$amazonpay-color-frost: #fafafa;

.et-widget-amazonpay {
  .et-amazon-pay-banner-wrapper {
    color: $amazonpay-color-frost;
    background: -webkit-linear-gradient(80deg, #0c0f12 7%, #373f47 39%, #48525c 59%, #48525c 82%, $amazonpay-color-ink 98%);
    background: linear-gradient(10deg, #0c0f12 7%, #373f47 39%, #48525c 59%, #48525c 82%, $amazonpay-color-ink 98%);
    border-bottom: 5px solid $amazonpay-color-smile;

    margin-left: floor(($grid-gutter-width / -2));
    margin-right: floor(($grid-gutter-width / -2));

    .banner-text,
    .banner-image {
      display: inline-block;
    }

    .et-amazon-pay-banner-left,
    .et-amazon-pay-banner-right {
      margin-top: 20px;
      margin-bottom: 20px;
    }

    .et-amazon-pay-banner-left {
      display: inline-block;
      padding-left: floor(($grid-gutter-width / 2));
      padding-right: floor(($grid-gutter-width / 2));
      max-width: 100%;
      width: 100%;
      text-align: center;
      @include media-breakpoint-up(lg) {
        max-width: 49.999%;
        width: auto;
        padding-right: 0;
        text-align: left;
        margin-top: 40px;
        margin-bottom: 40px;
      }
      .banner-text {
        line-height: 40px;
        font-size: 28px;
        padding-right: 20px;
      }
      .banner-image {
        height: 40px;
        padding-right: 30px;
        img {
          height: 40px;
          width: auto;
        }
      }
    }
    .et-amazon-pay-banner-right {
      display: inline-block;
      vertical-align: top;
      text-align: center;
      padding-right: floor(($grid-gutter-width / 2));
      padding-left: floor(($grid-gutter-width / 2));
      max-width: 100%;
      width: 100%;
      line-height: 24px;
      @include media-breakpoint-up(lg) {
        text-align: left;
        max-width: 49.999%;
        width: auto;
        padding-right: 0;
        padding-left: 30px;
        margin-top: 40px;
        margin-bottom: 40px;
        line-height: 1.5;
        border-left: 1px solid $amazonpay-color-frost;
      }
    }
  }
}