// SCSS Variables - users can override these in their projects
$dropdown-component-focus-bg: green !default;
$dropdown-trigger-display: inline-flex !default;
$dropdown-trigger-align-items: center !default;
$dropdown-trigger-cursor: pointer !default;
$dropdown-panel-bg: #ffffff !default;
$dropdown-panel-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !default;
$dropdown-panel-border-radius: 4px !default;
$dropdown-panel-padding: 0.5rem 0 !default;
$dropdown-panel-margin-top: -5px !default;
$dropdown-menu-margin-top: 0px !default;
$dropdown-panel-min-width: 180px !default;
$dropdown-panel-z-index: 20 !default;
$transition-duration: 200ms !default;
$transition-timing: ease-out !default;

// CSS variables mapping to SCSS variables
:root {
	--dp-panel-bg-color: #{$dropdown-panel-bg};
	--dp-panel-shadow: #{$dropdown-panel-shadow};
	--dp-panel-border-radius: #{$dropdown-panel-border-radius};
	--dp-panel-padding: #{$dropdown-panel-padding};
	--dp-panel-margin-top: #{$dropdown-panel-margin-top};
	--dp-menu-margin-top: #{$dropdown-menu-margin-top};
	--dp-transition-duration: #{$transition-duration};
	--dp-transition-timing: #{$transition-timing};
	--dp-panel-z-index: #{$dropdown-panel-z-index};
}

dropdown-component {
	display: inline-block;
	&:focus {
		background: $dropdown-component-focus-bg;
	}
}

// hover help that helps bridge the dropdown-component
// with the dropdown panel / menu
dropdown-component:hover dropdown-trigger::before,
dropdown-trigger[aria-expanded='true']::before {
	content: '';
	background: transparent;
	position: absolute;
	left: -10px;
	top: 50%;
	width: calc(100% + 20px);
	height: 30px;
	transform-origin: top center;
	transform: perspective(50px) rotateX(50deg);
	z-index: 10;
	// background: orange;
}

dropdown-trigger {
	display: #{$dropdown-trigger-display};
	align-items: #{$dropdown-trigger-align-items};
	cursor: #{$dropdown-trigger-cursor};
	user-select: none;
	position: relative;
}

// Common styles for dropdown-panel and dropdown-menu
dropdown-panel,
dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0px;
	z-index: var(--dp-panel-z-index, #{$dropdown-panel-z-index});
	background-color: var(--dp-panel-bg-color, #{$dropdown-panel-bg});
	box-shadow: var(--dp-panel-shadow, #{$dropdown-panel-shadow});

	padding: var(--dp-panel-padding, #{$dropdown-panel-padding});

	opacity: 0;
	pointer-events: none;
	overflow: hidden;
	transition: opacity
		var(--dp-transition-duration, #{$transition-duration})
		var(--dp-transition-timing, #{$transition-timing});
}

// Specific styles for dropdown-panel
dropdown-panel {
	min-width: #{$dropdown-panel-min-width};
	filter: blur(4px);
	transform: translateY(5px) scale(0.98);
	border-radius: var(
		--dp-panel-border-radius,
		#{$dropdown-panel-border-radius}
	);
	margin-top: var(
		--dp-panel-margin-top,
		#{$dropdown-panel-margin-top}
	);
	will-change: opacity, transform, filter;
	transition:
		opacity var(--dp-transition-duration, #{$transition-duration})
			var(--dp-transition-timing, #{$transition-timing}),
		transform var(--dp-transition-duration, #{$transition-duration})
			var(--dp-transition-timing, #{$transition-timing});
}

// Specific styles for dropdown-menu
dropdown-menu {
	width: 100%;
	margin-top: var(--dp-menu-margin-top, #{$dropdown-menu-margin-top});
}

// Visible state styles for dropdown-panel
dropdown-component:hover dropdown-panel,
dropdown-panel[aria-hidden='false'] {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
	filter: blur(0px);
	visibility: visible;
}

// Visible state styles for dropdown-menu
dropdown-component:hover dropdown-menu,
dropdown-menu[aria-hidden='false'] {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
}