//
// Section - Preview Settings
//

// Section & Container - Overlay Settings
.elementor-editor-section-settings,
.elementor-editor-container-settings {
	height: 24px;
	top: 1px;
	left: 50%;
	transform: translateX( -50% ) translateY( -100% );
	background-color: var(--e-p-border-section);
	border-start-start-radius: 5px;
	border-start-end-radius: 5px;
	border-end-start-radius: 0;
	border-end-end-radius: 0;

	i.eicon-handle {
		font-size: 16px;
	}

	.elementor-editor-element-setting {

		&:hover {
			background-color: var(--e-p-border-section-hover);
		}

		&:first-child {
			border-start-start-radius: 5px;
			border-start-end-radius: 0;
			border-end-start-radius: 0;
			border-end-end-radius: 0;

			&:before {
				content: '';
				position: absolute;
				top: 2px;
				@include end(calc(100% - 1px));
				border-block-start: 22px solid transparent;
				border-block-end: 0 none transparent;
				border-inline-start: 0 none transparent;
				border-inline-end: 12px solid var(--e-p-border-section);
				transition: var(--e-a-transition-hover);
			}

			&:hover {

				&:before {
					border-inline-end-color: var(--e-p-border-section-hover);
				}
			}
		}

		&:last-child {
			border-start-start-radius: 0;
			border-start-end-radius: 5px;
			border-end-start-radius: 0;
			border-end-end-radius: 0;

			&:after {
				content: '';
				position: absolute;
				top: 2px;
				@include start(calc(100% - 1px));
				border-block-start: 22px solid transparent;
				border-block-end: 0 none transparent;
				border-inline-start: 12px solid var(--e-p-border-section);
				border-inline-end: 0 none transparent;
				transition: var(--e-a-transition-hover);
			}

			&:hover {

				&:after {
					border-inline-start-color: var(--e-p-border-section-hover);
				}
			}
		}
	}
}

// Top Section / Container (Handles inside)
.e-handles-inside,
.elementor-section--handles-inside {

	> .elementor-element-overlay > .elementor-editor-element-settings {
		transform: translateX(-50%);
		border-start-start-radius: 0;
		border-start-end-radius: 0;
		border-end-start-radius: 5px;
		border-end-end-radius: 5px;

		.elementor-editor-element-setting {
			&:first-child {
				border-start-start-radius: 0;
				border-start-end-radius: 0;
				border-end-start-radius: 5px;
				border-end-end-radius: 0;

				&:before {
					top: 0;
					border-block-start: 0 none transparent;
					border-block-end: 22px solid transparent;
					border-inline-start: 0 none transparent;
					border-inline-end: 12px solid var(--e-p-border-section);
					transition: var(--e-a-transition-hover);
				}
			}

			&:last-child {
				border-start-start-radius: 0;
				border-start-end-radius: 0;
				border-end-start-radius: 0;
				border-end-end-radius: 5px;

				&:after {
					top: 0;
					border-block-start: 0 none transparent;
					border-block-end: 22px solid transparent;
					border-inline-start: 12px solid var(--e-p-border-section);
					border-inline-end: 0 none transparent;
					transition: var(--e-a-transition-hover);
				}
			}
		}
	}
}
