//
// Toggle
//

.elementor-tab-title {
	a {
		color: inherit;
	}
}

.elementor-toggle {
	text-align: start;

	.elementor-tab-title {
		font-weight: bold;
		line-height: 1;
		margin: 0;
		padding: 15px;
		border-block-end: 1px solid $gray-light;
		cursor: pointer;
		outline: none;

		.elementor-toggle-icon {
			display: inline-block;
			width: 1em;

			svg {
				margin-inline-start: -5px; // The position of the SVG icon is different from the <i> tag icon position.
				width: 1em;
				height: 1em;
			}

			&.elementor-toggle-icon- {

				&right {
					float: right;
					text-align: right;
				}

				&left {
					float: left;
					text-align: left;
				}
			}

			.elementor-toggle-icon-closed {
				display: block;
			}
			.elementor-toggle-icon-opened {
				display: none;
			}
		}

		&.elementor-active {
			border-block-end: none;

			.elementor-toggle-icon-closed {
				display: none;
			}
			.elementor-toggle-icon-opened {
				display: block;
			}
		}
	}

	.elementor-tab-content {
	    padding: 15px;
		border-block-end: 1px solid $gray-light;
	    display: none;
	}
}

// Responsive mode
@media (max-width: $screen-mobile-max) {

	.elementor-toggle {

		.elementor-tab-title {
			padding: 12px;
		}

		.elementor-tab-content {
			padding: 12px 10px;
		}
	}
}

.e-con,
.e-con-inner {

	> .elementor-widget-toggle {
		// Fix - Toggle widget disappears because the 'flex column' setting causes an undefined width inside the flex container (ED-7524).
		width: var( --container-widget-width );
		--flex-grow: var( --container-widget-flex-grow );
	}
}
