/**
 * @file
 * Calculator Styles
 */

.frib-calculator-rate-calculator {
  h2 {
    font-size: var(--font-size--h2);
    margin-bottom: var(--gap-static--xxxxxs);
  }

  h3 {
    color: var(--color--primary);
    font-size: var(--font-size--h6);
    letter-spacing: var(--letter-spacing--h6);
    line-height: 1.4;
    margin-bottom: var(--gap-static--xxs);
    text-transform: uppercase;
  }

  label {
    color: var(--color--primary);
    display: block;
    font-size: var(--font-size--h5);
    font-weight: 600;
    letter-spacing: var(--letter-spacing--h5);
    line-height: 1.4;
    margin: 0 0 var(--gap-static--xxxxs) 0;
    width: 100%;
  }

  input[type="number"],
  input[type="text"] {
    border: 0;
    border-bottom: 1px solid var(--color--primary);
    cursor: pointer;
    display: block;
    font-family: var(--font-family--primary);
    font-size: var(--font-size--p);
    letter-spacing: var(--letter-spacing--p);
    padding: var(--gap-static--xxs) var(--gap-static--xxxs);
    width: 100%;

    &:focus {
      border-bottom: 2px solid var(--color--dark-accent-2);
      /* outline: 0; TEMP REMOVAL */
    }
  }

  .form-item {
    margin-bottom: var(--gap--sm);
  }

  .submit-btn {
    margin-bottom: var(--container-padding--bottom);
    margin-top: calc(var(--gap--lg) - var(--gap--sm));
  }
}

.frib-calculator-rate-calculator__version {
  display: block;
  margin-bottom: var(--gap--sm);
}

.rate-calculator-results .calculator-table:not(:last-child) {
  margin-bottom: var(--gap--sm);
}

.calculator-table__caption {
  color: var(--color--primary);
  font-size: var(--font-size--h6);
  font-weight: 700;
  letter-spacing: var(--letter-spacing--h6);
  line-height: 1.4;
  margin-bottom: var(--gap-static--xxs);
  text-align: left;
  text-transform: uppercase;
}

.calculator-table th {
  padding-right: var(--gap--sm);
  text-align: left;
}

@media screen and (min-width: 768px) {
  .calculator-table th {
    min-width: 300px;
  }
}