@import '../shared/share-bar.css';
@import '../shared/builder-review-notice-dark.css';

.flow-ew-beaver-toggle[hidden],
.flow-ew-beaver-toggle-proxy[hidden] {
	display: none !important;
}

.flow-ew-beaver-review {
	display: inline-flex;
	align-items: center;
}

.flow-ew-beaver-toggle.flow-ew-beaver-toggle,
.flow-ew-beaver-toggle-proxy.flow-ew-beaver-toggle-proxy {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	line-height: 0;
	text-transform: none;
	fill: #00a0d2 !important;
	font-size: 30px !important;
	padding: 2px 4px !important;
}

.flow-ew-beaver-toggle__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.flow-ew-beaver-toggle__icon svg,
.flow-ew-beaver-toggle svg {
	display: block;
	flex-shrink: 0;
	height: 24px;
	width: 24px;
	margin: 0;
	transform: none !important;
	transition: none !important;
}

.flow-ew-beaver-toggle .flow-ew-jumplink-icon__head,
.flow-ew-beaver-toggle .flow-ew-jumplink-icon__limbs,
.flow-ew-beaver-toggle .flow-ew-jumplink-icon__torso {
	color: currentColor;
	fill: currentColor;
}

.flow-ew-beaver-toggle .flow-ew-jumplink-icon__torso {
	color: #5e777b;
}

.flow-ew-beaver-toggle[data-status='pending'] .flow-ew-jumplink-icon__torso {
	color: #5e777b;
}

.flow-ew-beaver-toggle[data-status='in_review'] .flow-ew-jumplink-icon__torso {
	color: #957500;
}

.flow-ew-beaver-toggle[data-status='approved'] .flow-ew-jumplink-icon__torso {
	color: #458037;
}

.flow-ew-beaver-toggle[data-status='changes_requested'] .flow-ew-jumplink-icon__torso {
	color: #c92122;
}

.flow-ew-beaver-toggle[data-status='open_review'] .flow-ew-jumplink-icon__torso {
	color: #1579a5;
}

.flow-ew-beaver-toggle:hover .flow-ew-jumplink-icon__head,
.flow-ew-beaver-toggle:hover .flow-ew-jumplink-icon__limbs,
.flow-ew-beaver-toggle:hover .flow-ew-jumplink-icon__torso,
.flow-ew-beaver-toggle:focus-visible .flow-ew-jumplink-icon__head,
.flow-ew-beaver-toggle:focus-visible .flow-ew-jumplink-icon__limbs,
.flow-ew-beaver-toggle:focus-visible .flow-ew-jumplink-icon__torso,
.flow-ew-beaver-toggle.is-active .flow-ew-jumplink-icon__head,
.flow-ew-beaver-toggle.is-active .flow-ew-jumplink-icon__limbs,
.flow-ew-beaver-toggle.is-active .flow-ew-jumplink-icon__torso {
	color: #00a0d2;
	fill: #00a0d2;
}

@keyframes flow-ew-beaver-show-panel {
	from {
		transform: scale(0.8);
	}

	to {
		transform: scale(1);
	}
}

