@use 'sass:color';
@use "../../../css/ui-constants";
@use "../../../css/wp-admin-colors";
@import "../../../css/boxes";

$boxBorder: 1px solid $amePostboxBorderColor;
$boxTopPadding: 10px;
$boxLeftPadding: 8px;
$boxPadding: $boxTopPadding $boxLeftPadding;

$capViewContainerPaddingLeft: $boxTopPadding;
$capViewContainerPaddingTop: $boxTopPadding;

$onePermissionHeight: 27px;
$capLabelLeftPadding: 2px;

$categorySidebarBackground: #f8f8f8;

@mixin ame-postbox {
	border: $boxBorder;
	background: #fff;
	box-shadow: $amePostboxShadow;
}

@mixin ame-striped-table {
	tbody tr:nth-child(2n+1) {
		background-color: #F9F9F9;
	}
}

#rex-loading-message {
	margin-top: 10px;
}

#rex-main-ui {
	display: flex;
	flex-direction: row;
	margin-top: ui-constants.$largeActorSelectorToUiGap;
	width: 100%;
}

#rex-content-container,
#rex-main-buttons {
	@include ame-postbox;
}

#rex-content-container {
	display: flex;
	flex-grow: 80;
	padding: 0;
	overflow-x: hidden;
}

#rex-action-sidebar {
	box-sizing: border-box;
	width: 170px;
	flex-grow: 0;
	flex-shrink: 0;
	align-self: flex-start;

	display: flex;
	flex-direction: column;

	margin: 0 0 0 15px;

	&.metabox-holder {
		padding-top: 0;
	}

	.rex-action-separator {
		height: 10px;
	}
}

//Sticky sidebar
@media screen and (min-width: 601px) {
	#rex-action-sidebar {
		position: sticky;
		--ame-rex-sidebar-top: calc(var(--wp-admin--admin-bar--height, 32px) + var(--ame-sticky-bar-last-pinned-height, 0px));
		top: var(--ame-rex-sidebar-top, 32px);

		//The sidebar should scroll vertically if it doesn't fit in the viewport.
		max-height: calc(100vh - var(--ame-rex-sidebar-top, 32px) - 10px);
		overflow-y: auto;
	}
}

#rex-main-buttons {
	padding: $boxPadding;
}

#rex-main-buttons,
#rex-related-widget {
	min-width: unset;
	margin: 0;
}

#rex-related-widget {
	margin-top: 15px;

	.hndle {
		cursor: initial;
	}

	.ws-ame-postbox-content {
		margin-bottom: 0;
	}
}

#rex-category-sidebar {
	width: 240px;
	flex-grow: 0;
	flex-shrink: 0;
	position: relative;

	border-right: $boxBorder;
	padding: $boxTopPadding 0;

	background: $categorySidebarBackground;

	& > ul {
		margin-top: 0;
	}

	.rex-nav-item {
		cursor: pointer;
		margin: 0;
		padding: 3px $boxLeftPadding 3px $capViewContainerPaddingLeft;
	}

	.rex-nav-item:hover {
		background-color: #E5F3FF;
	}

	.rex-selected-nav-item {
		background-color: #CCE8FF;
		box-shadow: 0px -1px 0px 0px #99D1FF, 0px 1px 0px 0px #99D1FF;

		//Don't change the color when hovering over a selected item.
		&:hover {
			background-color: #CCE8FF;
		}
	}

	$navItemLevelPadding: 13px;
	@for $level from 2 through 5 {
		.rex-nav-level-#{$level} {
			padding-left: ($level - 2) * $navItemLevelPadding;
		}
	}

	.rex-nav-toggle {
		visibility: hidden;
		display: inline-block;

		box-sizing: border-box;

		max-height: 100%;
		width: 20px;
		//background: #A27D35;
		text-align: right;
		vertical-align: middle;

		&:after {
			font-family: dashicons, sans-serif;
			content: "\f345";
		}

		&:hover {
			color: #3ECEF9;
		}
	}

	.rex-nav-is-expanded .rex-nav-toggle {
		//background: #00aa00;
		&:after {
			content: "\f347";
		}
	}

	.rex-nav-has-children .rex-nav-toggle {
		visibility: visible;
	}

	$triggerLeftPadding: $boxLeftPadding;
	$triggerRightPadding: ($boxLeftPadding + 2);

	.rex-dropdown-trigger {
		position: absolute;
		right: 0;
		top: 0;

		padding: ($boxTopPadding + 2) $triggerRightPadding 3px $triggerLeftPadding;
	}

	//Test styles for flexboxy appearance.
	.rex-nav-item {
		display: flex;
		flex-wrap: nowrap;
		align-items: baseline;

		height: 21px;
		padding-top: 4px;
		padding-bottom: 2px;

		$spaceWidth: 0.3em;

		.rex-nav-toggle {
			flex-shrink: 0;
			margin-right: $spaceWidth;
			align-self: stretch;
			padding: 1px 0;
		}

		.rex-capability-count {
			flex-shrink: 0;
			margin-left: $spaceWidth;
			margin-right: $spaceWidth;
		}

		.rex-nav-item-header {
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
	}

	//The first nav item needs to leave space on the right for the dropdown trigger.
	.rex-nav-item:first-child {
		padding-right: ($triggerLeftPadding + $triggerRightPadding + 20px + 4px);
		//20px = Dashicon size, 4px = extra margin in case counts are shown as colorized badges
		//(which would put the first count next to the trigger).
	}
}

