@use 'sass:math';
@use './vars' as *;
@use '@cfpb/cfpb-design-system/src/abstracts' as *;
@use '@cfpb/cfpb-design-system/src/utilities' as *;

/* ==========================================================================
   "Rate checker" custom styles
   ========================================================================== */

// Mixin to remove any default spacing or borders on an element.
@mixin u-reset() {
  border: 0;
  margin: 0;
  padding: 0;
}

.rate-checker {
  position: relative;

  // lead paragraphs are typically the first paragraph in a content area.
  .lead {
    margin-bottom: math.div(30px, $base-font-size-px) + em;
    font-size: 1.125em;
  }

  // Page intros are content areas that are in place of a hero.
  .page-intro {
    border-bottom: 1px solid var(--gray-10);
    padding-bottom: math.div(36px, $base-font-size-px) + rem;

    &__cols {
      display: flex;
      gap: math.div(15px, $base-font-size-px) + rem;
      flex-direction: column;

      // Desktop and above.
      @include respond-to-min($bp-med-min) {
        flex-direction: row;
      }
    }

    &__cols-first {
      flex-basis: fit-content;
    }

    &__alert {
      padding: math.div(30px, $base-font-size-px) + em;
      padding-bottom: 0;
    }
  }

  .rc-illu-inner {
    padding: 1em 4.5em 0;
  }

  .loan-type,
  .calc-footer,
  .calc-subsection {
    @include u-grid-column(12);
  }

  /*
        layout
        --------------------------- */
  #credit-score-container,
  .loan-amt-total,
  .state-col,
  .form-intro {
    @include u-grid-column(3, 3);
  }

  /*
        Sidebar with all the user input
       --------------------------- */
  .calculator {
    padding-left: math.div(10px, $base-font-size-px) + rem;
    background: var(--gray-5);

    p:last-child,
    section p:last-child {
      margin: 0;
    }

    label {
      font-weight: 500;

      display: block;
      margin-bottom: math.div(4px, $base-font-size-px) + em;
      text-transform: none;
    }

    .help {
      font-size: 0.9em;
    }

    section {
      padding: (math.div(30px, $base-font-size-px) + em) 0;
      border-top: 1px solid var(--gray-10);
    }

    section:first-child,
    section:nth-child(2) {
      border-top: none;
    }

    section:first-child {
      padding: 0;
    }

    .calc-footer {
      padding: (math.div(15px, $base-font-size-px) + em) 0; // the bottom <section> has less padding
    }

    input[type='number'] {
      appearance: textfield;
    }

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      appearance: none;
    }

    .calc-subsection {
      padding: 0 0 (math.div(30px, $base-font-size-px) + em);
      border-top: none;
    }

    #arm-warning {
      padding-top: 0;
      border-top: 0;
      margin-top: math.div(-10px, $base-font-size-px) + em;
    }
  }

  .calc-loan-details {
    .upper {
      margin-bottom: math.div(15px, $base-font-size-px) + em;
    }
  }

  .loan-amt-total {
    padding-top: math.div(10px, $base-font-size-px) + em;

    span {
      display: block;
      margin-top: math.div(10px, $base-font-size-px) + em;
      font-weight: 500;
    }
  }

  .county {
    padding-top: math.div(10px, $base-font-size-px) + em;
  }

  .half-width-gt-1230 {
    @include u-grid-column(1, 2);
  }

  .downpayment-warning {
    padding-top: math.div(10px, $base-font-size-px) + em;
    font-size: 0.875em;
  }

  .timestamp-message {
    margin-right: 1.25em; // Align it nicely with the chart.
    font-size: 0.875em;
    text-align: right;
  }

  /*
        Main section with output
        --------------------------- */
  .rate-checker-heading {
    margin-right: math.div(10px, $base-font-size-px) + em;
    margin-bottom: math.div(16px, $base-font-size-px) + em;
    font-size: 1.375em;
  }

  /*
        Middle section with chart
        --------------------------- */

  // This is shameful, but this is needed to force
  // highcharts to display overflowing tooltips.
  .chart-area,
  .highcharts-container {
    overflow: visible !important;
  }

  .chart-area {
    // This matches the height of the highcharts chart.
    min-height: 400px;
  }

  // This ensures the chart resizes when the page is resized.
  .highcharts-container {
    position: absolute !important;
    width: 100% !important;
  }

  .highcharts-tooltip > span {
    z-index: 9999;
    padding: (math.div(4px, $base-font-size-px) + em)
      (math.div(10px, $base-font-size-px) + em)
      (math.div(4px, $base-font-size-px) + em)
      (math.div(8px, $base-font-size-px) + em);
    border: 2px solid var(--green-60);
    margin: 0 2px;
    background-color: var(--white);
    color: var(--gray-dark);
  }

  .chart {
    position: relative;
    padding-top: math.div(40px, $base-font-size-px) + em;
    border-top: 1px solid var(--gray-10);
    border-bottom: 1px solid var(--gray-10);
    margin: (math.div(20px, $base-font-size-px) + em)
      (math.div(20px, $base-font-size-px) + em)
      (math.div(20px, $base-font-size-px) + em) 0;

    &.geolocating {
      background: transparent url('#{$image-path}/icon_spinner.gif') scroll
        no-repeat center center;
      #chart {
        opacity: 0;
      }
    }

    .highcharts-color-0 {
      fill: #addc91;

      &:hover {
        fill: #2cb34a;
      }
    }

    .highcharts-tooltip-box {
      fill: none;
    }

    .m-notification {
      position: absolute;
      top: 30%;
    }

    .warning {
      position: relative;

      .highcharts-container {
        opacity: 0.3;
      }
    }

    figure {
      @include u-reset;
    }
  }

  .data-label__number {
    background-color: var(--white);
  }

  .chart-caption {
    padding-right: 1em;
    padding-bottom: 1em;

    // Magic number to line up caption with chart
    margin-left: math.div(60px, $base-font-size-px) + em;
    font-size: 1em;
  }

  .caption-title {
    text-align: center;
    margin-top: 0;
  }

  .rc-data-link {
    text-align: left;
    margin: (math.div(20px, $base-font-size-px) + em) 0
      (math.div(10px, $base-font-size-px) + em);
  }

  .chart-tooltip {
    z-index: 9999;

    .lenders {
      font-weight: 600;

      display: inline-block;
      max-width: 30%;
      font-size: 3em;
      text-align: right;
    }

    .text {
      display: inline-block;
      min-width: 70%;
    }
  }

  /*
        Compare interest rate costs
        --------------------------- */
  .compare {
    margin-top: math.div(30px, $base-font-size-px) + em;
    label {
      @include u-visually-hidden;
    }
  }

  // Layouts
  .rc-comp-1 {
    @include u-grid-column(1);
  }

  .rc-comp-3 {
    @include u-grid-column(3);
  }

  .rc-comp-3-push {
    @include u-grid-column($columns: 4);
  }

  .rc-comp-5 {
    @include u-grid-column(5);
  }

  .vs {
    font-size: 1.375em;
    text-align: center;
  }

  .rc-comparison-subhead {
    font-size: 1em;
  }

  .rc-comparison-subsection {
    padding: 1em 0;
    border-top: 1px solid var(--gray-10);
  }

  .interest-cost {
    font-size: 1.625em;
    text-align: right;
  }

  .rate-compare-container {
    @include u-grid-column(6);

    position: relative;
    margin-bottom: math.div(10px, $base-font-size-px) + em;
  }

  .dollar-input,
  .percent-input {
    position: relative;

    input {
      width: 100%;
      box-sizing: border-box;
      padding-left: math.div(15px, $base-font-size-px) + em;
    }

    .unit {
      position: absolute;
      z-index: 9;
      top: 0.5em;
      left: 5px;
      display: block;
      color: var(--gray-80);
    }
  }

  .percent-input {
    input {
      padding-left: math.div(4px, $base-font-size-px) + em;
    }

    .unit {
      right: 20%;
      left: auto;
    }
  }

  .down-payment {
    margin-top: 0;

    .dollar-input {
      display: inline-block;
      width: 65%;
    }

    .percent-input {
      display: inline-block;
      width: 32%;
    }
  }

  /*
        "Next steps"
        --------------------------- */
  .next-steps {
    margin-top: 5em;
    margin-bottom: math.div(45px, $base-font-size-px) + em;

    .tabs {
      box-sizing: border-box;
      margin-top: 2em;
    }
  }

  .next-steps-heading {
    margin-bottom: 1em;
    font-size: 1.125em;
  }

  .next-steps-list {
    @include u-reset;

    position: relative;
    padding-left: 30px; // match the negative outdent of the numbering
    margin: 0;
    counter-reset: li;
    list-style: none;

    li {
      position: relative;

      @include u-grid-column(1, 3);
    }
  }

  .next-steps-list > li::before {
    position: absolute;
    top: 1px;
    left: -30px;
    width: 20px;
    height: 20px;
    background: var(--green-60);
    border-radius: 20px;
    color: var(--black);
    content: counter(li);
    counter-increment: li;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    font-weight: 600;
  }

  /*
        Alerts and warnings
        --------------------------- */

  .chart-alert {
    position: absolute;
    top: 30%;
    padding: 1em 2em 1em 3em;
    background: var(--white);
  }

  .chart-menu {
    position: absolute;
    z-index: 1000;
    right: 0;
    top: -26px;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
    background-color: var(--white);
    font-size: 13px;

    &__btn {
      width: 100%;
      padding: (math.div(5px, $base-font-size-px) + em)
        (math.div(15px, $base-font-size-px) + em);
      border: none;
      background-color: var(--white);
      color: var(--pacific);
      font-weight: 500;
      outline: none;
      text-align: left;
    }

    &__options {
      height: 0;
      padding: 0;
      margin: 0;
      overflow: hidden;
      transition:
        border 300ms 301ms,
        height 300ms 100ms;
      cursor: pointer;

      li {
        list-style: none;
        padding: (math.div(5px, $base-font-size-px) + em) 0
          (math.div(5px, $base-font-size-px) + em)
          (math.div(15px, $base-font-size-px) + em);
        margin: 0;

        &:hover {
          background-color: var(--gray-5);
          color: var(--pacific);
        }
      }
    }

    &__open {
      border-color: var(--gray-10);

      .chart-menu__options {
        height: 110px;
      }
    }
  }

  .credit-alert {
    margin-top: 2em;
  }

  /*
        Media queries
        --------------------------- */
  // Tablet and below.
  @include respond-to-max($bp-sm-max) {
    display: grid;
    grid-template-areas:
      'page-intro'
      'calculator'
      'rc-results';

    .page-intro {
      grid-area: page-intro;
    }

    .rc-results {
      grid-area: rc-results;
    }

    .calculator {
      grid-area: calculator;
    }
  }

  @include respond-to-max(720px) {
    .rc-home-illu {
      display: none;
    }

    .rc-illu-inner {
      padding: 0;
    }

    .next-steps-list li {
      position: relative;

      @include u-grid-column(12);
    }
  }

  @include respond-to-max(800px) {
    .rc-comparison-section {
      margin-top: 1.5em;
    }

    .rc-comparison-subsection {
      padding: 1em 0 0;
    }

    .rc-comp-1 {
      @include u-grid-column(2);
    }

    .rc-comp-3 {
      @include u-grid-column(5);
    }

    .rc-comp-3-push {
      @include u-grid-column($columns: 5);
    }

    .rc-comp-5 {
      @include u-grid-column(12);
    }

    .interest-cost {
      margin-bottom: 0.5em;
      font-weight: 600;
      color: var(--gray-60);
    }
  }

  @include respond-to-min(1000px) {
    .rate-checker-heading {
      width: 75%;
    }
  }

  @include respond-to-max($bp-lg-max) {
    .half-width-gt-1230 {
      @include u-grid-column(12);
    }

    .down-payment {
      margin-top: math.div(20px, $base-font-size-px) + em;
    }
  }

  @media print {
    .rc-illu-inner {
      display: none;
    }

    .calculator section {
      display: inline-block;
      width: 100%;
    }
  }
}
