/*----------------------------------------------------------------------------
*
*  Container sizes
*
*----------------------------------------------------------------------------*/
.post-type-acf-field-group .metabox-holder.columns-1 {
	#acf-field-group-fields,
	#acf-field-group-options,
	.meta-box-sortables.ui-sortable,
	.notice {
		max-width: $max-width;
	}
}

/*----------------------------------------------------------------------------
*
*  Max width for notices in 1 column edit field group layout
*
*----------------------------------------------------------------------------*/
.post-type-acf-field-group.columns-1 {
	.notice {
		max-width: $max-width;
	}
}

/*----------------------------------------------------------------------------
*
*  Widen edit field group headerbar for 2 column layout
*
*----------------------------------------------------------------------------*/
.post-type-acf-field-group.columns-2 {
	.acf-headerbar .acf-headerbar-inner {
		max-width: 100%;
	}
}

/*----------------------------------------------------------------------------
*
*  Post stuff
*
*----------------------------------------------------------------------------*/
.post-type-acf-field-group {
	#poststuff {
		margin: {
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}
		padding: {
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}
	}
}

/*----------------------------------------------------------------------------
*
*  Table
*
*----------------------------------------------------------------------------*/
.post-type-acf-field-group {
	#acf-field-group-fields .acf-field-list-wrap {
		overflow: hidden;
		border: none;
		border-radius: 0 0 $radius-lg $radius-lg;
		box-shadow: $elevation-01;

		&.-empty {
			border-top: {
				width: 1px;
				style: solid;
				color: $gray-200;
			}

			.acf-thead,
			.acf-tfoot {
				display: none;
			}

			.no-fields-message {
				min-height: 280px;
			}
		}
	}
}

/*----------------------------------------------------------------------------
*
*  Table header
*
*----------------------------------------------------------------------------*/
.post-type-acf-field-group {
	.acf-thead {
		background-color: $gray-50;
		border-top: {
			width: 1px;
			style: solid;
			color: $gray-200;
		}
		border-bottom: {
			width: 1px;
			style: solid;
			color: $gray-200;
		}

		li {
			display: flex;
			align-items: center;
			min-height: 48px;
			padding: {
				top: 0;
				bottom: 0;
			}
			@extend .p4;
			color: $gray-700;
			font-weight: 500;
		}
	}
}

/*----------------------------------------------------------------------------
*
*  Table body
*
*----------------------------------------------------------------------------*/
.post-type-acf-field-group {
	.acf-field-object {
		border-top: {
			width: 1px;
			style: solid;
			color: $gray-200;
		}

		&:hover {
			.acf-sortable-handle:before {
				display: inline-flex;
			}
		}

		// Add divider to show which fields have endpoint
		&.acf-field-is-endpoint {
			&:before {
				display: block;
				content: "";
				height: 2px;
				width: 100%;
				background: $gray-300;
				margin-top: -1px;
			}

			&.acf-field-object-accordion {
				&:before {
					display: none;
				}

				&:after {
					display: block;
					content: "";
					height: 2px;
					width: 100%;
					background: $gray-300;
					z-index: 500;
				}
			}
		}

		&:hover {
			background-color: lighten($blue-50, 3%);
		}

		&.open {
			background-color: #fff;
			border-top-color: $blue-200;
		}

		&.open .handle {
			background-color: $blue-100;
			border: none;
			text-shadow: none;

			a {
				color: $link-color !important;

				&.delete-field {
					color: #a00 !important;
				}
			}
		}

		.acf-field-setting-type .acf-hl {
			margin: 0;

			li {
				width: auto;

				&:first-child {
					flex-grow: 1;
					margin-left: -10px;
				}

				&:nth-child(2) {
					padding-right: 0;
				}
			}
		}

		ul.acf-hl {
			display: flex;
			align-items: stretch;
		}

		.handle li {
			display: flex;
			align-items: top;
			flex-wrap: wrap;
			min-height: 60px;
			@extend .p4;
			color: $gray-700;

			&.li-field-label {
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				align-content: flex-start;
				align-items: flex-start;
				width: auto;

				a.edit-field {
					@extend .p4;
				}

				strong {
					font-weight: 500;
				}

				.row-options {
					width: 100%;
				}

				.row-options a {
					@extend .p6;
				}
			}
		}
	}
}