#rex-capability-view-container {
	flex-grow: 70;
	padding: $capViewContainerPaddingTop $capViewContainerPaddingLeft;
	overflow-x: hidden;
}

#rex-capability-view {
	width: 100%;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

$oneCategoryWidth: 250px;
$categoryMargin: 8px;

.rex-category {
	box-sizing: border-box;
	min-width: 160px;
	width: $oneCategoryWidth;

	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: auto;

	padding: 0;
	margin: 0 $categoryMargin*2 $categoryMargin*2 0;

	border: 1px solid $amePostboxBorderColor;

	.rex-category-name {
		font-weight: 600;
	}

	.rex-category-subheading {
		display: none;
		color: #666;
		font-size: 12px;
		font-variant: small-caps;
	}

	.rex-category-subtitle {
		color: #888;
		font-size: 0.95em;
		font-family: Consolas, Monaco, monospace;
	}

	.rex-category-contents {
		box-sizing: border-box;

		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;

		$catPadding: 10px;
		padding: $catPadding #{$catPadding - $capLabelLeftPadding} $catPadding $catPadding;
	}

	&.rex-has-subcategories {
		width: 100%;
		flex-basis: 100%;
	}

	.rex-category-header {
		padding: 8px 10px;
		border-bottom: 1px solid $amePostboxBorderColor;
	}

	&.rex-top-category {
		border: none;
		margin: 0 0 10px 0;
		padding: 0;

		& > .rex-category-header {
			color: #23282d;
			font-size: 1.3em;
			margin: 1em 0;
			padding: 0;
			border-bottom: none;
		}

		& > .rex-category-contents {
			padding: 0;
		}
	}

	&.rex-sub-category {
		box-shadow: $amePostboxShadow;

		& > .rex-category-header {
			background: #fafafa;
		}
	}
}

@function desiredCategoryWidth($columns) {
	@return $oneCategoryWidth * $columns + ($categoryMargin * 2 * ($columns - 1));
}

$maxFixedColumns: 3;
@for $cols from 1 through $maxFixedColumns {
	.rex-desired-columns-#{$cols} {
		$desiredWidth: desiredCategoryWidth($cols);
		width: $desiredWidth;
		flex-grow: 0;
		max-width: $desiredWidth * 2;
	}
}

.rex-desired-columns-max {
	flex-basis: 100%;
	width: 100%;
}

//Switch fixed-size categories to full width on smaller screens. The breakpoints were
//determined empirically and might need to change if other parts of the UI change.
@media screen and (max-width: 1432px) {
	$availableWidth: 780;
	@for $cols from 2 through $maxFixedColumns {
		$desiredWidth: desiredCategoryWidth($cols);
		@if $desiredWidth >= $availableWidth {
			.rex-desired-columns-#{$cols} {
				flex-basis: 100%;
				width: 100%;
			}
		}
	}
}

