/*
  NOTE: If you make significant changes to the design, remember to update the Segment event properties and change
  the creative property. This will allow us to better track individual performance of each style of the message.
  Search for the courseware_verified_certificate_upsell promotion ID.
 */

// Expanded upgrade message
.vc-message {
  background: $lms-hero-color;
  color: $white;
  padding: $baseline;
  position: relative;
  margin: 0 0 $baseline;

  // CSS animation for smooth height transition
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;

  &::after {
    content: "";
    display: table;
    clear: both;
  }

  // Message copy
  .vc-title {
    font-size: 1.25rem;
    font-weight: $font-weight-light;
    margin-bottom: 1rem;
    width: calc(100% - 70px);
  }

  .vc-selling-points {
    @include padding-left(0);

    font-size: 0.825rem;
    margin: 1rem 0;
    display: table;

    > .vc-selling-point {
      list-style: none;
      display: table-row;

      &::before {
        content: "\2022";
        display: table-cell;

        @include padding-right($baseline/2);
      }

      &::after {
        content: "";
        display: table-row;
        height: 0.25rem;
      }
    }
  }

  // Upgrade button
  .btn-upgrade {
    color: theme-color("inverse");
    background-color: theme-color("purchase");
    font-size: $font-size-base;
    -webkit-transition: $btn-transition;
    transition: $btn-transition;

    &:hover {
      background-color: theme-color("success");
    }
  }

  // Show/hide button
  .vc-toggle {
    @include right($baseline/2);

    top: $baseline/2;
    position: absolute;
    color: theme-color("inverse");

    &:hover {
      cursor: pointer;
      text-decoration: none;
      color: theme-color("light");
    }
  }

  // Cert image
  .vc-hero {
    @include float(right);
    @include padding-left(1rem);

    clear: both;

    img {
      @include float(right);

      clear: both;
      width: 250px;
    }
  }
}

// Collapsed upgrade message
.vc-message.polite {
  @include padding($baseline/2, 0, $baseline/2, $baseline);
  padding-top: $baseline/2;
  padding-bottom: $baseline/2;
  min-height: 46px;
  display: flex;
  align-items: center;

  .vc-title {
    @include margin-right(auto);

    margin: 0;
    flex-grow: 1;
  }

  .vc-cta {
    flex-grow: 1;
  }

  .vc-toggle {
    @include right(0);

    margin: 0 $baseline/2;
    order: 99;
    position: relative;
    white-space: nowrap;
    width: $baseline*6;
    top: 0;
  }

  .vc-fade:not(.vc-polite-only) {
    display: none;
  }

  @include media-breakpoint-down(sm) {
    flex-flow: row wrap;

    .vc-title {
      width: auto;
      margin-bottom: $baseline/2;
    }
  }
}

@media (max-width: $grid-breakpoints-sm) {
  .vc-message .vc-hero {
    display: none !important;
  }
}