/*----------------------------------------------------------------------------
*
*  Table footer
*
*----------------------------------------------------------------------------*/
.post-type-acf-field-group {
	.acf-tfoot {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		min-height: 80px;
		box-sizing: border-box;
		padding: {
			top: 8px;
			right: 24px;
			bottom: 8px;
			left: 24px;
		}
		background-color: #fff;
		border-top: {
			width: 1px;
			style: solid;
			color: $gray-200;
		}

		.acf-fr {
			margin: {
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
			}
			padding: {
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
			}
		}
	}
}

/*----------------------------------------------------------------------------
*
*  Edit field settings
*
*----------------------------------------------------------------------------*/
.post-type-acf-field-group .acf-field-object .settings {
	box-sizing: border-box;
	padding: {
		top: 0;
		bottom: 0;
	}
	background-color: #fff;
	border-left: {
		width: 4px;
		style: solid;
		color: $blue-300;
	}
}

/*----------------------------------------------------------------------------
*
*  Main field settings container
*
*----------------------------------------------------------------------------*/
.acf-field-settings-main {
	padding: {
		top: 32px;
		right: 0;
		bottom: 32px;
		left: 0;
	}

	.acf-field:last-of-type,
	.acf-field.acf-last-visible {
		margin: {
			bottom: 0;
		}
	}
}

/*----------------------------------------------------------------------------
*
*  Field label
*
*----------------------------------------------------------------------------*/
.acf-field-settings .acf-label {
	display: block;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	margin: {
		top: 0;
		right: 0;
		bottom: 6px;
		left: 0;
	}
}

/*----------------------------------------------------------------------------
*
*  Single field
*
*----------------------------------------------------------------------------*/
.acf-field-settings .acf-field {
	box-sizing: border-box;
	width: 100%;
	margin: {
		top: 0;
		right: 0;
		bottom: 32px;
		left: 0;
	}
	padding: {
		top: 0;
		right: 72px;
		bottom: 0;
		left: 72px;
	}

	@media screen and (max-width: 600px) {
		padding: {
			right: 12px;
			left: 12px;
		}
	}

	.acf-label,
	.acf-input {
		max-width: 600px;

		&.acf-input-sub {
			max-width: 100%;
		}

		.acf-btn {
			&:disabled {
				background-color: $gray-100;
				color: $gray-400 !important;
				border: 1px $gray-300 solid;
				cursor: default;
			}
		}
	}

	.acf-input-wrap {
		overflow: visible;
	}
}

/*----------------------------------------------------------------------------
*
*  Field separators
*
*----------------------------------------------------------------------------*/

.acf-field-settings .acf-field.acf-field-setting-label,
.acf-field-settings .acf-field-setting-wrapper {
	padding: {
		top: 24px;
	}
	border-top: {
		width: 1px;
		style: solid;
		color: $gray-200;
	}
}

.acf-field-settings .acf-field-setting-wrapper {
	margin: {
		top: 24px;
	}
}

