@import '../helpers/helpers';
@import '../components/my-account/barcode';
@import '../components/my-account/discount';

.discount-offer {
  padding-top: 0;
  padding-bottom: 0;

  &__wrap {
    padding-bottom: 40px;
  }

  &__header {
    padding-top: 16px;

    .title {
      @include font-size(26);
      @include line-height(36);
      font-weight: 500;
      margin-bottom: 0;
    }
  }

  &__body {
    grid-gap: 16px;
    display: flex;
    flex-direction: column;
    background: $blue-dark;
    border-radius: 4px;
    padding: 16px;
    margin-top: 24px;
    color: $white;

    .clipboard-code,
    .discount {
      &__content {
        display: flex;
        flex-direction: column;
        margin-left: 0;
      }

      &__code {
        margin-left: 0;
      }

      .icon-wrap {
        margin-bottom: 8px;
      }
    }

    &--secondary {
      background: $gray-wait;
    }
  }

  .app-info {
    background: $pacific-depths;
    padding: 24px 16px 0;
    text-align: center;

    .title,
    .description {
      color: $white;
      margin-bottom: 0;
    }

    .title {
      @include font-size(20);
      @include line-height(32);
      font-weight: 500;
    }

    .description {
      @include font-size(14);
      @include line-height(22);
      font-weight: 400;
      margin-top: 8px;
    }

    &__stores {
      margin-top: 16px;
      display: flex;
      justify-content: center;
      grid-gap: 16px;
    }

    .download-app-img {
      margin-top: 16px;
      min-height: 162px;
      background: url('../../img/apps/app-md.png') no-repeat bottom / contain;
    }

    &--hide {
      display: none;
    }
  }
}

@include media-breakpoint-up(sm) {
  .discount-offer {
    .app-info {
      padding-top: 40px;

      .download-app-img {
        min-height: 230px;
      }
    }
  }
}

@include media-breakpoint-up(md) {
  .discount-offer {
    &__header {
      padding-top: 40px;

      .title {
        @include font-size(34);
        @include line-height(46);
        text-align: left;
      }
    }

    &__body {
      display: grid;
      grid-template-columns: 1fr 1fr;
      padding: 24px;

      .clipboard-code.discount-code {
        grid-column: span 2;
      }

      .icon-wrap {
        width: 48px;
        height: 48px;

        .icon {
          font-size: 2rem;
          height: auto;
        }
      }
    }

    .app-info {
      &__wrap {
        display: flex;
        grid-gap: 40px;
      }

      .title,
      &__header {
        text-align: left;
      }

      .title {
        @include font-size(24);
        @include line-height(32);
      }

      &__header {
        flex: 0;
        padding-bottom: 40px;
      }

      &__stores {
        justify-content: flex-start;

        a {
          display: flex;
        }
      }

      .download-app-img {
        margin-top: -15px;
        flex: 1 1 100%;
        min-height: 180px;
      }
    }
  }
}

@include media-breakpoint-up(lg) {
  .discount-offer {
    &__body {
      grid-template-columns: repeat(3, 1fr);

      &--double {
        grid-template-columns: 1fr 2fr;
      }

      .clipboard-code.discount-code {
        grid-column: auto;
      }
    }

    .app-info {
      .download-app-img {
        background-image: url('../../img/apps/app-lg.png');
        background-position-x: right;
      }
    }
  }
}

@include media-breakpoint-up(xl) {
  .discount-offer {
    .app-info {
      &__wrap {
        align-items: center;
      }

      .download-app-img {
        min-height: 307px;
      }
    }
  }
}