@use 'variables.scss' as *;
// For styling UI pieces that we are adding to the Tenant UI ourselves

// The chip that displays api response statuses etc
.status-chip {
  background-color: $tenant-ui-status-default-background;
  color: $tenant-ui-status-default-color;
  border-radius: 5px;
  padding: 0.25rem 1rem 0.25rem 1rem;
  font-weight: bolder;
  text-align: center;
  > span.text {
    min-width: 80px;
    text-align: center;
  }

  /* green */
  &.active,
  &.accepted,
  &.approved,
  &.credential-acked,
  &.done,
  &.issued,
  &.verified,
  &.checked-in {
    background-color: $tenant-ui-status-green-background;
    color: $tenant-ui-status-green-color;
  }

  /* amber */
  &.pending,
  &.credential-issued {
    background-color: $tenant-ui-status-amber-background;
    color: $tenant-ui-status-amber-color;
  }

  /* red */
  &.credential-revoked,
  &.error,
  &.denied,
  &.rejected,
  &.revoked,
  &.offer-not-accepted {
    background-color: $tenant-ui-status-red-background;
    color: $tenant-ui-status-red-color;
  }

  /* blue */
  &.in-progress,
  &.response,
  &.requested,
  &.request,
  &.request-sent,
  &.request-received,
  &.transaction-acked,
  &.offer-sent,
  &.offer-received {
    background-color: $tenant-ui-status-blue-background;
    color: $tenant-ui-status-blue-color;
  }
}

// The blue card for informative prompts
.info-card {
  border: 1px solid #b5bbc4;
  border-radius: 5px;
  background-color: $tenant-ui-card-info-color;
  box-shadow: none;
  .p-card-title {
    text-align: center;
    color: $tenant-ui-card-info-text-color;
    .info-card-icon {
      font-size: 2.5em;
    }
  }
  .info-card-warning {
    color: #fc7b19;
  }
  .info-card-danger {
    color: #ff3045;
  }
  .p-card-footer {
    font-size: 0.9rem;
    font-weight: bold;
    line-height: 1.5rem;
    hr {
      height: 1px;
      background-color: rgb(186, 186, 186);
      border: 0;
    }
  }
  .p-card-title,
  .p-card-content,
  .p-card-footer {
    padding-top: 0;
  }
}

// Logout button in the menu
.logout-menu-item .p-menuitem-content {
  &,
  &:hover {
    .p-menuitem-link {
      color: $tenant-ui-text-danger !important;
    }
  }
}