/*----------------------------------------------------------------------------
*
*  Informational Notes for specific fields
*
*----------------------------------------------------------------------------*/
.acf-field-setting-bidirectional_notes {
	.acf-label {
		display: none;
	}

	.acf-feature-notice {
		background-color: $gray-50;
		border: 1px solid $gray-200;
		border-radius: 6px;
		padding: 16px;
		color: $gray-700;
		position: relative;

		&.with-warning-icon {
			padding-left: 45px;
			&::before {
				content: "";
				$icon-size: 18px;
				display: block;
				position: absolute;
				top: 17px;
				left: 18px;
				z-index: 600;
				width: $icon-size;
				height: $icon-size;
				margin: {
					right: 8px;
				}
				background-color: $gray-500;
				border: none;
				border-radius: 0;
				-webkit-mask-size: contain;
				mask-size: contain;
				-webkit-mask-repeat: no-repeat;
				mask-repeat: no-repeat;
				-webkit-mask-position: center;
				mask-position: center;
				-webkit-mask-image: url("../../images/icons/icon-info.svg");
				mask-image: url("../../images/icons/icon-info.svg");
			}
		}
	}
}

/*----------------------------------------------------------------------------
*
*  Edit fields footer
*
*----------------------------------------------------------------------------*/
.acf-field-settings .acf-field-settings-footer {
	display: flex;
	align-items: center;
	min-height: 72px;
	box-sizing: border-box;
	width: 100%;
	margin: {
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	padding: {
		top: 0;
		right: 0;
		bottom: 0;
		left: 72px;
	}
	border-top: {
		width: 1px;
		style: solid;
		color: $gray-200;
	}

	@media screen and (max-width: 600px) {
		padding: {
			left: 12px;
		}
	}
}

.rtl .acf-field-settings .acf-field-settings-footer {
	padding: {
		top: 0;
		right: 72px;
		bottom: 0;
		left: 0;
	}
}

/*----------------------------------------------------------------------------
*
*  Tabs
*
*----------------------------------------------------------------------------*/
.acf-fields,
.acf-admin-page.acf-internal-post-type,
.acf-browse-fields-modal-wrap {
	.acf-tab-wrap {
		background: $gray-50;
		border-bottom: {
			color: $gray-800;
		}

		.acf-tab-group {
			padding: {
				right: 24px;
				left: 24px;
			}
			border-top: {
				width: 0;
			}
			border-bottom: {
				width: 1px;
				style: solid;
				color: $gray-200;
			}
		}
	}

	.acf-field-settings-tab-bar,
	.acf-tab-wrap .acf-tab-group {
		display: flex;
		align-items: stretch;
		min-height: 48px;
		padding: {
			top: 0;
			right: 0;
			bottom: 0;
			left: 24px;
		}
		margin: {
			top: 0;
			bottom: 0;
		}
		border-bottom: {
			width: 1px;
			style: solid;
			color: $gray-200;
		}
		li {
			display: flex;
			margin: {
				top: 0;
				right: 24px;
				bottom: 0;
				left: 0;
			}
			padding: 0;

			a {
				&:focus-visible {
					border: 1px solid #5897fb;
				}

				box-sizing: border-box;
				display: inline-flex;
				align-items: center;
				height: 100%;
				padding: {
					top: 3px;
					right: 0;
					bottom: 0;
					left: 0;
				}
				background: none;
				border-top: none;
				border-right: none;
				border-bottom: {
					width: 3px;
					style: solid;
					color: transparent;
				}
				border-left: none;
				color: $gray-500;
				@extend .p5;
				font-weight: normal;

				&:hover {
					color: $gray-800;
				}

				&:hover {
					background-color: transparent;
				}
			}

			&.active a {
				background: none;
				border-bottom: {
					color: $color-primary;
				}
				color: $blue-500;

				&:focus-visible {
					border-bottom: {
						color: $color-primary;
						width: 3px;
					}
				}
			}
		}
	}
}

.acf-admin-page.acf-internal-post-type
	.acf-field-editor
	.acf-field-settings-tab-bar {
	padding: {
		left: 72px;
	}

	@media screen and (max-width: 600px) {
		padding: {
			left: 12px;
		}
	}
}

/*----------------------------------------------------------------------------
*
*  Field group settings
*
*----------------------------------------------------------------------------*/
#acf-field-group-options {
	.field-group-settings-tab {
		padding: {
			top: 24px;
			right: 24px;
			bottom: 24px;
			left: 24px;
		}

		.acf-field:last-of-type {
			padding: 0;
		}
	}

	.acf-field {
		border: none;
		margin: {
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}
		padding: {
			top: 0;
			right: 0;
			bottom: 24px;
			left: 0;
		}
	}

	// Split layout
	.field-group-setting-split-container {
		display: flex;
		padding: {
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}

		.field-group-setting-split {
			box-sizing: border-box;
			padding: {
				top: 24px;
				right: 24px;
				bottom: 24px;
				left: 24px;
			}
		}

		.field-group-setting-split:nth-child(1) {
			flex: 1 0 auto;
		}

		.field-group-setting-split:nth-child(2n) {
			flex: 1 0 auto;
			max-width: 320px;
			margin: {
				top: 0;
				right: 0;
				bottom: 0;
				left: 32px;
			}
			padding: {
				right: 32px;
				left: 32px;
			}
			border-left: {
				width: 1px;
				style: solid;
				color: $gray-200;
			}
		}
	}

	// Description field
	.acf-field[data-name="description"] {
		max-width: 600px;
	}

	// Button group
	.acf-button-group {
		display: inline-flex;
	}
}

