.elementor-widget-n-accordion {
	--n-accordion-title-font-size: 20px;
	--n-accordion-title-flex-grow: initial;
	--n-accordion-title-justify-content: initial;
	--n-accordion-title-icon-order: -1;
	--n-accordion-border-width: 1px;
	--n-accordion-border-color: #{$gray-light};
	--n-accordion-border-style: solid;
	--n-accordion-item-title-flex-grow: initial;
	--n-accordion-item-title-space-between: 0px;
	--n-accordion-item-title-distance-from-content: 0px;
	--n-accordion-padding: 10px;
	--n-accordion-border-radius: 0px;
	--n-accordion-icon-size: 15px;
	--n-accordion-title-normal-color: #{$editor-darker};
	--n-accordion-title-hover-color: #{$editor-darker};
	--n-accordion-title-active-color: #{$editor-darker};
	--n-accordion-icon-normal-color: var(--n-accordion-title-normal-color);
	--n-accordion-icon-hover-color: var(--n-accordion-title-hover-color);
	--n-accordion-icon-active-color: var(--n-accordion-title-active-color);
	--n-accordion-icon-gap: 0 10px;
	width: 100%;

	.e-n-accordion {

		details > summary::-webkit-details-marker {
			display: none;
		}

		&-item {
			display: flex;
			flex-direction: column;
			position: relative;

			&:not(:last-child) {
				margin-block-end: var(--n-accordion-item-title-space-between);
			}

			:where( & > .e-con ) {
				border: var(--n-accordion-border-width) var(--n-accordion-border-style) var(--n-accordion-border-color);
			}

			&-title {
				display: flex;
				flex-direction: row;
				list-style: none;
				padding: var(--n-accordion-padding);
				border-width: var(--n-accordion-border-width);
				border-color: var(--n-accordion-border-color);
				border-style: var(--n-accordion-border-style);
				justify-content: var(--n-accordion-title-justify-content);
				border-radius: var(--n-accordion-border-radius);
				flex-grow: var(--n-menu-title-flex-grow);
				gap: var(--n-accordion-icon-gap);
				color: var(--n-accordion-title-normal-color);
				align-items: center;
				cursor: pointer;

				&-header {
					display: flex;

					h1, h2, h3, h4, h5, h6, p {
						margin-block-start: 0;
						margin-block-end: 0;
					}
				}

				&-text {
					font-size: var(--n-accordion-title-font-size);
					align-items: center;
				}

				&-icon {
					display: flex;
					flex-direction: row;
					align-items: center;
					order: var(--n-accordion-title-icon-order);
					position: relative;
					width: fit-content;

					span {
						height: var(--n-accordion-icon-size);
						width: auto;

						& > i {
							color: var(--n-accordion-icon-normal-color);
							font-size: var(--n-accordion-icon-size);
						}

						& > svg {
							fill: var(--n-accordion-icon-normal-color);
							height: var(--n-accordion-icon-size);
						}
					}
				}

				& > span {
					cursor: pointer;
				}
			}

			&[open] {

				> .e-n-accordion-item-title {
					margin-block-end: var(--n-accordion-item-title-distance-from-content);
					color: var(--n-accordion-title-active-color);

					.e-n-accordion-item-title-icon {

						.e-opened {
							display: flex;
						}

						.e-closed {
							display: none;
						}

						span {

							& > i {
								color: var(--n-accordion-icon-active-color);
							}

							& > svg {
								fill: var(--n-accordion-icon-active-color);
							}
						}
					}
				}
			}

			&:not([open]) {

				&:hover {

					> .e-n-accordion-item-title {
						color: var(--n-accordion-title-hover-color);

						.e-n-accordion-item-title-icon {

							span {

								& > i {
									color: var(--n-accordion-icon-hover-color);
								}

								& > svg {
									fill: var(--n-accordion-icon-hover-color);
								}
							}
						}
					}
				}
			}

			.e-n-accordion-item-title-icon {

				.e-opened {
					display: none;
				}

				.e-closed {
					display: flex;
				}

				span > svg {
					fill: var(--n-accordion-icon-normal-color);
				}

				span > i {
					color: var(--n-accordion-icon-normal-color);
				}
			}

			& > span {
				cursor: pointer;
			}
		}
	}
}
