.fui-select
	position: relative

	&:before
		@extend .fuicon-menu:before

		position: absolute
		z-index: 1
		top: 22px
		right: 19px
		display: block
		color: $widgetFontColor
		text-shadow: light

		pointer-events: none // Clicks pass through to select

	select
		// IE 8: Top and bottom padding of 10px is required to align the text vertically
		padding: 10px 28px 10px 8px

		cursor: pointer

		&:focus
			margin-left: $widgetMargin - 1
			margin-right: $widgetMargin - 1

	&.fui-primary
		&, &:active
			background: transparent

		select
			background: $widgetBackgroundPrimary

// Hide the icon in IE, it has the menu button already
// Observed: IE 8, IE 9, IE 10, Win FF 3.6
.fui-ie
	.fui-select
		select
			padding-right: 8px

		&:before
			display: none;

// Fix vertical shift of select menu on focus in IE
// Observed: IE 8, IE 9
.fui-lt-ie10
	.fui-select
		select:focus
			padding-top: 9px
			padding-bottom: 9px

.fui-select
	display: inline-block
	position: relative

	&:before
		@extend .fuicon-menu:before

		position: absolute
		z-index: 1
		top: 22px
		right: 16px
		display: block
		color: $widgetFontColor
		text-shadow: light

		pointer-events: none // Clicks pass through to select

	select
		// IE 8: Top and bottom padding of 10px is required to align the text vertically
		padding: 10px 28px 10px 8px

		cursor: pointer

		&:focus
			margin-left: $widgetMargin - 1
			margin-right: $widgetMargin - 1

	&.fui-primary
		&, &:active
			background: transparent

		select
			background: $widgetBackgroundPrimary

// Hide the icon in IE, it has the menu button already
// Observed: IE 8, IE 9, IE 10, IE 11, FF 3.6, FF 23
.fui-ie
	.fui-select
		select
			padding-right: 8px

		&:before
			display: none;

// Fix vertical shift of select menu on focus in IE
// Observed: IE 8, IE 9
.fui-lt-ie10
	.fui-select
		select:focus
			padding-top: 9px
			padding-bottom: 9px

Fix alignment of select menu
Fix alignment of select menu
