.user-permission-manager {
  display: flex;
  flex-flow: column;
  gap: 2em;
}
.user-permission-group {
  display: flex;
  flex-flow: column;
  gap: 0.5em;
}
.user-permission-group .user-permission-group-name {
  font-size: 1.5em;
  font-weight: bold;
}
.user-permission-group .user-permission-controller {
  display: flex;
  flex-flow: row;
  gap: 1em;
  padding-block: 0.5em;
  border-top: 1px solid currentColor;
}
.user-permission-group .user-permission-controller .permission-info {
  flex: 1 auto;
  display: flex;
  flex-flow: column;
}
.user-permission-group .user-permission-controller .permission-info .permission-name {
  font-size: 1em;
}
.user-permission-group .user-permission-controller .permission-info .permission-description {
  font-size: 0.8em;
  font-style: italic;
}
.user-permission-group .user-permission-controller .permission-controls {
  display: flex;
  flex-flow: row;
  gap: 0.5em;
  user-select: none;
}
.user-permission-group .user-permission-controller .permission-controls .inherited-status {
  margin-right: 1em;
  color: white;
}
.user-permission-group .user-permission-controller .permission-controls .resulting-status {
  margin-left: 1em;
  color: white;
}
.user-permission-group .user-permission-controller .permission-controls .action-revoke,
.user-permission-group .user-permission-controller .permission-controls .action-inherit,
.user-permission-group .user-permission-controller .permission-controls .action-grant {
  cursor: pointer;
}
.user-permission-group .user-permission-controller .permission-controls .action-revoke.selected {
  color: white;
  background-color: #B71C1C;
}
.user-permission-group .user-permission-controller .permission-controls .action-inherit.selected {
  color: white;
  background-color: #1976D2;
}
.user-permission-group .user-permission-controller .permission-controls .action-grant.selected {
  color: white;
  background-color: #388E3C;
}
.user-permission-group .user-permission-controller .permission-controls > div,
.user-permission-group .user-permission-controller .permission-controls > button {
  height: 2em;
  width: 2em;
  border: 1px solid black;
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  background-color: white;
  transition: background-color 0.5s ease, color 0.5s ease;
  cursor: default;
}
.user-permission-group .user-permission-controller .permission-controls > div.revoked,
.user-permission-group .user-permission-controller .permission-controls > button.revoked {
  background-color: #B71C1C;
}
.user-permission-group .user-permission-controller .permission-controls > div.granted,
.user-permission-group .user-permission-controller .permission-controls > button.granted {
  background-color: #388E3C;
}
.user-permission-group .user-permission-controller .permission-controls > button:not(.selected):active,
.user-permission-group .user-permission-controller .permission-controls > button:not(.selected):hover {
  background-color: #ff6f00;
  color: white;
}