.rtl #acf-field-group-options {
	.field-group-setting-split-container {
		.field-group-setting-split:nth-child(2n) {
			margin: {
				right: 32px;
				left: 0;
			}
			border-left: none;
			border-right: {
				width: 1px;
				style: solid;
				color: $gray-200;
			}
		}
	}
}

/*----------------------------------------------------------------------------
*
*  Reorder handles
*
*----------------------------------------------------------------------------*/
.acf-field-list {
	.li-field-order {
		padding: 0;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-content: stretch;
		align-items: stretch;
		background-color: transparent;
	}

	.acf-sortable-handle {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-content: flex-start;
		align-items: flex-start;
		width: 100%;
		height: 100%;
		position: relative;
		padding: {
			top: 11px;
			bottom: 8px;
		}
		@extend .p4;
		background-color: transparent;
		border: none;
		border-radius: 0;

		&:hover {
			cursor: grab;
		}

		&:before {
			content: "";
			display: none;
			position: absolute;
			top: 16px;
			left: 8px;
			width: 16px;
			height: 16px;
			$icon-size: 12px;
			width: $icon-size;
			height: $icon-size;
			background-color: $gray-400;
			border: none;
			border-radius: 0;
			-webkit-mask-size: contain;
			mask-size: contain;
			-webkit-mask-repeat: no-repeat;
			mask-repeat: no-repeat;
			-webkit-mask-position: center;
			mask-position: center;
			text-indent: 500%;
			white-space: nowrap;
			overflow: hidden;
			-webkit-mask-image: url("../../images/icons/icon-draggable.svg");
			mask-image: url("../../images/icons/icon-draggable.svg");
		}
	}
}

.rtl .acf-field-list {
	.acf-sortable-handle {
		&:before {
			left: 0;
			right: 8px;
		}
	}
}

/*----------------------------------------------------------------------------
*
*  Expand / collapse field icon
*
*----------------------------------------------------------------------------*/
.acf-field-object {
	.li-field-label {
		position: relative;
		padding: {
			left: 40px;
		}

		&:before {
			content: "";
			display: block;
			position: absolute;
			left: 6px;
			$icon-size: 18px;
			display: inline-flex;
			width: $icon-size;
			height: $icon-size;
			margin: {
				top: -2px;
			}
			background-color: $gray-500;
			border: none;
			border-radius: 0;
			-webkit-mask-size: contain;
			mask-size: contain;
			-webkit-mask-repeat: no-repeat;
			mask-repeat: no-repeat;
			-webkit-mask-position: center;
			mask-position: center;
			text-indent: 500%;
			white-space: nowrap;
			overflow: hidden;
			-webkit-mask-image: url("../../images/icons/icon-chevron-down.svg");
			mask-image: url("../../images/icons/icon-chevron-down.svg");
		}

		&:hover:before {
			cursor: pointer;
		}
	}
}

