@use "@db-ui/foundations/build/styles/variables";
@use "@db-ui/foundations/build/styles/helpers";
@use "@db-ui/foundations/build/styles/colors";
@use "@db-ui/foundations/build/styles/animation";
@use "../../styles/internal/form-components";
@use "../../styles/internal/component";


.db-accordion-item {
	position: relative;
	inline-size: 100%;
	border-radius: variables.$db-border-radius-sm;
	list-style-type: "";

	> details {
		&[open] {
			summary + div {
				@media screen and (prefers-reduced-motion: no-preference) {
					animation: accordion-open
						#{variables.$db-transition-straight-emotional} normal
						both;
				}
			}

			summary::after {
				transform: form-components.$dropdown-icon-transform;
			}
		}

		&[aria-disabled="true"] {
			pointer-events: none;
			opacity: component.$default-disabled;
		}
	}

	summary + div {
		padding: variables.$db-spacing-fixed-md;
		padding-block-end: variables.$db-spacing-fixed-lg;
	}

	summary {
		@extend %dropdown-icon;
		@extend %db-overwrite-font-size-md;

		background-color: colors.$db-adaptive-bg-basic-level-1-default;
		list-style: none;
		display: flex;
		justify-content: space-between;
		padding: variables.$db-spacing-fixed-md;
		gap: variables.$db-spacing-fixed-md;
		border-radius: variables.$db-border-radius-sm;

		@include helpers.hover {
			background-color: colors.$db-adaptive-bg-basic-level-1-hovered;
		}

		@include helpers.active {
			background-color: colors.$db-adaptive-bg-basic-level-1-pressed;
		}

		&::-webkit-details-marker {
			display: none;
		}

		&::after {
			inset-inline-end: variables.$db-spacing-fixed-sm;
		}

		&:focus-visible {
			border-radius: variables.$db-border-radius-xs;
		}
	}
}