@use 'apps/dashboard/src/variables' as *;

.account-home {
  max-width: calc(#{rhythm(90)} * 2);

  .container-row {
    display: flex;
    gap: rhythm(5);
  }

  .consumption-stats {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: rhythm(3);
    h2 {
      margin-bottom: 0;
    }
  }

  .right-column {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: rhythm(4);
    width: rhythm(41);

    .kb-list {
      align-items: flex-start;
      display: flex;
      flex-direction: column;
      gap: rhythm(1);
      list-style: none;
      padding: 0;
      margin-top: rhythm(1.5);
    }

    .kb-item {
      align-items: center;
      display: flex;
      gap: rhythm(1);
      &:not(.disabled) {
        cursor: pointer;
      }

      pa-icon {
        display: flex;
      }

      .tokens {
        flex: 0 0 auto;
        color: $color-neutral-regular;
      }
    }

    .count-container {
      display: flex;
      flex-direction: column;
      gap: rhythm(1.5);

      .count > .title-xxs {
        color: $color-neutral-regular;
      }
    }
  }
}