@media screen and (max-width: 1168px) {
	$availableWidth: 516;
	@for $cols from 2 through $maxFixedColumns {
		$desiredWidth: desiredCategoryWidth($cols);
		@if $desiredWidth >= $availableWidth {
			.rex-desired-columns-#{$cols} {
				flex-basis: 100%;
				width: 100%;
			}
		}
	}
}

//region Full-width categories
//A "full-width" category spans the entire width of the container and displays permissions in columns.
.rex-full-width-categories {
	.rex-category {
		width: 100%;
		max-width: unset;
	}

	.rex-desired-columns-1 > .rex-category-contents > .rex-permission-list {
		column-count: 1;
		max-width: 300px;
	}
}

/*
 * Ensure that each category contains no more than the desired number of columns.
 * This is done by adding an invisible space filler element to the end of the permission list.
 *
 * Warning: This hack is not perfect. It can allow n+1 columns sometimes.
 */
$minPermissionsPerColumn: 3; //Note: This must match the minItemsPerColumn variable in role-editor.ts.

@mixin addColumnFiller($expectedColumns) {
	.rex-full-width-categories {
		@for $cols from 2 through 5 {
			@if $cols < $expectedColumns {
				.rex-desired-columns-#{$cols} > .rex-category-contents > .rex-permission-list::after {
					content: 'filler';
					display: block;
					background: yellowgreen;
					font-size: 13px; //Same as permission font size. Might be unnecessary.

					height: ($expectedColumns - $cols) * $minPermissionsPerColumn * $onePermissionHeight;
					visibility: hidden;
				}
			}
		}
	}
}

@media screen and (min-width: 1292px) and (max-width: 1501px) {
	@include addColumnFiller(3);
}

@media screen and (min-width: 1502px) and (max-width: 1711px) {
	@include addColumnFiller(4);
}

@media screen and (min-width: 1712px) {
	@include addColumnFiller(5);
}

//endregion

.rex-show-category-subheadings .rex-category .rex-category-subheading {
	display: block;
	width: 100%;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

//region Capability counts
.rex-capability-count {
	//In the future, we could show the number of caps in a bubble and style it depending
	//on how many capabilities are enabled (none/some/all).
	//background-color: #eee;
	//border: 1px solid #ddd;
	//color: #666;

	border-radius: 10px;

	font-size: 12px;
	//padding: 0 7px;

	&.rex-all-capabilities-enabled {
		//font-weight: bold;
		//color: #494;
		//border-color: green;
		//background-color: #ddffcc;
	}

	&:before {
		content: "(";
	}

	&:after {
		content: ")";
	}
}

.rex-enabled-capability-count + .rex-total-capability-count {
	&:before {
		content: "/";
	}
}

$badgeZeroBackground: $categorySidebarBackground;
$badgeZeroBorder: wp-admin-colors.wpColor(gray-5);
$badgeZeroColor: wp-admin-colors.wpColor(gray-50);

$badgeSomeBackground: wp-admin-colors.wpColor(blue-0);
$badgeSomeBorder: wp-admin-colors.wpColor(blue-10);
$badgeSomeColor: wp-admin-colors.wpColor(blue-50);
//Colors for the progress bar effect:
$badgeSomeSecondaryBackground: wp-admin-colors.wpColor(blue-20);
$badgeSomeTertiaryBackground: $badgeSomeBackground;

$badgeAllBackground: wp-admin-colors.wpColor(green-0);
$badgeAllBorder: wp-admin-colors.wpColor(green-10);
$badgeAllColor: wp-admin-colors.wpColor(green-70);

$badgeHorizontalPadding: 6px;
$badgeBorderRadius: 3px;
$badgeProgressBarThickness: 2px;
//The progress bar could also show denied capabilities in red (on the other end of the bar),
//but for now we just show enabled vs. disabled.
$badgeDeniedBarColor: orangered; //WP's standard red colors don't look good here.

.rex-fancy-capability-counts .rex-capability-count {
	border: 1px solid $badgeSomeBorder;
	background: $badgeSomeBackground;
	color: $badgeSomeColor;
	border-radius: $badgeBorderRadius;

	padding: 0 $badgeHorizontalPadding;
	margin-right: 0;

	min-width: 31px;
	text-align: center;
	overflow: hidden;

	&.rex-no-capabilities-enabled {
		background: $badgeZeroBackground;
		border-color: $badgeZeroBorder;
		color: $badgeZeroColor;
	}

	&.rex-all-capabilities-enabled {
		background: $badgeAllBackground;
		border-color: $badgeAllBorder;
		color: $badgeAllColor;
	}

	//Push the count to the right edge of the sidebar.
	#rex-category-sidebar & {
		margin-left: auto;
		margin-right: 0;
	}

	//Hide the CSS-generated parentheses.
	&:before, &:after {
		content: none;
	}
}

