@use '../variables' as *;

.#{$prefix}accordion {
	position: relative;
	border-radius: var(--#{$prefix}accordion-border-radius);
	z-index: 0;

	&:not(&--splitted) {
		overflow: hidden;
		background-color: var(--#{$prefix}accordion-background);
	}

	&--splitted {
		display: grid;
		gap: var(--#{$prefix}accordion-splitted-gap);
	}

	&--splitted &-item {
		overflow: hidden;
	}

	&-item {
		position: relative;
	}

	&:not(&--splitted) &-item {
		border-bottom: var(--#{$prefix}accordion-item-border);

		&:last-child {
			border-bottom: none;
		}
	}

	&-header {
		position: relative;
		height: var(--#{$prefix}accordion-header-height);
		min-height: var(--#{$prefix}accordion-header-min-height);
		padding-block: var(--#{$prefix}accordion-header-padding-y);
		padding-inline: var(--#{$prefix}accordion-header-padding-x);
		color: var(--#{$prefix}accordion-header-color);
		display: flex;
		align-items: center;
		gap: var(--#{$prefix}accordion-header-gap);

		&--collapsible {
			cursor: pointer;
			user-select: none;
			-webkit-tap-highlight-color: transparent;
		}

		&__start-content,
		&__end-content {
			position: relative;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			gap: var(--#{$prefix}accordion-header-content-gap);
		}

		&__content {
			position: relative;
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			overflow: hidden;
		}

		&--centered &__start-content,
		&--centered &__end-content {
			position: absolute;
		}

		&--centered &__start-content {
			left: var(--#{$prefix}accordion-header-padding-x);
		}

		&--centered &__end-content {
			right: var(--#{$prefix}accordion-header-padding-x);
		}

		&--centered &__content {
			align-items: center;
			text-align: center;
		}

		&__title {
			font-size: var(--#{$prefix}accordion-header-title-font-size);
			font-weight: var(--#{$prefix}accordion-header-title-font-weight);
			line-height: var(--#{$prefix}accordion-header-title-line-height);
			opacity: var(--#{$prefix}accordion-header-title-opacity);
			overflow: hidden;
			color: var(--#{$prefix}accordion-header-title-color);
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			text-overflow: ellipsis;
			word-break: break-word;
		}

		&__subtitle {
			font-size: var(--#{$prefix}accordion-header-subtitle-font-size);
			font-weight: var(--#{$prefix}accordion-header-subtitle-font-weight);
			line-height: var(--#{$prefix}accordion-header-subtitle-line-height);
			opacity: var(--#{$prefix}accordion-header-subtitle-opacity);
			overflow: hidden;
			color: var(--#{$prefix}accordion-header-subtitle-color);
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			text-overflow: ellipsis;
			word-break: break-word;
		}
	}

	&-header:not(&-header--divider) ~ &-body:not([data-hidden='true']),
	&-header:not(&-header--divider) ~ :not([hidden]) &-body:not([data-hidden='true']) {
		padding-top: 0;
	}

	&-header--divider ~ &-body:not([data-hidden='true']),
	&-header--divider ~ :not([hidden]) &-body:not([data-hidden='true']) {
		border-top-width: 1px;
	}

	&-body {
		position: relative;
		border-top-width: var(--#{$prefix}accordion-body-border-top-width, 0px);
		border-top-style: solid;
		border-top-color: var(--#{$prefix}accordion-body-border-color, var(--#{$prefix}accordion-border-color));
		padding-block: var(--#{$prefix}accordion-body-padding-y);
		padding-inline: var(--#{$prefix}accordion-body-padding-x);
		font-size: var(--#{$prefix}accordion-body-font-size);
		line-height: var(--#{$prefix}accordion-body-line-height);
		color: var(--#{$prefix}accordion-body-color);
	}

}