.flow-ew-beaver-review-panel {
	box-sizing: border-box;
	position: fixed !important;
	top: var(--fl-builder-top-bar-height, 48px);
	right: 0;
	bottom: 0;
	width: var(--fl-builder-panel-width, 320px);
	max-width: min(var(--fl-builder-panel-width, 320px), 100vw);
	background-color: var(--fl-builder-panel-bg-color, hsl(210, 25%, 99%));
	border-radius: var(--fl-builder-radius, 4px);
	box-shadow: 0 8px 40px 4px rgba(0, 0, 0, 0.3);
	color: var(--fl-builder-dim-color, #676f7a);
	display: none;
	flex-direction: column;
	font-family: var(
		--fl-builder-font-family,
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		Roboto,
		Oxygen-Sans,
		Ubuntu,
		Cantarell,
		'Helvetica Neue',
		sans-serif
	);
	font-size: 14px;
	overflow: hidden;
	transform-origin: top right;
	will-change: transform;
	z-index: 10000007;
}

body.flow-ew-beaver-review-is-showing .flow-ew-beaver-review-panel.is-open {
	animation-duration: 0.15s;
	animation-fill-mode: both;
	animation-name: flow-ew-beaver-show-panel;
	display: flex !important;
}

.flow-ew-beaver-review-panel .fl-builder--panel-arrow {
	left: 20px;
	pointer-events: none;
	position: absolute;
	right: auto;
	top: -10px;
	z-index: 1;
}

.flow-ew-beaver-review-panel .fl-builder--panel-arrow svg {
	display: block;
	height: 10px;
	vertical-align: inherit;
	width: 20px;
}

.flow-ew-beaver-review-panel .fl-builder--panel-arrow polygon {
	fill: var(--fl-builder-panel-bg-color, hsl(210, 25%, 99%));
}

.flow-ew-beaver-drawer__header.fl-builder--panel-header {
	--panel-header-size: 44px;
	align-items: center;
	border-bottom: 1px solid var(--fl-builder-outline-color, hsl(210, 16%, 88%));
	border-top-left-radius: var(--fl-builder-radius, 4px);
	border-top-right-radius: var(--fl-builder-radius, 4px);
	display: flex;
	flex-shrink: 0;
	gap: 10px;
	min-height: var(--panel-header-size);
	padding: 0 12px;
}

.flow-ew-beaver-drawer__title {
	color: var(--fl-builder-heading-color, #161b20);
	flex: 1 1 auto;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	min-width: 0;
}

.flow-ew-beaver-drawer__close {
	align-items: center;
	display: inline-flex;
	flex-shrink: 0;
	justify-content: center;
	margin-left: auto;
	min-height: var(--fl-builder-target-size, 30px);
	padding: 2px 4px !important;
}

.flow-ew-beaver-drawer__close .dashicons {
	font-size: 18px;
	height: 18px;
	width: 18px;
}

.flow-ew-beaver-drawer__body.fl-builder--panel-content {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	padding: 16px;
}

.flow-ew-beaver-drawer__header .flow-ew-drawer-status {
	align-items: center;
	border-radius: 999px;
	display: inline-flex;
	font-size: 11px;
	font-weight: 600;
	gap: 6px;
	letter-spacing: 0.02em;
	line-height: 1;
	padding: 4px 10px;
	text-transform: uppercase;
	white-space: nowrap;
}

.flow-ew-beaver-drawer__header .flow-ew-drawer-status[data-status='pending'] {
	background: #e6f3f5;
	border: 1px solid #cde3e7;
	color: #5e777b;
}

.flow-ew-beaver-drawer__header .flow-ew-drawer-status[data-status='in_review'] {
	background: #fff8e5;
	border: 1px solid #f0d890;
	color: #957500;
}

.flow-ew-beaver-drawer__header .flow-ew-drawer-status[data-status='changes_requested'] {
	background: #fce8e8;
	border: 1px solid #f5c2c2;
	color: #c92122;
}

.flow-ew-beaver-drawer__header .flow-ew-drawer-status[data-status='approved'] {
	background: #ecf7ea;
	border: 1px solid #b8ddb0;
	color: #458037;
}

.flow-ew-beaver-drawer__header .flow-ew-drawer-status[data-status='open_review'] {
	background: #e8f4fa;
	border: 1px solid #b8d9ea;
	color: #1579a5;
}

.flow-ew-beaver-drawer .flow-ew-classic--beaver {
	color: var(--fl-builder-dim-color, #676f7a);
	--flow-ew-beaver-field-border: var(
		--fl-builder-outline-color,
		var(--flow-ew-wp-charcoal-5, #979aa0)
	);
	--flow-ew-beaver-field-bg: var(--fl-builder-input-bg-color, #fff);
}

.flow-ew-beaver-drawer .flow-ew-classic__field {
	margin-bottom: 14px;
}

.flow-ew-beaver-drawer .flow-ew-classic__label,
.flow-ew-beaver-drawer .flow-ew-classic__share-label {
	display: block;
	margin-bottom: 4px;
}

.flow-ew-beaver-drawer .flow-ew-reviewer-combobox {
	position: relative;
	width: 100%;
	z-index: 10;
}

.flow-ew-beaver-drawer #flow-ew-classic.flow-ew-classic--beaver .flow-ew-reviewer-combobox__wrap {
	position: relative;
	width: 100%;
	background: var(--flow-ew-beaver-field-bg);
	border: 1px solid var(--flow-ew-beaver-field-border);
	border-radius: 2px;
	box-sizing: border-box;
	/* Keep overflow visible — the listbox lives inside this wrap and sits
	   below the input via absolute positioning. */
	overflow: visible;
}

.flow-ew-beaver-drawer #flow-ew-classic.flow-ew-classic--beaver .flow-ew-reviewer-combobox__wrap:focus-within {
	border-color: var(--fl-builder-accent-color, #2271b1);
	box-shadow: var(--fl-builder-focus-shadow, 0 0 0 1px #2271b1);
}

.flow-ew-beaver-drawer #flow-ew-classic.flow-ew-classic--beaver .flow-ew-reviewer-combobox__input {
	width: 100%;
	box-sizing: border-box;
	height: var(--flow-ew-share-row-height, 40px);
	min-height: var(--flow-ew-share-row-height, 40px);
	max-height: var(--flow-ew-share-row-height, 40px);
	padding: 0 32px 0 10px;
	border: 0 !important;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--fl-builder-input-color, #1d2327);
	font-size: var(--flow-ew-share-font-size, 13px);
	font-family: inherit;
	outline: none;
}

.flow-ew-beaver-drawer #flow-ew-classic.flow-ew-classic--beaver .flow-ew-reviewer-combobox__input:focus {
	border: 0 !important;
	box-shadow: none !important;
	outline: none;
}

.flow-ew-beaver-drawer #flow-ew-classic.flow-ew-classic--beaver .flow-ew-reviewer-combobox__input::placeholder {
	color: var(--fl-builder-dim-color, #757575);
}

.flow-ew-beaver-drawer #flow-ew-classic.flow-ew-classic--beaver .flow-ew-reviewer-combobox__input:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.flow-ew-beaver-drawer .flow-ew-reviewer-combobox__clear {
	align-items: center;
	background: transparent;
	border: 0;
	color: var(--fl-builder-dim-color, #757575);
	cursor: pointer;
	display: flex;
	height: 24px;
	justify-content: center;
	padding: 0;
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
}

.flow-ew-beaver-drawer .flow-ew-reviewer-combobox__clear:hover,
.flow-ew-beaver-drawer .flow-ew-reviewer-combobox__clear:focus {
	color: var(--fl-builder-input-color, #1d2327);
	outline: none;
}

.flow-ew-beaver-drawer .flow-ew-reviewer-combobox__clear[hidden] {
	display: none;
}

.flow-ew-beaver-drawer .flow-ew-pro-reviewers-list .flow-ew-reviewer-card__remove {
	color: var(--fl-builder-dim-color, #757575);
}

.flow-ew-beaver-drawer .flow-ew-pro-reviewers-list .flow-ew-reviewer-card__remove:hover,
.flow-ew-beaver-drawer .flow-ew-pro-reviewers-list .flow-ew-reviewer-card__remove:focus-visible {
	color: var(--fl-builder-input-color, #1d2327);
	outline: none;
}

.flow-ew-beaver-drawer .flow-ew-reviewer-combobox__list:not([hidden]) {
	display: block !important;
}

.flow-ew-beaver-drawer
	#flow-ew-classic.flow-ew-classic--beaver
	.flow-ew-reviewer-combobox__wrap:focus-within
	.flow-ew-reviewer-combobox__list:not([hidden]) {
	display: block !important;
}

.flow-ew-beaver-drawer .flow-ew-reviewer-combobox__list {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 4px);
	z-index: 1200;
	max-height: 200px;
	overflow-y: auto;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	background: var(--fl-builder-platter-bg-color, #fff);
	border: 1px solid var(--fl-builder-outline-color, var(--flow-ew-wp-charcoal-5, #979aa0));
	border-radius: 2px;
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.flow-ew-beaver-drawer .flow-ew-reviewer-combobox__option {
	padding: 8px 12px;
	cursor: pointer;
	color: var(--fl-builder-input-color, #1d2327);
	font-size: var(--flow-ew-share-font-size, 13px);
}

.flow-ew-beaver-drawer .flow-ew-reviewer-combobox__option:hover,
.flow-ew-beaver-drawer .flow-ew-reviewer-combobox__option:focus {
	background: var(--fl-builder-hover-color, #f6f7f7);
	outline: none;
}

.flow-ew-beaver-drawer .flow-ew-reviewer-combobox__option[aria-selected='true'] {
	background: color-mix(
		in srgb,
		var(--fl-builder-accent-color, #2271b1) 18%,
		transparent
	);
	color: var(--fl-builder-input-color, #1d2327);
}

.flow-ew-beaver-drawer .flow-ew-classic__share {
	margin-top: 12px;
}

.flow-ew-beaver-drawer .flow-ew-classic__share-row {
	--flow-ew-share-action-width: 36px;
	--flow-ew-share-icon-size: 16px;
	align-items: stretch;
	background-color: var(--flow-ew-beaver-field-bg);
	border: 1px solid var(--flow-ew-beaver-field-border);
	border-radius: 2px;
	display: flex;
	height: var(--flow-ew-share-row-height, 40px);
	max-height: var(--flow-ew-share-row-height, 40px);
	min-height: var(--flow-ew-share-row-height, 40px);
	min-width: 0;
	overflow: hidden;
	width: 100%;
}

.flow-ew-beaver-drawer .flow-ew-classic__share-link {
	align-items: center;
	background-color: transparent;
	border-right: none;
	box-sizing: border-box;
	color: var(--fl-builder-accent-color, #2271b1);
	display: flex;
	flex: 1 1 auto;
	font-size: var(--flow-ew-share-font-size, 13px);
	line-height: 1.2;
	min-height: var(--flow-ew-share-row-height, 40px);
	min-width: 0;
	overflow: hidden;
	padding: 0 var(--flow-ew-share-link-padding-x, 10px);
	text-decoration: none;
}

.flow-ew-beaver-drawer .flow-ew-classic__share-link-text {
	color: inherit;
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-decoration: underline;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.flow-ew-beaver-drawer #flow-ew-classic.flow-ew-classic--beaver .flow-ew-classic__share-copy,
.flow-ew-beaver-drawer #flow-ew-classic.flow-ew-classic--beaver .flow-ew-classic__share-copy.button,
.flow-ew-beaver-drawer #flow-ew-classic.flow-ew-classic--beaver .flow-ew-classic__share-copy.button:hover,
.flow-ew-beaver-drawer #flow-ew-classic.flow-ew-classic--beaver .flow-ew-classic__share-copy.button:focus {
	align-items: center;
	align-self: stretch;
	background: transparent !important;
	border: 0 !important;
	border-inline-start: 1px solid var(--flow-ew-beaver-field-border) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	box-sizing: border-box;
	color: var(--fl-builder-input-color, #1d2327) !important;
	cursor: pointer;
	display: inline-flex !important;
	flex: 0 0 auto;
	justify-content: center;
	line-height: 1 !important;
	margin: 0 !important;
	min-height: var(--flow-ew-share-row-height, 40px) !important;
	min-width: var(--flow-ew-share-action-width, 36px);
	padding: 0 !important;
	text-shadow: none !important;
	vertical-align: top;
	width: var(--flow-ew-share-action-width, 36px);
}

.flow-ew-beaver-drawer #flow-ew-classic.flow-ew-classic--beaver .flow-ew-classic__share-copy:hover,
.flow-ew-beaver-drawer #flow-ew-classic.flow-ew-classic--beaver .flow-ew-classic__share-copy.button:hover,
.flow-ew-beaver-drawer #flow-ew-classic.flow-ew-classic--beaver .flow-ew-classic__share-copy.button:focus {
	background: var(--fl-builder-hover-color, #f6f7f7) !important;
	border-inline-start: 1px solid var(--flow-ew-beaver-field-border) !important;
	color: var(--fl-builder-input-color, #1d2327) !important;
}

.flow-ew-beaver-drawer .flow-ew-classic__share-copy .flow-ew-share-icon,
.flow-ew-beaver-drawer .flow-ew-classic__share-copy svg {
	color: inherit;
	flex-shrink: 0;
	height: var(--flow-ew-share-icon-size, 16px) !important;
	width: var(--flow-ew-share-icon-size, 16px) !important;
}

.flow-ew-beaver-drawer .flow-ew-classic__share-copy svg path {
	fill: currentColor;
}

.flow-ew-beaver-drawer .flow-ew-classic__share-copy--done,
.flow-ew-beaver-drawer .flow-ew-classic__share-copy--done svg {
	color: #46b450 !important;
}

.flow-ew-beaver-drawer .flow-ew-classic__share-goto {
	align-items: center;
	align-self: stretch;
	background: var(--flow-ew-wp-nero, #1c2024) !important;
	border-inline-start: 1px solid var(--flow-ew-beaver-field-border);
	box-sizing: border-box;
	color: #fff !important;
	display: inline-flex;
	flex: 0 0 auto;
	height: 100%;
	justify-content: center;
	min-height: var(--flow-ew-share-row-height, 40px);
	min-width: var(--flow-ew-share-action-width, 36px);
	text-decoration: none;
	width: var(--flow-ew-share-action-width, 36px);
}

.flow-ew-beaver-drawer .flow-ew-classic__share-goto:hover,
.flow-ew-beaver-drawer .flow-ew-classic__share-goto:focus {
	background: #000 !important;
	color: #fff !important;
}

.flow-ew-beaver-drawer .flow-ew-classic__share-goto .flow-ew-share-icon,
.flow-ew-beaver-drawer .flow-ew-classic__share-goto svg {
	color: #fff;
	flex-shrink: 0;
	height: var(--flow-ew-share-icon-size, 16px) !important;
	width: var(--flow-ew-share-icon-size, 16px) !important;
}

.flow-ew-beaver-drawer .flow-ew-classic__share-goto svg path {
	fill: #fff;
}

.flow-ew-beaver-drawer .flow-ew-classic__actions {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 8px;
}

/* Server HTML uses WP `.button` classes until classic JS runs renderActions().
   Style every action button here so the drawer never flashes native controls. */
.flow-ew-beaver-drawer .flow-ew-classic__actions .flow-ew-classic__btn {
	-webkit-appearance: none;
	appearance: none;
	align-items: center;
	background: var(--fl-builder-platter-bg-color, #e7ebef);
	border: 2px solid transparent;
	border-radius: 3px;
	box-sizing: border-box;
	color: var(--fl-builder-dim-color, #676f7a);
	cursor: pointer;
	display: flex;
	font-family: var(
		--fl-builder-font-family,
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		Roboto,
		Oxygen-Sans,
		Ubuntu,
		Cantarell,
		'Helvetica Neue',
		sans-serif
	);
	font-size: 14px;
	font-weight: normal;
	height: auto;
	justify-content: center;
	line-height: 1;
	margin: 0;
	min-height: var(--fl-builder-target-size, 30px);
	padding: 0 10px;
	text-align: center;
	width: 100%;
}

.flow-ew-beaver-drawer
	.flow-ew-classic__actions
	.flow-ew-classic__btn.button-primary,
.flow-ew-beaver-drawer
	.flow-ew-classic__actions
	.flow-ew-classic__btn.fl-builder-button-primary {
	background-color: var(--fl-builder-accent-color, #00a0d2);
	border-color: transparent !important;
	color: #fff !important;
}

.flow-ew-beaver-drawer
	.flow-ew-classic__actions
	.flow-ew-classic__btn.button-primary:hover:not(:disabled),
.flow-ew-beaver-drawer
	.flow-ew-classic__actions
	.flow-ew-classic__btn.fl-builder-button-primary:hover:not(:disabled),
.flow-ew-beaver-drawer
	.flow-ew-classic__actions
	.flow-ew-classic__btn.button-primary:focus-visible,
.flow-ew-beaver-drawer
	.flow-ew-classic__actions
	.flow-ew-classic__btn.fl-builder-button-primary:focus-visible {
	background-color: #0197c6;
	color: #fff !important;
}

.flow-ew-beaver-drawer .flow-ew-classic__btn[data-action='send'],
.flow-ew-beaver-drawer .flow-ew-classic__btn[data-action='resubmit'] {
	font-weight: 600;
}

.flow-ew-beaver-drawer .flow-ew-classic__btn--approve {
	background-color: #43a047 !important;
	border-color: transparent !important;
	color: #fff !important;
	font-weight: 600;
}

.flow-ew-beaver-drawer .flow-ew-classic__btn--approve:hover,
.flow-ew-beaver-drawer .flow-ew-classic__btn--approve:focus-visible {
	background-color: #388e3c !important;
	color: #fff !important;
}

.flow-ew-beaver-drawer .flow-ew-classic__btn--changes {
	background: var(--fl-builder-platter-bg-color, #e7ebef) !important;
	border: 2px solid #d63638 !important;
	color: #d63638 !important;
}

.flow-ew-beaver-drawer .flow-ew-classic__btn--changes:hover,
.flow-ew-beaver-drawer .flow-ew-classic__btn--changes:focus-visible {
	background: color-mix(in srgb, #d63638 12%, var(--fl-builder-platter-bg-color, #fce8e8)) !important;
	color: #d63638 !important;
}

.flow-ew-beaver-drawer .flow-ew-classic__btn:disabled,
.flow-ew-beaver-drawer .flow-ew-classic__btn[disabled] {
	opacity: 0.55;
	pointer-events: none;
}

.flow-ew-beaver-drawer .flow-ew-upsell-open-review,
.flow-ew-beaver-drawer .flow-ew-upsell-reviewer {
	font-size: 13px;
	line-height: 1.4;
	margin-top: 8px;
	padding: 0;
}

.flow-ew-beaver-drawer .flow-ew-upsell-open-review a,
.flow-ew-beaver-drawer .flow-ew-upsell-reviewer a {
	background: transparent;
	color: #018170;
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	height: auto;
	line-height: 1.4;
	margin: 0;
	padding: 0;
	text-decoration: underline;
}

.flow-ew-beaver-drawer .flow-ew-upsell-open-review .flow-ew-upsell-badge,
.flow-ew-beaver-drawer .flow-ew-upsell-reviewer .flow-ew-upsell-badge {
	background: #d0f9ec;
	border-radius: 8px;
	color: #09121e;
	display: inline-block;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.4;
	margin-right: 4px;
	padding: 1px 6px;
	text-transform: uppercase;
	vertical-align: 1px;
}

.flow-ew-beaver-drawer .flow-ew-upsell-open-review .flow-ew-upsell-help,
.flow-ew-beaver-drawer .flow-ew-upsell-reviewer .flow-ew-upsell-help {
	color: var(--fl-builder-dim-color, #676f7a);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	margin: 4px 0 0;
	padding: 0;
}

body.fl-builder-ui-skin--dark .flow-ew-beaver-drawer .flow-ew-upsell-open-review .flow-ew-upsell-help,
body.fl-builder-ui-skin--dark .flow-ew-beaver-drawer .flow-ew-upsell-reviewer .flow-ew-upsell-help {
	color: var(--fl-builder-panel-color, #b4b9be);
}

.flow-ew-beaver-publish-blocked .fl-builder-publish-actions [data-action='publish'] {
	cursor: not-allowed !important;
	opacity: 0.4;
	pointer-events: none;
}

/* ---- Beaver UI dark skin (body.fl-builder-ui-skin--dark) ---- */

body.fl-builder-ui-skin--dark .flow-ew-beaver-drawer__header .flow-ew-drawer-status[data-status='pending'] {
	background: #10171a;
	border: 1px solid #5e777b;
	color: #cde3e7;
}

body.fl-builder-ui-skin--dark .flow-ew-beaver-drawer__header .flow-ew-drawer-status[data-status='in_review'] {
	background: #1e140c;
	border: 1px solid #957500;
	color: #fcf0ce;
}

body.fl-builder-ui-skin--dark .flow-ew-beaver-drawer__header .flow-ew-drawer-status[data-status='changes_requested'] {
	background: #1e1214;
	border: 1px solid #c92222;
	color: #ffebea;
}

body.fl-builder-ui-skin--dark .flow-ew-beaver-drawer__header .flow-ew-drawer-status[data-status='approved'] {
	background: #10190e;
	border: 1px solid #458037;
	color: #e7f5e4;
}

body.fl-builder-ui-skin--dark .flow-ew-beaver-drawer__header .flow-ew-drawer-status[data-status='open_review'] {
	background: #0a1822;
	border: 1px solid #1579a5;
	color: #dff4ff;
}

body.fl-builder-ui-skin--dark .flow-ew-beaver-drawer .flow-ew-classic--beaver {
	--flow-ew-beaver-field-border: var(
		--fl-builder-outline-color,
		hsl(210, 11%, 25%)
	);
	--flow-ew-beaver-field-bg: var(--fl-builder-platter-bg-color, #181b20);
}

body.fl-builder-ui-skin--dark .flow-ew-beaver-drawer #flow-ew-classic.flow-ew-classic--beaver .flow-ew-reviewer-combobox__wrap {
	background: var(--flow-ew-beaver-field-bg);
	border-color: var(--flow-ew-beaver-field-border);
}

body.fl-builder-ui-skin--dark .flow-ew-beaver-drawer #flow-ew-classic.flow-ew-classic--beaver .flow-ew-reviewer-combobox__input {
	color: var(--fl-builder-panel-color, #fff);
}

body.fl-builder-ui-skin--dark .flow-ew-beaver-drawer .flow-ew-classic__share-row {
	background-color: var(--flow-ew-beaver-field-bg);
	border-color: var(--flow-ew-beaver-field-border);
}

body.fl-builder-ui-skin--dark .flow-ew-beaver-drawer .flow-ew-classic__share-link {
	color: var(--fl-builder-accent-color, #00a0d2);
	border-right: none;
}

body.fl-builder-ui-skin--dark .flow-ew-beaver-drawer .flow-ew-classic__share-link:hover {
	background: var(--fl-builder-hover-color, rgba(255, 255, 255, 0.05));
	color: var(--fl-builder-accent-color, #00a0d2);
}

body.fl-builder-ui-skin--dark .flow-ew-beaver-drawer .flow-ew-classic__share-copy,
body.fl-builder-ui-skin--dark .flow-ew-beaver-drawer .flow-ew-classic__share-copy.button,
body.fl-builder-ui-skin--dark .flow-ew-beaver-drawer .flow-ew-classic__share-copy.button:hover,
body.fl-builder-ui-skin--dark .flow-ew-beaver-drawer .flow-ew-classic__share-copy.button:focus {
	background: transparent !important;
	border: 0 !important;
	border-inline-start: 1px solid var(--flow-ew-beaver-field-border) !important;
	box-shadow: none !important;
	color: var(--fl-builder-panel-color, #fff) !important;
}

body.fl-builder-ui-skin--dark .flow-ew-beaver-drawer .flow-ew-classic__share-copy:hover,
body.fl-builder-ui-skin--dark .flow-ew-beaver-drawer .flow-ew-classic__share-copy.button:hover,
body.fl-builder-ui-skin--dark .flow-ew-beaver-drawer .flow-ew-classic__share-copy.button:focus {
	background: var(--fl-builder-hover-color, rgba(255, 255, 255, 0.06)) !important;
	border-inline-start: 1px solid var(--flow-ew-beaver-field-border) !important;
	color: #fff !important;
}

body.fl-builder-ui-skin--dark .flow-ew-beaver-drawer .flow-ew-classic__share-copy .flow-ew-share-icon,
body.fl-builder-ui-skin--dark .flow-ew-beaver-drawer .flow-ew-classic__share-copy svg,
body.fl-builder-ui-skin--dark .flow-ew-beaver-drawer .flow-ew-classic__share-copy svg path {
	color: #fff !important;
	fill: currentColor;
}

body.fl-builder-ui-skin--dark .flow-ew-beaver-drawer .flow-ew-classic__share-copy--done,
body.fl-builder-ui-skin--dark .flow-ew-beaver-drawer .flow-ew-classic__share-copy--done svg {
	color: #39b54a !important;
}

body.fl-builder-ui-skin--dark .flow-ew-beaver-drawer .flow-ew-classic__share-goto {
	background: var(--fl-builder-heading-bg-color, #101216) !important;
	border-inline-start: 1px solid var(--flow-ew-beaver-field-border);
	color: #fff !important;
}

body.fl-builder-ui-skin--dark .flow-ew-beaver-drawer .flow-ew-classic__share-goto:hover,
body.fl-builder-ui-skin--dark .flow-ew-beaver-drawer .flow-ew-classic__share-goto:focus {
	background: #000 !important;
	color: #fff !important;
}

body.fl-builder-ui-skin--dark .flow-ew-beaver-drawer .flow-ew-reviewer-combobox__list {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

@media (max-width: 500px) {
	.flow-ew-beaver-review-panel {
		border-radius: 0 !important;
		bottom: 0 !important;
		box-shadow: none !important;
		left: 0 !important;
		right: 0 !important;
		top: var(--fl-builder-top-bar-height, 48px) !important;
		width: auto !important;
	}

	.flow-ew-beaver-review-panel .fl-builder--panel-arrow {
		display: none;
	}
}