@import '@legends/styles/base.scss';

.historyWrapper {
  background: rgba($interactiveElement, 0.6);

  border-radius: 0.5rem;
  padding-top: 1.0625rem;
  padding-left: 1.5rem;
  padding-right: 1.3125rem;
  height: 100%;
  max-height: 100%;
}

.scrollableHistory {
  max-height: 12rem;
  overflow-y: auto; /* Enables vertical scrolling */
}

.scrollableHistory::-webkit-scrollbar {
  width: 0.5rem;
}

.scrollableHistory::-webkit-scrollbar-track {
  background: $charcoal;
  border-radius: $primaryBorderRadius;
}

.scrollableHistory::-webkit-scrollbar-thumb {
  background: $secondaryBorder;
  border-radius: 8px;
}

.scrollableHistory::-webkit-scrollbar-thumb:hover {
  background: $silverDecorative;
}

.invitationItem {
  display: flex;
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: 1.25rem;
}

.accepted {
  color: $green-300;
}

.expired {
  color: $red-300;
}

.pending {
  color: $yellow-300;
}

.invitationStatus {
  margin-right: auto;
  font-weight: 400;
}
.mr {
  margin-right: 0.25rem;
}
.ml {
  margin-left: 0.5rem;
}

.heading {
  font-size: 1.25rem;
  color: $secondaryText;
  margin-bottom: 1.5625rem;
}
