@use "~admin-stylesheets/colors";

.nelio-content-status-editor {
	width: 40em;

	&__color-pickers {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	&__back-button {
		margin-left: 0.5em;
	}

	&__tab-panel {
		flex-grow: 1;
		overflow-y: auto;

		.components-tab-panel__tabs {
			background: colors.$layout-colors__background--is-emphasized;
			border-bottom: 1px solid colors.$layout-colors__border--is-subtle;
			border-top: 0;
			display: flex;
			margin-top: 0;
			padding-left: 0;
			top: 0;
		}

		.components-tab-panel__tab-content {
			padding: 1em;
		}
	}

	&__tab {
		border-radius: 0;
		flex-grow: 1;
		justify-content: center;
		padding: 1em 0;

		&--is-active {
			box-shadow: inset 0 -3px colors.$wordpress-colors__tab-shadow--is-active !important;
			transition: box-shadow 100ms linear;
		}
	}

	&__role {

		&--is-disabled {
			opacity: 0.5;
		}
	}

	&__footer {
		align-items: center;
		display: flex;
		gap: 1em;
		justify-content: space-between;
		margin-top: 1em;
	}

	&__actions {
		display: flex;
		gap: 0.5em;
	}

	.nelio-content-stylized-select-control > div {
		min-height: 3em;
	}
}