/**
 * The authorizations card: one row per application this account has approved.
 *
 * Shaped like the sessions card beside it on purpose. They answer the same question about different
 * credentials — what can act as me, and how do I stop it — so a person who has read one should not
 * have to learn a second layout to read the other.
 */
.account-authorizations {
  display: flex;
  flex-direction: column;
}

.account-authorizations-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--light);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}

.account-authorizations-row:last-child {
  border-bottom: none;
}

.account-authorizations-client {
  flex: 1 1 180px;
  min-width: 0;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/**
 * The scopes, in full, and wrapping rather than truncated.
 *
 * This is the line that says what the application may actually do, so it is the one thing on the row
 * that must not be cut off at the container's edge. A person deciding whether to revoke something is
 * deciding on exactly this.
 */
.account-authorizations-scopes {
  flex: 2 1 240px;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.account-authorizations-scope {
  padding: 2px 7px;
  border: 1px solid var(--light);
  border-radius: 3px;
  color: var(--muted);
  font-size: 10.5px;
  white-space: nowrap;
}

/** Nothing at all is a real state, and a more alarming one than a narrow scope. */
.account-authorizations-scope[data-none] {
  border-style: dashed;
}

.account-authorizations-when {
  flex: 0 1 auto;
  color: var(--muted);
  white-space: nowrap;
}

.account-authorizations-revoke {
  flex: 0 0 auto;
  margin-left: auto;
}

.account-authorizations-empty {
  padding: 15px 18px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.account-authorizations-empty[data-error] {
  color: var(--warning, #b00);
}

.account-authorizations-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}