.rtl {
	.acf-field-object {
		.li-field-label {
			padding: {
				left: 0;
				right: 40px;
			}

			&:before {
				left: 0;
				right: 6px;
				-webkit-mask-image: url("../../images/icons/icon-chevron-down.svg");
				mask-image: url("../../images/icons/icon-chevron-down.svg");
			}
		}

		// Open
		&.open {
			.li-field-label:before {
				-webkit-mask-image: url("../../images/icons/icon-chevron-down.svg");
				mask-image: url("../../images/icons/icon-chevron-down.svg");
			}

			.acf-input-sub .li-field-label:before {
				-webkit-mask-image: url("../../images/icons/icon-chevron-right.svg");
				mask-image: url("../../images/icons/icon-chevron-right.svg");
			}

			.acf-input-sub .acf-field-object.open .li-field-label:before {
				-webkit-mask-image: url("../../images/icons/icon-chevron-down.svg");
				mask-image: url("../../images/icons/icon-chevron-down.svg");
			}
		}
	}
}

.acf-thead {
	.li-field-label {
		padding: {
			left: 40px;
		}
	}
	.rtl & {
		.li-field-label {
			padding: {
				left: 0;
				right: 40px;
			}
		}
	}
}

/*----------------------------------------------------------------------------
*
*  Conditional logic layout
*
*----------------------------------------------------------------------------*/
.acf-field-settings-main-conditional-logic {

	.acf-conditional-toggle {
		display: flex;
		padding: {
			right: 72px;
			left: 72px;
		}

		@media screen and (max-width: 600px) {
			padding: {
				left: 12px;
			}
		}
	}

	.acf-field {
		flex-wrap: wrap;
		margin: {
			bottom: 0;
		}
		padding: {
			right: 0;
			left: 0;
		}

		.rule-groups {
			flex: 0 1 100%;
			order: 3;
			margin: {
				top: 32px;
			}
			padding: {
				top: 32px;
				right: 72px;
				left: 72px;
			}
			border-top: {
				width: 1px;
				style: solid;
				color: $gray-200;
			}

			@media screen and (max-width: 600px) {
				padding: {
					left: 12px;
				}

				table.acf-table tbody tr {
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-start;
					align-content: flex-start;
					align-items: flex-start;

					td {
						flex: 1 1 100%;
					}
				}
			}
		}
	}
}

.acf-taxonomy-select-id,
.acf-relationship-select-id,
.acf-post_object-select-id,
.acf-page_link-select-id,
.acf-user-select-id {
	color: $gray-400;
	padding-left: 10px;
}

.acf-taxonomy-select-sub-item {
	max-width: 180px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-left: 5px;
}

