@import './base-dropdown'
@import '../../sass/helpers/animations'

.dropdown
	.background
		@include overlay
		position: fixed
		background-color: rgba($black, 0.86)
		z-index: 10
		cursor: pointer
		@include desktop
			display: none
	.dropdown-trigger
		cursor: pointer
	.dropdown-menu
		.dropdown-item
			&.is-disabled
				cursor: not-allowed
				&:hover
					background: inherit
					color: inherit
			&.dropdown-link
				cursor: pointer
				@each $name, $pair in $colors
					$color: nth($pair, 1)
					$color-invert: nth($pair, 2)
					&.has-background-#{$name}
						background-color: $color
						color: $color-invert
	&.is-expanded
		width: 100%
		.dropdown-trigger
			width: 100%

	&:not(.is-disabled)
		.dropdown-menu
			.dropdown-item
				&.is-disabled
					opacity: 0.5
	.navbar-item
		height: 100%
	&.is-disabled
		opacity: 0.5
		cursor: not-allowed
		.dropdown-trigger
			pointer-events: none
	&.is-inline
		.dropdown-menu
			position: static
			display: inline-block
			padding: 0
	&.is-top-right
		.dropdown-menu
			top: auto
			bottom: 100%
			padding-bottom: $dropdown-content-offset
	&.is-top-left
		.dropdown-menu
			top: auto
			bottom: 100%
			right: 0
			left: auto
			padding-bottom: $dropdown-content-offset
	&.is-bottom-left
		.dropdown-menu
			right: 0
			left: auto
	@include touch
		&.is-mobile-modal
			.dropdown-menu
				position: fixed
				width: calc(100vw - 40px)
				max-width: 460px
				max-height: calc(100vh - 120px)
				top: 25% !important
				left: 50% !important
				bottom: auto !important
				right: auto !important
				transform: translate3d(-50%, -25%, 0)
				white-space: normal
				overflow-y: auto
				.dropdown-item
					padding: 1rem 1.5rem
