@import "../../../../../assets/styles/index.scss";

$padding-dimension: 50px;
$span-height-hr: 20px;

.card-discount {
  @include border-radius(0);
  box-shadow: 0px 0px 0px 0 rgba(0, 0, 0, 0.16),
    0px 3px 10px 0 rgba(0, 0, 0, 0.12);

  position: absolute;
  z-index: 2;
  @include rem("width", 764px);
  @include rem("margin", auto);
  @include rem("top", 0);
  @include rem("left", 0);
  @include rem("bottom", 0);
  @include rem("right", 0);
  @include rem("min-height", 469px);
  @include rem("height", 469px);

  &-overlay {
    @include rem("padding-top", $padding-dimension + 10px);
    @include border-radius(0);
    @include rem("min-height", 469px);

    &-row {
      @include rem("margin-left", $padding-dimension);
      @include rem("margin-right", $padding-dimension);

      .card-title {
        @include heading1;
        color: $color-white;
        @include rem("margin-bottom", 12px);
      }

      .card-subtitle {
        @include body3;
        color: $color-light-gray5;
      }

      .col-hr {
        @include rem("height", 30px);
        hr {
          @include border("all", 1px, solid, $color-dark-gray2);
        }
      }

      .small-text-gray {
        @include body2;
        &-primary {
          color: $color-dark-gray1;
        }
        &-secondary {
          color: $color-light-gray3;
        }
        &-tertiary {
          color: $color-white;
        }
      }

      .large-text-blue {
        @include heading1;
        color: $color-blue;
      }
      .med-text-currency {
        @include heading3;
        color: white;
      }
    }

    .close-button {
      @include border-radius(100%);
      @include rem("right", $padding-dimension - 15px);
      @include rem("top", $padding-dimension - 15px);
      position: absolute;

      &:focus {
        outline: none;
      }
    }
    .voucher-btn {
      @include body1;
      background-color: $color-white;
      color: $color-blue;

      &-icon {
        @include body1;
        color: $color-blue;
      }

      span {
        @include rem("margin-left", 3px);
      }
    }
  }

  div.card {
    position: relative;
    @include border-radius(0);
    box-shadow: 0px 0px 0px 0 rgba(0, 0, 0, 0.16),
      0px 3px 10px 0 rgba(0, 0, 0, 0.12);
  }
}