.acf-taxonomy-select-name {
	max-width: 180px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*----------------------------------------------------------------------------
*
*  Prefix & append styling
*
*----------------------------------------------------------------------------*/
.acf-input {
	.acf-input-prepend,
	.acf-input-append {
		display: inline-flex;
		align-items: center;
		height: 100%;
		min-height: 40px;
		padding: {
			right: 12px;
			left: 12px;
		}
		background-color: $gray-50;
		border-color: $gray-300;
		box-shadow: $elevation-01;
		color: $gray-500;
	}

	.acf-input-prepend {
		border-radius: $radius-md 0 0 $radius-md;
	}

	.acf-input-append {
		border-radius: 0 $radius-md $radius-md 0;
	}
}

/*----------------------------------------------------------------------------
*
*  ACF input wrap
*
*----------------------------------------------------------------------------*/
.acf-input-wrap {
	display: flex;
}

.acf-field-settings-main-presentation .acf-input-wrap {
	display: flex;
}

/*----------------------------------------------------------------------------
*
*  Empty state
*
*----------------------------------------------------------------------------*/
.post-type-acf-field-group
	#acf-field-group-fields
	.acf-field-list.-empty
	.no-fields-message {
	display: flex;
	justify-content: center;
	padding: {
		top: 48px;
		bottom: 48px;
	}

	.no-fields-message-inner {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-content: center;
		align-items: flex-start;
		text-align: center;
		max-width: 400px;

		img,
		h2,
		p {
			flex: 1 0 100%;
		}

		h2 {
			@extend .acf-h2;
			margin: {
				top: 32px;
				bottom: 0;
			}
			padding: 0;
			color: $gray-700;
		}

		p {
			@extend .p2;
			margin: {
				top: 12px;
				bottom: 0;
			}
			padding: 0;
			color: $gray-500;

			&.acf-small {
				@extend .p6;
				margin: {
					top: 32px;
				}
			}
		}

		img {
			max-width: 284px;
			margin: {
				bottom: 0;
			}
		}

		.acf-btn {
			margin: {
				top: 32px;
			}
		}
	}
}

/*----------------------------------------------------------------------------
*
*  Hide add title prompt label
*
*----------------------------------------------------------------------------*/
.post-type-acf-field-group {
	.acf-headerbar {
		#title-prompt-text {
			display: none;
		}
	}
}

/*----------------------------------------------------------------------------
*
*  Modal styling
*
*----------------------------------------------------------------------------*/
.acf-admin-page {
	#acf-popup .acf-popup-box {
		min-width: 480px;

		.title {
			display: flex;
			align-items: center;
			align-content: center;
			justify-content: space-between;
			min-height: 64px;
			box-sizing: border-box;
			margin: 0;
			padding: {
				right: 24px;
				left: 24px;
			}
			border-bottom: {
				width: 1px;
				style: solid;
				color: $gray-200;
			}

			h1,
			h2,
			h3,
			h4 {
				@extend .acf-h3;
				padding: {
					left: 0;
				}
				color: $gray-700;
			}

			.acf-icon {
				display: block;
				position: relative;
				top: auto;
				right: auto;
				width: 22px;
				height: 22px;
				background-color: transparent;
				color: transparent;

				&:before {
					$icon-size: 22px;
					display: inline-flex;
					position: absolute;
					top: 0;
					left: 0;
					width: $icon-size;
					height: $icon-size;
					background-color: $gray-500;
					border: none;
					border-radius: 0;
					-webkit-mask-size: contain;
					mask-size: contain;
					-webkit-mask-repeat: no-repeat;
					mask-repeat: no-repeat;
					-webkit-mask-position: center;
					mask-position: center;
					text-indent: 500%;
					white-space: nowrap;
					overflow: hidden;
					-webkit-mask-image: url("../../images/icons/icon-close-circle.svg");
					mask-image: url("../../images/icons/icon-close-circle.svg");
				}

				&:hover:before {
					background-color: $color-primary;
				}
			}
		}

		.inner {
			box-sizing: border-box;
			margin: 0;
			padding: {
				top: 24px;
				right: 24px;
				bottom: 24px;
				left: 24px;
			}
			border-top: none;

			p {
				margin: {
					top: 0;
					bottom: 0;
				}
			}
		}

		// Custom styling for move custom field modal/link field groups modal.
		#acf-move-field-form,
		#acf-link-field-groups-form {
			.acf-field-select {
				margin: {
					top: 0;
				}
			}
		}
	}

	// Custom styling for the link field groups/create options page modal.
	.acf-link-field-groups-popup .acf-popup-box,
	.acf-create-options-page-popup .acf-popup-box {
		.title h3 {
			color: $gray-800;
			font-weight: 500;

			&:before {
				content: "";
				width: 18px;
				height: 18px;
				background: $gray-400;
				margin-right: 9px;
			}
		}

		.inner {
			padding: 0 !important;

			.acf-field-select,
			.acf-link-successful {
				padding: 32px 24px;
				margin-bottom: 0;

				.description {
					margin-top: 6px !important;
				}
			}

			.acf-actions {
				background: $gray-50;
				border-top: 1px solid $gray-200;
				padding: {
					top: 20px;
					left: 24px;
					bottom: 20px;
					right: 24px;
				}
				border-bottom-left-radius: 8px;
				border-bottom-right-radius: 8px;

				.acf-btn {
					display: inline-block;
					margin-left: 8px;

					&.acf-btn-primary {
						width: 120px;
					}
				}
			}
		}
	}

	.acf-create-options-page-popup .acf-popup-box {
		.inner {
			.acf-error-message.-success {
				display: none;
			}

			.-dismiss {
				margin: 24px 32px !important;
			}

			.acf-field {
				padding: 24px 32px 0 32px;
				margin: 0;

				&.acf-error {
					.acf-input-wrap {
						overflow: inherit;

						input[type="text"] {
							border: 1px rgba($color-danger, 0.5) solid !important;
							box-shadow:
								0px 0px 0px 3px rgba(209, 55, 55, 0.12),
								0px 0px 0px rgba(255, 54, 54, 0.25) !important;
							background-image: url(../../images/icons/icon-info-red.svg);
							background-position: right 10px top 50%;
							background-size: 14px;
							background-repeat: no-repeat;
						}
					}
				}

				.acf-options-page-modal-error p {
					font-size: 12px;
					color: $color-danger;
				}
			}

			.acf-actions {
				margin-top: 32px;

				.acf-btn:disabled {
					background-color: $blue-500;
				}
			}
		}
	}
}

