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

.college-costs {
  // remove border between sidebar and main content
  & .content__main {
    position: relative;

    &::after {
      content: none;
    }
  }

  .costs-not-covered-sticky {
    display: none;
  }

  // Desktop and above.
  @include respond-to-min($bp-med-min) {
    @supports (position: sticky) {
      .app-container {
        display: flex;
      }
      .app {
        width: 70%;
      }
      .costs-not-covered-sticky {
        width: 30%;
        .number-callout {
          position: sticky;
          top: math.div(10px, $base-font-size-px) + em;
        }
      }
    }
  }

  .cf-icon-svg--help-round {
    color: var(--pacific);
  }

  .u-border-bottom {
    border-bottom: 1px solid $block-border-bottom;
  }

  .block.block--mid {
    margin-top: math.div(($grid_gutter-width * 1.5), $base-font-size-px) + em;
    margin-bottom: math.div(($grid_gutter-width * 1.5), $base-font-size-px) + em;
  }

  // Notification explanation doesn't need top margin unless it follows message
  .m-notification__explanation {
    margin-top: 0;
  }

  .m-notification__message + .m-notification__explanation {
    margin-top: math.div(5px, $base-font-size-px) + em;
  }

  &__tool-section {
    display: none;

    max-width: math.div(570px, $base-font-size-px) + rem;

    h3,
    legend.h4 {
      margin-top: math.div(30px, $base-font-size-px) + em;
    }
    legend.h4 {
      margin-bottom: math.div(4px, $base-font-size-px) + em;
    }

    .equation-row {
      .financial-item {
        &__label div,
        &__value span {
          @include heading-3;
        }
      }

      .o-costs-group {
        &__header {
          margin-top: math.div(30px, $base-font-size-px) + em;
        }

        &__label.h4,
        &__link span {
          @include heading-3;
        }
      }

      &--bottom-line {
        border-bottom: 2px solid black;
        padding-bottom: 30px;
      }
    }

    .m-notification {
      margin-bottom: math.div($grid_gutter-width, $base-font-size-px) + em;
      margin-top: math.div($grid_gutter-width, $base-font-size-px) + em;
    }

    input {
      width: 100%;
      box-sizing: border-box;
    }

    .o-costs-group {
      &__header,
      &__content {
        padding-left: 0;
        padding-right: 0;
      }
    }

    &--school-search {
      .m-notification {
        margin-bottom: math.div(
            math.div($grid_gutter-width, 2),
            $base-font-size-px
          ) +
          em;
        margin-top: math.div(
            math.div($grid_gutter-width, 2),
            $base-font-size-px
          ) +
          em;
      }

      .m-form-field {
        margin-top: math.div(
            math.div($grid_gutter-width, 3),
            $base-font-size-px
          ) +
          em;
      }
    }

    &--costs {
      .a-btn.active {
        background-color: var(--white);
        color: var(--pacific);
        border-color: var(--pacific);
      }

      .costs__button-section {
        .m-form-field {
          margin-bottom: math.div(15px, $base-font-size-px) + em;
        }
      }
    }

    &--debt-guideline {
      .h3 .financial-item--subtotal {
        margin-top: math.div(15px, $base-font-size-px) + em;
      }

      h2.step-2 {
        margin-top: math.div(45px, $base-font-size-px) + em;
      }
    }

    &--affording {
      .total-hours .financial-item__value span {
        font-weight: 600;
      }

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

      .o-costs-group__header {
        border-top: 1px solid var(--black);
        border-bottom: 1px solid var(--black);
      }
    }

    &--summary {
      .financial-item {
        margin-top: 0;
      }

      .financial-item + .financial-item {
        margin-top: math.div(
            math.div($grid_gutter-width, 3),
            $base-font-size-px
          ) +
          em;
      }

      dl {
        dt {
          font-size: inherit;
          text-transform: none;
          letter-spacing: normal;
          margin-bottom: 0;
        }
        dd::after {
          height: math.div(
              math.div($grid_gutter-width, 3),
              $base-font-size-px
            ) +
            em;
        }
      }
    }

    .action-plan__choices,
    .affording-loans-choices {
      // equal height radio inputs
      display: flex;

      .m-form-field {
        width: 50%;
        margin-top: 0;
        box-sizing: border-box;
        &:first-child {
          padding-right: 7px;
        }
        &:last-child {
          padding-left: 7px;
        }
        label {
          height: 100%;
        }
      }
    }

    .affording-loans-choices__about {
      margin-top: math.div($grid_gutter-width, $base-font-size-px) + em;
    }
  }

  .comparison-section {
    border: 2px solid var(--gray-20);
    padding: math.div(math.div($grid_gutter-width, 2), $base-font-size-px) + em;

    .h4 {
      margin-top: 0;
    }

    legend {
      margin-bottom: math.div(
          math.div($grid_gutter-width, 3),
          $base-font-size-px
        ) +
        em;
    }

    .school-results__rank-display {
      display: flex;
      align-items: center;
      margin: (math.div($grid_gutter-width, $base-font-size-px) + em) 0;
    }

    .big-percentile {
      $big-percentile-font-size-px: 36px;
      height: math.div(110px, $big-percentile-font-size-px) + em;
      width: math.div(110px, $big-percentile-font-size-px) + em;
      border: 5px solid var(--black);
      border-radius: 50%;
      margin-right: math.div(15px, $big-percentile-font-size-px) + em;
      line-height: math.div(110px, $big-percentile-font-size-px) + em;
      text-align: center;
      font-size: math.div(36px, $base-font-size-px) + em;
      font-weight: 600;
      flex: 1;
      flex-basis: math.div(110px, $big-percentile-font-size-px) + em;
      flex-grow: 0;
      flex-shrink: 0;
    }

    .m-form-field--radio {
      display: inline-block;
    }
  }

  [data-state-based-visibility='school-fields-errors'] ul {
    padding-left: 0;
    list-style: none;
  }

  .o-table--financial {
    .indented-row td:first-child {
      padding-left: math.div(
          math.div($grid_gutter-width, 1.5),
          $base-font-size-px
        ) +
        em;
    }
    .subtotal-row {
      font-weight: 600;
    }
  }

  &__tool-section-buttons,
  .cf-notification {
    h3.up-next {
      .up-next--desc {
        display: list-item;
        font-size: 0.875em;
        margin-top: math.div(15px, $base-font-size-px) + em;
        margin-left: math.div(30px, $base-font-size-px) + em;
      }
    }

    .nav-button-container {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      margin-top: math.div(45px, $base-font-size-px) + em;
      margin-bottom: math.div(30px, $base-font-size-px) + em;

      & > button {
        width: 45%;
      }

      .a-btn--prev {
        background-color: var(--white);
        color: var(--pacific);
        border: 1px solid;
        border-color: var(--pacific);
      }
    }
  }

  .estimate--total-costs {
    margin-bottom: 1.875em;
    margin-top: 1.875em;
    position: relative;
    padding: math.div(15px, $base-font-size-px) + em;
    background: var(--gray-5);
    border: 1px solid var(--gray-40);

    & > .financial-item:first-child {
      margin-top: 0;
    }
  }

  #spinner {
    display: none;
    color: var(--green);
    position: absolute;
    top: 0.5em;
    right: 0.5em;
  }

  .searching > #spinner {
    display: block;
  }
}
