@use "../../../../styles/abstracts/variables";
@use "../../../../styles/abstracts/mixins";

/* ==========================================
   ROW
========================================== */

.transaction {
  display: grid;

  grid-template-columns:
    160px
    120px
    100px
    220px
    100px
    200px;

  width: 100%;

  min-width: fit-content;

  gap: 1rem;

  align-items: center;

  padding: .8rem 1.25rem;

  border-bottom: 1px solid rgba(255,255,255,.05);

  &:nth-child(even) {
    background: rgba(255,255,255,.015);
  }

  &:hover {
    background: rgba(255,255,255,.025);
  }
}

/* ==========================================
   TRANSACTION IDENTITY
========================================== */

.transactionIdentity {
  display: flex;

  align-items: center;

  gap: 0.85rem;
}

.transactionIcon {
  width: 42px;
  height: 42px;

  border-radius: 50%;

  flex-shrink: 0;

  position: relative;

  &::after {
    content: "";

    position: absolute;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
  }
}

/* ==========================================
   TYPE COLORS
========================================== */

.transactionTypeDeposit {
  background: rgba(247, 147, 24, 0.12);

  border: 1px solid rgba(247, 147, 24, 0.2);

  &::after {
    background: #f79318;
  }
}

.transactionTypeProfit {
  background: rgba(34, 197, 94, 0.12);

  border: 1px solid rgba(34, 197, 94, 0.2);

  &::after {
    background: #22c55e;
  }
}

.transactionTypeWithdrawal {
  background: rgba(239, 68, 68, 0.12);

  border: 1px solid rgba(239, 68, 68, 0.2);

  &::after {
    background: #ef4444;
  }
}

.transactionTypeTransfer {
  background: rgba(59, 130, 246, 0.12);

  border: 1px solid rgba(59, 130, 246, 0.2);

  &::after {
    background: #3b82f6;
  }
}

/* ==========================================
   INFO
========================================== */

.transactionInfo {
  display: flex;

  flex-direction: column;

  gap: 0.2rem;

  h4 {
    margin: 0;

    font-size: 0.75rem;

    font-weight: 500;

    color: #fff;
  }

  span {
    color: rgba(255, 255, 255, 0.5);

    font-size: 0.72rem;
  }
}

/* ==========================================
   AMOUNT
========================================== */

.amount {
  font-weight: 400 !important;
  font-size: .85rem !important;
  opacity: .85;
  color: #fff !important;
}

/* ==========================================
   STATUS
========================================== */

.transaction--success,
.transaction--failed {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-width: 95px;

  height: 32px;

  padding: 0 0.85rem;

  border-radius: 999px;

  font-size: 0.72rem;

  font-weight: 500;

  white-space: nowrap;
}

.transaction--success {
  color: #22c55e;

  background: rgba(34, 197, 94, 0.08);

  border: 1px solid rgba(34, 197, 94, 0.15);
}

.transaction--failed {
  color: #f59e0b;

  background: rgba(245, 158, 11, 0.08);

  border: 1px solid rgba(245, 158, 11, 0.15);
}

/* ==========================================
   DETAILS BUTTON
========================================== */

.actionButtonView {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  height: 34px;

  padding: 0 0.9rem;

  border-radius: 10px;

  border: 1px solid rgba(59, 130, 246, 0.15);

  background: rgba(59, 130, 246, 0.08);

  color: #60a5fa;

  font-size: 0.75rem;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.2s ease;

  &:hover {
    background: rgba(59, 130, 246, 0.15);

    transform: translateY(-1px);
  }
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 1024px) {
  .transaction {
    width: 100%;
    min-width: 1040px;
  }
}