.rex-fancy-capability-counts.rex-with-capability-count-bars .rex-capability-count {
	//Progress bar background showing enabled/disabled capability ratio.
	background: linear-gradient(
			to right,
			$badgeSomeSecondaryBackground 0%,
			$badgeSomeSecondaryBackground var(--ame-rex-enabled-cap-percent, 75%),
			$badgeSomeTertiaryBackground var(--ame-rex-enabled-cap-percent, 75%),
			$badgeSomeTertiaryBackground 100%
	);

	//Necessary to position the :before pseudo-element correctly.
	position: relative;
	//Create a new stacking context to ensure the :before pseudo-element can be shown
	//behind the text by setting a negative z-index.
	isolation: isolate;

	//A background rectangle behind the text that hides most of the progress bar,
	//leaving a thin strip at the bottom. This helps keep the badge readable while
	//still showing the progress bar effect.
	&:before {
		content: "";
		display: block;
		z-index: -1;

		position: absolute;
		top: 0;
		bottom: $badgeProgressBarThickness;
		left: 0;
		right: 0;

		background: $badgeSomeBackground;
		border-radius: 0 0 $badgeBorderRadius $badgeBorderRadius;
	}

	&.rex-no-capabilities-enabled {
		//No progress bar for zero enabled capabilities.
		background: $badgeZeroBackground;
		//The :before element isn't needed since there's no progress bar.
		&:before {
			display: none;
		}
	}

	&.rex-all-capabilities-enabled {
		//Also no progress bar when all capabilities are enabled.
		//We could show a full green bar here - I don't have a strong opinion on this. For now,
		//having no bar seems cleaner and makes the partial/full distinction clearer.
		background: $badgeAllBackground;

		&:before {
			display: none;
		}
	}
}

// Another progress bar idea:
//
// Show a row of small boxes/dots below the heading, one for each capability (except for
// categories with > N caps). This provides a more granular view and makes it easier to
// see which categories have more/fewer total capabilities. For example, you could
// distinguish between 5/10 and 2/4 enabled capabilities at a glance, while both would
// show as 50% in the previous design.
//
// It can be implemented using CSS as a repeating linear gradient background. Optionally,
// we could have a second gradient in the background with grey boxes to show the total number
// of capabilities.
//
// However, this requires more vertical space, and it's hard to position the rows nicely
// since the existing layout is a non-wrapping flexbox. It would also be harder to align
// heading text with capability counts.

//endregion

.rex-permission-list {
	box-sizing: border-box;
	width: 100%;

	columns: 200px;
	column-gap: 10px;

	.rex-permission {
		//margin-bottom: 6px;
		//background: #fafafa; //For development. The color helps to visually estimate the size of the element.
	}
}

.rex-permission {
	box-sizing: border-box;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	font-size: 13px;
	height: $onePermissionHeight;
	vertical-align: baseline;

	break-inside: avoid-column;

	display: flex;

	margin-left: -$capLabelLeftPadding;

	label, .rex-permission-tip-trigger {
		vertical-align: baseline;
		padding-top: 3px;
		padding-bottom: 3px;
	}

	label {
		flex-grow: 1;
		flex-shrink: 1;
		flex-basis: 50px;
		padding-left: $capLabelLeftPadding;

		overflow: hidden;
		text-overflow: ellipsis;
	}

	.rex-permission-tip-trigger {
		flex-grow: 0;
		flex-shrink: 0;
		flex-basis: 20px;
	}
}

.rex-is-redundant {
	color: #888;
}

.rex-is-explicitly-denied input[type=checkbox] {
	border-color: red;
}

@mixin capCheckboxEffect($color) {
	background-color: $color;
}

