@import (reference) '../../styles/variables.less';
@import (reference) '../../styles/mixins.less';

@DropMenu-size-optionHeight: 25px;

.@{prefix}-DropMenu {
	&&-base {
		display: inline-block;
	}

	&-Header {
		border-top: solid 1px @featured-color-default-borderColor;
		border-left: solid 1px @featured-color-default-borderColor;
		border-right: solid 1px @featured-color-default-borderColor;
	}

	&-Control {
		position: relative;
		outline: 0;
	}

	&-Option {
		cursor: pointer;
		padding: 0 @size-S;
		line-height: @size-standard;
		font-size: @fontSize;
		height: @DropMenu-size-optionHeight;
		display: flex;
		align-items: center;
		white-space: nowrap;

		&&-is-disabled {
			color: @color-disabledText;
			font-style: italic;
			cursor: not-allowed;
		}

		&&-is-focused {
			background: @color-lightGray;
		}

		&&-is-selected {
			background: @color-primaryLight;
		}

		&&-is-wrapped {
			white-space: normal;
		}
	}

	&-option-container {
		.box-sizing();

		background-color: @color-white;
		border: solid 1px @featured-color-default-borderColor;
		overflow-y: auto;

		// TODO: do we stil need this?
		// @supports (-webkit-appearance:none)
		// 	and (text-align-last:auto) and (not (-ms-accelerator:true)) {
		// 		-webkit-transform:translate3d(0,0,0); /* makes the scrollbar visible */
		// }
	}

	&.@{prefix}-ContextMenu-FlyOut {
		&&-Up {
			border-width: 1px 1px 0;
			border-radius: @size-borderRadius @size-borderRadius 0 0;
			box-shadow: 0 1px 0 @featured-color-default-borderColor;
		}

		&&-Down {
			border-width: 0 1px 1px;
			border-radius: 0 0 @size-borderRadius @size-borderRadius;
			box-shadow: 0 -1px 0 @featured-color-default-borderColor;
		}
	}

	&-OptionGroup-divider {
		border: 1px solid @color-gray;
		border-width: 1px 0 0;
		height: 1px;
	}

	&-label {
		padding: 0 @size-XS;
		font-size: @fontSize;
		font-weight: 500;
		height: @DropMenu-size-optionHeight;
		display: flex;
		align-items: center;
	}
}