/// LoanSimulator
///
/// @group simulators
///
/// @example scss - usage
///
///   @include k-LoanSimulator;
///
/// @example html
///
///   <div class="k-LoanSimulator">
///     <div class="k-LoanSimulator__amount">
///       <div class="k-LoanSimulator__label">Amount</div>
///       …
///       <div class="k-LoanSimulator__amount__error">…</div>
///     </div>
///     <div class="k-LoanSimulator__installment">3 $/month</div>
///     <div class="k-LoanSimulator__duration">for 4 months</div>
///     <div class="k-LoanSimulator__result">…</div>
///     <div class="k-LoanSimulator__actions">…</div>
///   </div>
@mixin k-LoanSimulator($loan-simulator: ()) {
  @include k-with-module('k-LoanSimulator: $loan-simulator') {
    $error-color: map-get($k-colors, 'error');
    $spacing-between-amount-and-reimbursing: k-px-to-rem(40px);
    $error-top-margin: k-px-to-rem(10px);

    .k-LoanSimulator__label {
      margin-bottom: k-px-to-rem(10px);
      @include k-typographyFontSize(-1);
    }

    .k-LoanSimulator__result {
      margin-top: 1em;
    }

    .k-LoanSimulator__amount {
      margin: k-px-to-rem(30px) 0 $spacing-between-amount-and-reimbursing;

      .k-LoanSimulator.is-error & {
        // On error, lower the spacing between amount and reimbursing so that
        // one line of error text does not move the spacing.
        margin-bottom: (
          $spacing-between-amount-and-reimbursing
          - $error-top-margin
          - 1.5rem // error text line height
        );
      }
    }

    .k-LoanSimulator__amount__error {
      color: $error-color;
      margin: $error-top-margin 0 0;
      @include k-typographyFontSize(-2);
    }

    .k-LoanSimulator__durationError {
      color: $error-color;
      @include k-typographyFontSize(-2);
    }

    .k-LoanSimulator__actions {
      margin: k-px-to-rem(40px) 0;
      text-align: center;
    }

    .k-LoanSimulator__installment {
      @include k-typographyFontSize(0, 1.3rem);
      font-weight: bold;
    }

    .k-LoanSimulator__duration {
      @include k-typographyFontSize(-2, 1.3rem);
    }

    .k-LoanSimulator__commission {
      margin-top: k-px-to-rem(30px);
      @include k-typographyFontSize(-1);
    }

    .k-LoanSimulator__feesExemption {
      @include k-typographyFont('light');
      @include k-typographyFontSize(-2);
    }
  }
}