.rex-is-personal-override {
	&.rex-is-explicitly-denied input[type=checkbox] {
		@include capCheckboxEffect(#ffe5e5);
	}

	input[type=checkbox]:checked {
		@include capCheckboxEffect(#d9ffd9);
		border-color: green;
	}
}

.rex-is-inherited input[type=checkbox] {

}

//region Highlight unsaved changes
.rex-highlight-changes .rex-is-modified {
	$stateColors: (
		'enabled': #dafbe1,
		'disabled': #ffebe9
	);

	@each $state, $backgroundColor in $stateColors {
		&.rex-is-#{$state} {
			background-color: $backgroundColor;

			&:hover {
				background-color: color.scale($backgroundColor, $lightness: -8%);
			}
		}
	}
}

//endregion

//region Permission tooltips
.rex-permission-tip-trigger {
	//We could hide the trigger by default, but I'm not sure if that's the best option.
	visibility: hidden;

	display: inline-block;
	min-width: 20px;
	height: 100%;
	margin: 0;
	padding-left: 2px;

	cursor: pointer;
	color: #777; //Unsure. Even this softer color still draws more attention than a tooltip should.

	&:hover {
		color: #0096dd;
	}
}

.rex-permission:hover {
	background-color: #fafafa;

	.rex-permission-tip-trigger {
		visibility: visible;
	}
}

.rex-tooltip {
	max-width: 700px;

	.rex-tooltip-section-container {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
	}

	.rex-tooltip-section {
		max-width: 400px;
	}
}

#rex-permission-tip {
	overflow-y: auto;
	max-height: 600px;

	h4 {
		margin-bottom: 0.4em;
	}

	.rex-tip-granted-permissions {
		list-style: disc inside;
		margin-top: 0;
		margin-bottom: 0;
	}

	.rex-documentation-link {
		display: inline-block;
		max-width: 100%;
		overflow-wrap: break-word;
	}
}

.rex-capability-inheritance-breakdown {
	@include ame-striped-table;

	.rex-is-decisive-actor {
		td:first-child:after {
			content: "\1f844"; //Wide left arrow.
			display: inline-block;
			font-weight: bold;
			margin-left: 0.5em;
		}
	}
}

//endregion

#rex-view-toolbar {
	background: #fcfcfc; //Consider #f5f5f5 and #fcfcfc as alternatives.
	border-bottom: 1px solid #ddd;

	padding: 0 $boxLeftPadding $boxTopPadding $boxLeftPadding;
	margin: (-$capViewContainerPaddingTop) (-$capViewContainerPaddingLeft) (0) (-$capViewContainerPaddingLeft);

	display: flex;
	align-items: center;
	flex-wrap: wrap;

	& > * {
		margin-top: $boxTopPadding;
	}

	.button {
		vertical-align: middle;
	}

	> label {
		margin-right: 10px;
	}

	.rex-dropdown-trigger .dashicons {
		line-height: 1.3; //This isn't quite right, but it will do for now.
	}
}

#rex-quick-search-query {
	min-width: 250px;
	max-width: 100%;
	margin-right: 10px;
}

#rex-misc-view-options-button {
	margin-left: auto;
	margin-right: 10px;
}

#rex-category-view-selector {

}


.rex-search-highlight {
	background-color: #ffff00;
}

//region CPT & Taxonomy tables
.rex-permission-table {
	th input[type="checkbox"] {
		vertical-align: middle;
		margin: -4px 4px -1px 0;
	}

	@include ame-striped-table;

	td ul {
		margin: 0;
	}

	.rex-base-cap-notice {
		color: #888;
	}
}

/* Switch to fixed layout in narrow viewports to prevent overflow. */
@mixin fixedTableLayout($nameColumnWidth: 25%) {
	table-layout: fixed;
	max-width: 100%;

	.rex-category-name-column {
		width: $nameColumnWidth;
	}
}

@media screen and (max-width: 1540px) {
	.rex-permission-table {
		@include fixedTableLayout(20%);
	}

	.rex-readable-names-enabled .rex-permission-table {
		@include fixedTableLayout(25%);
	}
}

/* The taxonomy table needs a wider screen because it has more columns. */
@media screen and (max-width: 1650px) {
	#rex-taxonomy-summary-category .rex-permission-table {
		@include fixedTableLayout(25%);
	}
}

