/* Patterns - Content - Accordion */
/* Since this pattern is Deprecated, it should not appear at SASSDCS! */

[data-block*='AccordionItem'] {
	&:first-of-type .section-expandable {
		border-radius: var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-none)
			var(--border-radius-none);
	}

	&:last-of-type .section-expandable {
		border-bottom-width: var(--border-size-s);
		border-radius: var(--border-radius-none) var(--border-radius-none) var(--border-radius-soft)
			var(--border-radius-soft);
	}

	&:only-of-type .section-expandable {
		border-radius: var(--border-radius-soft);
	}
}

.section-expandable {
	background-color: var(--color-neutral-0);
	border: var(--border-size-s) solid var(--color-neutral-4);
	border-bottom-width: var(--border-size-none);

	&.is- {
		&-open {
			border-top: var(--border-size-m) solid var(--color-primary);

			> .section-expandable-title {
				font-weight: var(--font-semi-bold);
			}

			& > .section-expandable-title > .section-expandable-icon {
				transform: rotate(180deg);
			}
		}

		&-disabled {
			color: var(--color-neutral-7);
			pointer-events: none;

			// Service Studio Preview
			& {
				-servicestudio-color: var(--color-neutral-9);
				-servicestudio-pointer-events: auto;
			}

			.section-expandable-icon {
				color: var(--color-neutral-6);
			}
		}
	}

	.section-expandable {
		&-title {
			align-items: flex-start;
			cursor: pointer;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			font-size: var(--font-size-h6);
			line-height: 1;
			padding: var(--space-m);
			width: 100%;
		}

		&-icon {
			color: var(--color-primary);
			font-family: FontAwesome;
			font-size: 24px;
			font-weight: 400;
			transition: all 300ms ease-in-out;

			&:after {
				content: '\f107';
			}
		}

		&-content {
			display: block;
			overflow: hidden;

			&,
			&.is- {
				&-collapsed {
					height: 0;
					padding: var(--space-none) var(--space-m);
					visibility: hidden;

					// Service Studio Preview
					& {
						-servicestudio-height: auto;
						-servicestudio-padding: var(--space-none) var(--space-m) var(--space-m);
					}
				}

				&-expanded {
					height: auto;
					padding: var(--space-none) var(--space-m) var(--space-m);
					visibility: visible;
				}

				&-animating {
					transition: all 300ms ease-in-out;
				}
			}

			&.no-padding {
				padding: var(--space-none);
			}

			/* Add a margin-top when animated label is the first child */
			& [data-block*='AnimatedLabel']:first-child .animated-label {
				margin-top: var(--space-s);
			}
		}
	}

	/* Rare case of using new accordion inside old one*/
	.osui-accordion {
		margin-top: 2px;
	}

	// New Dropdown Search an Tags when inside AccordionItem
	// Virtual Select dropdown content
	.pop-comp-wrapper {
		position: relative;
		// The !important is need to overwrite an inline style
		transform: translate3d(0px, var(--space-xs), 0px) !important;
	}
}

// Responsive -------------------------------------------------------------------------
.tablet {
	.section-expandable .section-expandable-title {
		font-size: calc(var(--font-size-h6) - 1px);
	}
}

.phone {
	.section-expandable {
		.section-expandable-title {
			font-size: calc(var(--font-size-h6) - 2px);
		}

		.choices__list.choices__list--dropdown,
		& [data-dropdown] > div.dropdown-list {
			position: initial;
		}
	}
}

.layout-native {
	.section-expandable {
		.section-expandable-title {
			padding: var(--space-base);
		}

		.section-expandable-content {
			padding: var(--space-none) var(--space-base);

			&.is- {
				&-collapsed {
					padding: var(--space-none) var(--space-base);
				}

				&-expanded {
					padding: var(--space-none) var(--space-base) var(--space-base);
				}
			}

			&.no-padding {
				padding: var(--space-none);
			}
		}
	}
}

// Accessibility -------------------------------------------------------------------------
.has-accessible-features {
	.section-expandable {
		.section-expandable-title:focus,
		.section-expandable-content:focus {
			box-shadow: none;
			outline: 3px solid var(--color-focus-outer);
		}
	}
}