/*----------------------------------------------------------------------------
*
*  Hide original #post-body-content from edit field group page
*
*----------------------------------------------------------------------------*/
.acf-admin-single-field-group {
	#post-body-content {
		display: none;
	}
}

/*----------------------------------------------------------------------------
*
*  Settings section footer
*
*----------------------------------------------------------------------------*/
.acf-field-group-settings-footer {
	display: flex;
	justify-content: space-between;
	align-content: stretch;
	align-items: center;
	position: relative;
	min-height: 88px;
	margin: {
		right: -24px;
		left: -24px;
		bottom: -24px;
	}
	padding: {
		right: 24px;
		left: 24px;
	}
	border-top: {
		width: 1px;
		style: solid;
		color: $gray-200;
	}

	.acf-created-on {
		display: inline-flex;
		justify-content: flex-start;
		align-content: stretch;
		align-items: center;
		@extend .p5;
		color: $gray-500;

		&:before {
			content: "";
			$icon-size: 20px;
			display: inline-block;
			width: $icon-size;
			height: $icon-size;
			margin: {
				right: 8px;
			}
			background-color: $gray-400;
			border: none;
			border-radius: 0;
			-webkit-mask-size: contain;
			mask-size: contain;
			-webkit-mask-repeat: no-repeat;
			mask-repeat: no-repeat;
			-webkit-mask-position: center;
			mask-position: center;
			-webkit-mask-image: url("../../images/icons/icon-time.svg");
			mask-image: url("../../images/icons/icon-time.svg");
		}
	}
}

/*----------------------------------------------------------------------------
*
*  Conditional logic enabled badge
*
*----------------------------------------------------------------------------*/
.conditional-logic-badge {
	display: none;

	&.is-enabled {
		display: inline-block;
		width: 6px;
		height: 6px;
		overflow: hidden;
		margin: {
			left: 8px;
		}
		background-color: rgba($color-success, 0.4);
		border: {
			width: 1px;
			style: solid;
			color: $color-success;
		}
		border-radius: 100px;
		text-indent: 100%;
		white-space: nowrap;
	}
}

/*----------------------------------------------------------------------------
*
*  Field settings container
*
*----------------------------------------------------------------------------*/
.acf-field-type-settings {
	container-name: settings;
	container-type: inline-size;
}

