.formContainer {
  display: flex;
  flex-direction: column;
}

.roleNameLabel {
  color: var(--text-background-primary-default);
  padding: 4px 0;
  margin-top: 20px;
}

.roleNameInput {
  display: flex;
  margin: 8px 0 12px 0;
}

.errorMessage {
  color: var(--text-background-danger-default);
  font-size: var(--s-font-14);
  align-self: center;
  visibility: hidden;
}

.errorMessageVisible {
  visibility: visible;
}

.separator {
  border: 0;
  margin: 16px 0 8px 0;
  align-self: center;
  height: 2px;
  border: none;
  border-top: var(--separator-background-primary-default) solid 1px;
}

.permissionsHeaderContainer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 16px 0 24px 0;
}

.permissionsLabel {
  color: var(--text-background-primary-default);
}

.clearPermissions {
  font-size: var(--s-font-14);
}

.clearPermissionsDisabled {
  color: var(--link-background-primary-disabled);
  cursor: not-allowed;
}

.clearPermissionsEnabled {
  color: var(--link-background-primary-default);
  cursor: pointer;
}

.permissionsContainer {
  max-height: 350px;
  overflow-y: auto;
}

.backButton {
  width: 100px;
}

.createRoleButton {
  margin-left: 8px;
}
