@import '../../../styles/_partials/index';

.FlyDropdown {
	position: relative;
	display: inline-block;
	@include cursorPointer;

	> svg {
		vertical-align: middle;
	}

	&.FlyDropdown__NavItem {
		border-bottom: 4px solid transparent;
		padding: 6px 4px 11px;

		button {
			@include theme-color-gray-else-gray25
		}

		&.FlyDropdown__NavItemActive {
			@include theme-tab-border-active;
		}

		&:hover,
		&:global(.Popper__Showing),
		&.FlyDropdown__NavItemActive {
			button {
				color: inherit;
			}

			@include theme-color-graydark-else-white;

			svg path {
				@include theme-fill-graydark-else-white;
			}
		}
		&:global(.Popper__Showing) {
			.FlyDropdown_Caret {
				@include __theme-background($gray-dark, $white);
			}
		}
	}

	&:global(.Popper__Showing) {
		.FlyDropdown_Caret {
			height: 2px;
			@include __theme-background($gray, $gray25);
			margin-top: -2px;

			* {
				opacity: 0;
			}
		}
	}
}

.FlyDropdown_Items {
	$border-radius: 4px;

	@include cursorPointer;
	left: auto;
	border-radius: $border-radius;
	padding: 0;
	min-width: 160px;
	height: auto;
	list-style-type: none;
	text-align: center;
	line-height: normal;
	margin: 0;
}

.FlyDropdown_Item {
	display: flex;
	align-items: center;
	transition: all .05s cubic-bezier(.2,.3,.25,.9) 0s;
	padding: 10px 20px;
	height: auto;
	text-align: left;
	text-transform: none;
	@include __theme-color($green-dark, $green);
	font-weight: 400;
	position: relative;
	z-index: 7;

	&:first-child {
		padding-top: 20px;
	}

	&:last-child {
		padding-bottom: 20px;
	}

	&:hover {
		@include __theme-color($green, $green-dark50);
	}

	&:first-of-type {
		border-radius: 4px 4px 0 0;
	}

	&:last-of-type {
		border-radius: 0 0 4px 4px;}

	&:last-of-type:first-of-type {
		border-radius: 4px;
	}

	&.FlyDropdown_Item__ColorRed {
		@include __theme-color($red-dark50, $red);

		&:hover {
			@include __theme-color($red, $red-dark50);
		}
	}

	&.FlyDropdown_Item__ColorNone {
		@include defaultFontAndTextSettings;
	}
}

.FlyDropdown_PopperVisualContainer {
	padding: 0 !important;
}