/*----------------------------------------------------------------------------
*
*  Split field settings
*
*----------------------------------------------------------------------------*/
.acf-field-settings-split {
	display: flex;
	border-top: {
		width: 1px;
		style: solid;
		color: $gray-200;
	}
	.acf-field {
		margin: 0;
		padding: {
			top: 32px;
			bottom: 32px;
		}

		&:nth-child(2n) {
			border-left: {
				width: 1px;
				style: solid;
				color: $gray-200;
			}
		}
	}
}

@container settings (max-width: 1170px) {
	.acf-field-settings-split {
		border: none;
		flex-direction: column;
	}
	.acf-field {
		border-top-width: 1px;
		border-top-style: solid;
		border-top-color: $gray-200;
	}
}

/*----------------------------------------------------------------------------
*
*  Display & return format
*
*----------------------------------------------------------------------------*/
.acf-field-setting-display_format,
.acf-field-setting-return_format {
	.acf-label {
		margin: {
			bottom: 6px;
		}
	}

	.acf-radio-list {
		li {
			display: flex;

			label {
				display: inline-flex;
				width: 100%;

				span {
					flex: 1 1 auto;
				}

				code {
					padding: {
						right: 8px;
						left: 8px;
					}
					background-color: $gray-100;
					border-radius: 4px;
					@extend .p5;
					color: $gray-600;
				}
			}

			input[type="text"] {
				height: 32px;
			}
		}
	}
}

.acf-field-settings .acf-field-setting-first_day {
	padding: {
		top: 32px;
	}
	border-top: {
		width: 1px;
		style: solid;
		color: $gray-200;
	}
}

/*----------------------------------------------------------------------------
*
*  Image and Gallery fields
*
*----------------------------------------------------------------------------*/
.acf-field-object-image,
.acf-field-object-gallery {
	.acf-hl[data-cols="3"] > li {
		width: auto;
	}
}

/*----------------------------------------------------------------------------
*
* Appended fields fields
*
*----------------------------------------------------------------------------*/
.acf-field-settings .acf-field-appended {
	overflow: auto;

	.acf-input {
		float: left;
	}
}

/*----------------------------------------------------------------------------
*
*  Flexible widths for image minimum / maximum size fields
*
*----------------------------------------------------------------------------*/
.acf-field-settings .acf-field.acf-field-setting-min_width,
.acf-field-settings .acf-field.acf-field-setting-max_width {
	.acf-input {
		max-width: none;
	}

	.acf-input-wrap input[type="text"] {
		max-width: 81px;
	}
}

/*----------------------------------------------------------------------------
*
*  Temporary fix to hide pagination setting for repeaters used as subfields.
*
*----------------------------------------------------------------------------*/
.post-type-acf-field-group {
	.acf-field-object-flexible-content {
		.acf-field-setting-pagination {
			display: none;
		}
	}

	.acf-field-object-repeater {
		.acf-field-object-repeater {
			.acf-field-setting-pagination {
				display: none;
			}
		}
	}
}

/*----------------------------------------------------------------------------
*
*  Flexible content field width
*
*----------------------------------------------------------------------------*/

.acf-admin-single-field-group
	.acf-field-object-flexible-content
	.acf-is-subfields
	.acf-field-object {
	.acf-label,
	.acf-input {
		max-width: 600px;
	}
}

/*----------------------------------------------------------------------------
*
*  Fix default value checkbox focus state
*
*----------------------------------------------------------------------------*/

.acf-admin-single-field-group {
	.acf-field.acf-field-true-false.acf-field-setting-default_value
		.acf-true-false {
		border: none;

		input[type="checkbox"] {
			margin-right: 0;
		}
	}
}

/*----------------------------------------------------------------------------
*
*  With front field extra spacing
*
*----------------------------------------------------------------------------*/
.acf-field.acf-field-with-front {
	margin: {
		top: 32px;
	}
}