.investments-page {
  display: flex;
  flex-direction: column;
  gap: var(--size-2);

  /* HACK: help not causing scroll on ios even though it shouldn't */
  overflow-x: hidden;

  .balances-form {
    display: grid;
    row-gap: var(--size-2);
  }
  .date-ranges {
    display: flex;
    flex: 1;
    gap: var(--size-2);
    flex-wrap: wrap;

    div {
      flex: 1;
      min-width: 200px;
    }

    @media (max-width: 480px) {
      flex-direction: column;

      div {
        min-width: auto;
      }
    }
  }

  .account-selection {
    margin-block: var(--size-4);
    padding: var(--size-3);
    background: var(--surface-2);
    border: var(--border-size-1) solid var(--surface-3);
    border-radius: var(--radius-2);

    > label {
      display: block;
      margin-block-end: var(--size-2);
      font-weight: var(--font-weight-6);
      color: var(--text-1);
    }
  }

  .account-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-3);
    margin-block-start: var(--size-2);
  }

  .account-checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--size-2);
    padding: var(--size-2) var(--size-3);
    background: var(--surface-1);
    border: var(--border-size-1) solid var(--surface-3);
    border-radius: var(--radius-2);
    cursor: pointer;
    transition: all var(--ease-2) 150ms;
    font-weight: var(--font-weight-4);
    color: var(--text-1);

    &:hover {
      background: var(--surface-2);
      border-color: var(--violet-5);
      box-shadow: var(--shadow-2);
    }

    input[type="checkbox"] {
      cursor: pointer;
      width: var(--size-4);
      height: var(--size-4);
    }
  }

  .investment-projection {
    display: grid;
    row-gap: var(--size-4);

    canvas {
      max-width: 100%;
      height: 300px;
    }
  }
  .investment-projection-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--size-3);
    padding: var(--size-4);
  }

  .fi-progress {
    grid-column: 1 / -1;
    progress {
      width: 100%;
    }
  }

  .investment-table-section {
    display: grid;
    row-gap: var(--size-4);

    canvas {
      max-width: 100%;
      height: 300px;
    }
  }
  .investment-summary {
    text-align: center;
  }

  @media (max-width: 480px) {
    .currency-cell {
      white-space: normal;
      word-break: break-word;
      font-size: var(--font-size-0);
    }

    table {
      font-size: var(--font-size-0);
    }
  }
}

/* investment projection cards with icons*/
.card--iconed {
  display: grid;
  grid-template: min-content min-content / max-content 1fr;
  column-gap: var(--size-2);
  .values {
    grid-column: 2;
  }
  .card-content__prop {
    font-weight: var(--font-weight-7);
    font-size: var(--font-size-3);
  }
  .card-content__value {
    font-size: var(--font-size-1);
    color: var(--text-2);
  }
  .icon {
    width: var(--size-5);
    height: var(--size-5);
    color: var(--blue-6);
    flex-shrink: 0;
  }
}