@use "sass:color";

.loan-calculator {
  background-color: #fff;
  padding: 0;
  margin-bottom: 30px;

  @include border-radius(10px);
  @include box-shadow(-2px 2px 6px 0 rgba(0, 0, 0, 0.1));

  .main-inputs {
    border-bottom: 1px solid $color-secondary-light;
    padding: 20px 40px;

    @include border-top-radius(10px);
  }
}

.loan-simulation {
  background-color: #fff;
  padding: 20px 40px;

  @include border-radius(10px);
  @include box-shadow(-2px 2px 6px 0 rgba(0, 0, 0, 0.1));
}

.loan-calculator-panel {
  margin: 30px 0;

  h6 {
    font-size: rem-calc(14px);
    font-weight: 400;
    opacity: 0.5;
    margin: 0;
  }

  p {
    font-size: rem-calc(16px);
    font-weight: 900;
    margin: 0;
  }
}

.loan-calculator-table {
  .table-header {
    .table-row {
      border-top: 2px solid $color-secondary;
      border-bottom: 2px solid $color-secondary;

      .table-cell {
        color: $color-text;
        font-size: rem-calc(15px);
        font-weight: 900;
        padding: 20px 15px;
      }
    }
  }

  .table-footer {
    .table-row {
      border-bottom: none;

      .table-cell {
        color: $color-text;
        font-size: rem-calc(15px);
        font-weight: 900;
      }
    }
  }

  .table-row {
    display: grid;
    grid-template-columns: 120px repeat(5, 1fr);
    border-bottom: 1px solid $color-secondary-light;

    .table-cell {
      color: $color-secondary;
      font-size: rem-calc(13px);
      padding: 15px;
      text-align: center;

      &:first-child {
        text-align: left;
      }

      &:last-child {
        text-align: right;
      }
    }

    &:hover {
      background-color: color.adjust($color-secondary-light, $lightness: 15%);
    }
  }

  // Cell Specific

  .installment-num {
    display: inline-block;
    background-color: color.adjust($color-secondary, $lightness: 15%);
    color: $color-text;
    font-weight: 900;
    padding: 1px 6px;

    @include border-radius(4px);
  }

  .payment-total {
    color: $color-text;
    font-weight: 900;
  }

  // Content Elements

  span.payment-amount {
    display: block;
    font-size: rem-calc(15px);
    font-weight: 900;
  }

  a.payment {
    img.icon {
      margin: 0 4px -4px 0;
      width: 18px;
    }
  }
}