.home {
  &__container {
    display: flex;
    min-height: 100%;
  }

  &__main-view {
    flex: 1 1 66.5%;
    background: $white;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  &__balance-wrapper {
    @media screen and (max-width: $break-small) {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      flex: 0 0 auto;
      padding-top: 16px;
    }

    @media screen and (min-width: $break-large) {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      margin: 2.3em 2.37em .8em;
      flex: 0 0 auto;
    }
  }

  // TODO: fix style import order so this isn't required to override specificity of `tab` class
  &__main-view &__tab {
    flex-grow: 1;
    color: $Grey-500;
    padding: 16px 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 130%;
  }

  &__main-view &__tab--active {
    color: $Blue-500;
  }

  &__connect-status-text {
    display: flex;
    flex-direction: column;
    @extend %content-text;
    padding-left: 24px;
    padding-right: 24px;

    div {
      &:last-child {
        margin-top: 26px;
      }
    }
  }

  &__connected-status-popover {
    width: 329px;
    height: 295px;
    margin-top: -12px;

    .popover-header {
      padding-bottom: 4px;
    }

    .popover-content {
      overflow-y: auto;
    }

    .popover-arrow {
      top: -6px;
      left: 24px;
    }

    .popover-footer {
      justify-content: flex-end;

      & :only-child {
        margin: 0;
      }

      button {
        height: 39px;
        width: 133px;
        border-radius: 39px;
        padding: 0;
      }
    }
  }

  &__connected-status-popover-bg {
    height: 34px;
    width: 110px;
    border-radius: 34px;
    position: absolute;
    top: 82px;
    left: 12px;
    opacity: 1;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.2);
    background: none;
  }

  &__connected-status-popover-bg-container {
    height: 100%;
    width: 100%;
  }
}