/*
When in "human readable" mode, the taxonomy table doesn't show capability names,
so it won't overflow its container unless the viewport is very small.
*/
.rex-readable-names-enabled #rex-taxonomy-summary-category .rex-permission-table {
	table-layout: auto;
	max-width: 600px;

	.rex-capability-name, .rex-permission-tip-trigger {
		display: none;
	}

	.rex-permission, th[scope="col"] {
		text-align: center;
	}

	.rex-category-name-column {
		width: unset;
	}
}

@media screen and (max-width: 1200px) {
	.rex-readable-names-enabled #rex-taxonomy-summary-category .rex-permission-table {
		@include fixedTableLayout(40%);
	}
}

//endregion

#rex-action-sidebar {
	.rex-action-button {
		display: block;
		margin-bottom: 4px;
		width: 100%;
	}
}

#rex-permission-list-view {
	column-width: 240px;
	column-gap: 16px;
	padding-top: $boxLeftPadding;
}

#rex-category-view-spacer {
	width: 100%;
	height: $capViewContainerPaddingTop;
}

.rex-dropdown-trigger {
	display: inline-block;
	box-sizing: border-box;
	cursor: pointer;

	padding: 2px;
	color: #aaa;
	text-decoration: none;

	&:hover, &:focus {
		color: #777;
		text-decoration: none;
	}
}

.rex-dropdown {
	position: absolute;

	border: $boxBorder;
	background: #fff;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);

	padding: $boxPadding;
	z-index: 100;

	.rex-dropdown-item {
		display: block;
		margin-bottom: 10px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.rex-dropdown-sub-item, .rex-dropdown-sub-item-divider {
		margin-left: 1em;
	}

	.rex-dropdown-item > .rex-dropdown-item {
		margin-bottom: 6px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.rex-dropdown-sub-item-divider {
		border-bottom: 1px solid wp-admin-colors.wpColor(gray-5);
		margin-top: 0;
		//Empirical adjustment to make the distance from the previous item the same as
		//the distance to the next item (measured from checkbox borders).
		padding-top: 2px;
	}
}

.ui-dialog {
	.ui-dialog-buttonpane {
		background: #fcfcfc;
		border-top: 1px solid #dfdfdf;
		padding: 8px;

		&:after {
			clear: both;
			content: "";
			min-height: 0;
			display: table;
			border-collapse: collapse;
		}
	}

	//In WordPress the "Cancel" option is usually on the left side,
	//but AME historically puts it on the right.
	.ui-dialog-buttonset {
		width: 100%;

		.ui-button.rex-dialog-cancel-button, .ui-button.ame-dialog-cancel-button {
			float: right;
			margin-right: 0 !important;
		}

		.ui-button {
			float: left;
		}
	}
}

.rex-dialog {
	input[type=text], select {
		box-sizing: border-box;
		display: block;
		width: 100%;
	}
}

.rex-dialog-section {
	margin-top: 0;

	h4 {
		margin: 0 0 6px 0;
	}
}

#rex-delete-capability-dialog {
	.rex-deletable-capability-container {
		max-height: 400px;
		overflow-y: auto;
	}

	.rex-deletable-capability-list {
		margin-top: 0;
		list-style-type: none;
	}
}

#rex-add-capability-dialog {
	#rex-new-capability-name {
		box-sizing: border-box;
		width: 100%;
	}

	#rex-add-capability-validation-message {
		min-height: 40px;
		margin-bottom: 6px;
	}
}

#rex-delete-role-dialog {
	.rex-deletable-role-list-container {
		max-height: 380px;

		overflow-y: auto;
		margin-top: 10px;
	}

	.rex-deletable-role-list {
		table-layout: fixed;
		@include ame-striped-table;
	}

	.rex-role-name-column > label {
		display: inline-block;
		width: 100%;
	}

	.rex-role-usage-column {
		width: 6em;
		max-width: 30%;
		color: #888;
		text-align: right;
	}
}

