/* banking industry components */

/* chat-transaction-list */
chat-transaction-list {
  >.chat-transaction-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    background-color: var(--color-neutral-10);
    border: 1px solid var(--color-neutral-7);
    border-radius: var(--border-radius);
    padding: var(--space-xs) var(--space-s);

    >li {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: baseline;
      gap: var(--space-2xs);

      >.date {
        color: var(--color-neutral-5);
      }

      >.amount {
        justify-self: end;

        &.neg {
          color: var(--color-color-4);
        }

        &.pos {
          color: var(--color-color-2);
        }
      }
    }
  }
}

/* chat-bill-list + chat-bank-card-list are tappable and use the shared
   .chat-hscroll card pattern in chat.css - no extra styling needed. */

/* chat-loan-card */
chat-loan-card {
  >.chat-loan-card {
    background-color: var(--color-neutral-10);
    border: 1px solid var(--color-neutral-7);
    border-radius: var(--border-radius);
    padding: var(--space-xs) var(--space-s);
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);

    >header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--space-s);

      >h3 {
        margin: 0;
      }

      >.status {
        margin: 0;
        text-transform: capitalize;
        color: var(--color-neutral-5);
      }
    }

    >dl {
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: var(--space-3xs);

      >div {
        display: flex;
        justify-content: space-between;
        gap: var(--space-s);

        >dt {
          color: var(--color-neutral-5);
        }

        >dd {
          margin: 0;
        }
      }
    }
  }
}