//region Editable roles dialog
$editableRolesSectionBorder: #ccd0d4;
#rex-editable-roles-container {
	display: flex;

	.ame-role-table {
		min-width: 190px;
		border: 1px solid $editableRolesSectionBorder;
		border-right-style: none;

		td {
			cursor: pointer;
		}
	}

	$selectedRowTipColor: white;

	.ame-selected-role-table-row {
		background: #CCE8FF;

		.ame-selected-role-tip {
			visibility: visible;
		}

		.ame-column-role-name {
			font-weight: bold;
		}
	}

	.ame-column-selected-role-tip {
		position: relative;
		padding: 0;
		min-width: 30px;
	}

	.ame-selected-role-tip {
		visibility: hidden;

		height: 100%;
		width: 100%;
		box-sizing: border-box;

		position: absolute;
		top: 0;
		right: -2px;

		border-right: 1px solid $selectedRowTipColor;

		.ame-rex-svg-triangle {
			box-sizing: border-box;
			position: absolute;
			right: 0;
			height: 100%;

			polygon {
				fill: $selectedRowTipColor;
				stroke: $selectedRowTipColor;
				stroke-width: 1px;
			}
		}
	}
}

#rex-editable-roles-options {
	padding: 4px $boxTopPadding $boxTopPadding $boxTopPadding;
	border: 1px solid $editableRolesSectionBorder;

	fieldset > p:first-of-type {
		margin-top: 0;
	}
}

#rex-editable-role-list {
	margin-left: 1em;
	margin-top: 0;
}


#rex-editable-roles-placeholder-content {
	$placeholderFontSize: 15px;

	padding: 0 10px;

	&, & p {
		font-size: $placeholderFontSize;
	}

	h3, h4 {
		margin-top: 0;
	}

	ul {
		list-style: disc outside;
		margin-top: 0;
		margin-left: 1em;
	}

	.dashicons {
		font-size: $placeholderFontSize;
		vertical-align: baseline;
	}
}
//endregion

//region User role list
#rex-user-role-list {
	border-right: $boxBorder;
	padding: $boxPadding;

	background: #f8f8f8;

	p:first-child {
		margin-top: 0;
	}
}

#rex-primary-user-role {
	display: block;
}

.rex-user-role-option-list {
	margin-top: 0;
}

//endregion

//region Reset roles dialog
#rex-reset-roles-dialog {
	font-size: 1em;
	position: relative;

	.rex-dialog-section {
		margin-bottom: 1em;

		p {
			margin: 0 0 4px 0;
		}
	}

	h4 {
		margin: 0 0 6px 0;
	}
}

.rex-rr-change {
	font-weight: 600;
}

.rex-rr-positive-change {
	color: green;
}

.rex-rr-negative-change {
	color: red;
}

.rex-rr-no-changes {
	color: wp-admin-colors.wpColor(gray-30);
}

.rex-rr-role-options {
	.rex-rr-checkbox-col {
		padding: 11px 0 0 3px;
		width: 1.8em;
		vertical-align: top;
	}

	thead .rex-rr-checkbox-col {
		padding-top: 4px;
		vertical-align: middle;
	}

	label {
		vertical-align: baseline;
	}

	.rex-rr-name-col {
		width: 35%;
	}
}

#rex-rr-role-options-container {
	max-height: 500px;
	overflow-y: auto;
}

#rex-rr-info-text {
	ul {
		list-style: disc;
		margin-top: 0;
		margin-left: 1.2em;
	}
}

.rex-rr-version-notice-major,
.rex-rr-version-notice-none {
	font-weight: bold;
}

.rex-rr-version-notice-major,
.rex-rr-version-notice-none {
	color: wp-admin-colors.wpColor(red-50);
	display: block;
}

#rex-rr-load-overlay {
	position: absolute;
	box-sizing: border-box;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	background: white;
	padding: 8px;
	margin: 0;
}

#rex-rr-loading-message {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;

	.spinner {
		margin: 0;
		float: none;
	}
}

.rex-rr-reset-roles-dialog {
	//Constrain the dialog height so it fits in the viewport even if the detailed capability
	//change list is very long.
	max-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px) - 40px);
	display: flex;
	flex-direction: column;

	//Scroll the content area instead of the entire dialog.
	.ui-dialog-content {
		flex-grow: 1;
		flex-shrink: 1;
		overflow-y: auto;
	}
}

@import 'role-merge-styles';
//endregion