
	.selecter, .input-group .form-control.selecter {
		position: relative;

		display: block;
		margin: 0;
		z-index: 1;

		&:focus {
			box-shadow: none;
			outline: none;
		}

		&,
		& * {
			user-select: none !important;
		}

		&,
		& *,
		& *:before,
		& *:after {
			box-sizing: border-box;
		}

		//& when (@selecter-max-width = true) {
		//	max-width: 30%;
		//}

		// .selecter-element

		&-element {
			width: 100%;
			height: 100%;

			position: absolute;
			left: 0;

			opacity: 0;
			z-index: -1;

			&,
			&:focus {
				outline: none;
				-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
				-webkit-tap-highlight-color: transparent;
			}

			// IE8 - opacity check

			.no-opacity & {
				left: -999999px;
			}
		}


		// .selecter-selected

		&-selected {
			position: relative;

			background: @selecter-background-color;
			border: @selecter-border-width solid @selecter-border-color;
			color: @selecter-text-color;
			cursor: pointer;
			display: block;
			font-size: @selecter-font-size;
			margin: 0;
			overflow: hidden;
			padding: @selecter-padding;
			text-overflow: clip;
			z-index: 2;

			& when not (@selecter-border-radius-outside = 0) {
				border-radius: @selecter-border-radius-outside;
			}

			&:after {
				height: 0;
				width: 0;

				position: absolute;
				top: 0;
				right: 15px;
				bottom: 0;

				border-left: @selecter-caret-size solid transparent;
				border-right: @selecter-caret-size solid transparent;
				border-top: @selecter-caret-size solid @selecter-caret-color;
				content: '';
				display: block;
				margin: auto 0;
			}
		}

		.no-touch &-selected:hover {
			color: @selecter-hover-text-color;
		}

		.no-touch &.disabled &-selected:hover {
			color: @selecter-disabled-text-color;
		}


		// .selecter-options

		&-options {
			width: 100%;
			max-height: @selecter-max-height;

			position: absolute;
			top: 100%;
			left: 0;

			border: @selecter-border-width solid @selecter-border-color;
			border-width: 0 @selecter-border-width @selecter-border-width;
			background-color: @selecter-options-background-color;
			display: none;
			margin: 0;
			overflow: auto;
			overflow-x: hidden;
			padding: 0;
			z-index: 50;

			& when not (@selecter-border-radius-outside = 0) {
				border-radius: 0 0 @selecter-border-radius-outside @selecter-border-radius-outside;
			}

			& when not (@selecter-options-box-shadow = none) {
				box-shadow: @selecter-options-box-shadow;
			}

			// Scroller support

			&.scroller {
				position: absolute;
			}

			// - IE8 - opacity check

			.no-opacity & {
				width: auto;
			}
		}


		// .selecter-group

		&-group {
			border-bottom: @selecter-border-width solid @selecter-group-border-color;
			color: @selecter-group-text-color;
			display: block;
			font-size: @selecter-group-font-size;
			padding: @selecter-group-padding;
			text-transform: @selecter-group-text-transform;
		}


		// .selecter-item

		&-item {
			width: 100%;

			background: @selecter-item-background-color;
			border-bottom: @selecter-item-border-width solid @selecter-item-border-color;
			color: @selecter-item-text-color;
			cursor: pointer;
			display: block;
			font-size: @selecter-item-font-size;
			margin: 0;
			overflow: hidden;
			padding: @selecter-item-padding;
			text-decoration: none;
			text-overflow: ellipsis;

			&.placeholder {
				display: none;
			}

			&.selected {
				background: @selecter-item-selected-color;
			}

			&.disabled {
				color: @selecter-item-disabled-text-color;
				cursor: default;
			}

			& when not (@selecter-border-radius-inside = 0) {
				&:first-child {
					border-radius: 0;
				}
			}

			&:last-child {
				border-bottom: 0;

				& when not (@selecter-border-radius-inside = 0) {
					border-radius: 0 0 @selecter-border-radius-inside @selecter-border-radius-inside;
				}
			}

			.no-touch &:hover,
			.no-touch &.selected:hover {
				color: @selecter-item-hover-text-color;
				background-color: @selecter-item-hover-background-color;
			}

			&.disabled,
			.no-touch &.disabled:hover {
				color: @selecter-disabled-text-color;
				background-color: @selecter-disabled-background-color;
			}
		}


		// .selecter.open

		&.open {
			z-index: 3;

			.selecter-selected {
				z-index: 51;

				& when not (@selecter-border-radius-outside = 0) {
					border-radius: @selecter-border-radius-outside @selecter-border-radius-outside 0 0;
				}
			}
		}

		&.open &-selected,
		&.focus &-selected {
			background-color: @selecter-open-background-color;

			& when not (@selecter-selected-box-shadow = none) {
				box-shadow: @selecter-selected-box-shadow;
			}
		}


		// .selecter.cover .selecter-options

		&.cover {

			.selecter-options {
				border-width: @selecter-border-width;
				top: 0;

				& when not (@selecter-border-radius-outside = 0) {
					border-radius: @selecter-border-radius-outside;

					.selecter-item.first {
						border-radius: @selecter-border-radius-outside @selecter-border-radius-outside 0 0;
					}
				}
			}

			&.open .selecter-selected {
				z-index: 49;

				& when not (@selecter-border-radius-outside = 0) {
					border-radius: @selecter-border-radius-outside @selecter-border-radius-outside 0 0;
				}
			}
		}


		// .selecter.bottom

		&.bottom {

			.selecter-options {
				top: auto;
				bottom: 100%;

				border-width: @selecter-border-width @selecter-border-width 0;
			}

			.selecter-item:last-child {
				border: none;
			}

			& when not (@selecter-border-radius-outside = 0) {

				// .selecter.bottom.open

				&.open {

					.selecter-selected {
						border-radius: 0 0 @selecter-border-radius-outside @selecter-border-radius-outside;
					}

					.selecter-options {
						border-radius: @selecter-border-radius-outside @selecter-border-radius-outside 0 0;
					}
				}
			}


			// .selecter.bottom.cover

			.cover {

				.selecter-options {
					top: auto;
					bottom: 0;
				}

				& when not (@selecter-border-radius-outside = 0) {

					// .selecter.bottom.cover.open

					&.open {

						.selecter-selected {
							border-radius: @selecter-border-radius-outside;
						}

						.selecter-options {
							border-radius: @selecter-border-radius-outside;
						}
					}
				}
			}
		}


		// .selecter-multiple .selecter-options

		&.multiple &-options {
			width: 100%;

			position: static;

			border-width: @selecter-border-width;
			display: block;

			& when not (@selecter-border-radius-outside = 0) {
				border-radius: @selecter-border-radius-outside;
			}

			& when not (@selecter-options-box-shadow = none) {
				box-shadow: none;
			}
		}


		// .selecter.disabled

		&.disabled {

			.selecter-selected {
				background: @selecter-disabled-background-color;
				border-color: @selecter-disabled-border-color;
				color: @selecter-disabled-text-color;
				cursor: default;
			}

			.selecter-options {
				background: @selecter-disabled-background-color;
				border-color: @selecter-disabled-border-color;
			}

			.selecter-group,
			.selecter-item {
				border-color: @selecter-disabled-border-color;
				color: @selecter-disabled-text-color;
				cursor: default;
			}

			.selecter-item.selected,
			.no-touch & .selecter-item.selected:hover {
				background: @selecter-disabled-selected-background-color;
			}

			& .selecter-item,
			.no-touch & .selecter-item:hover {
				color: @selecter-disabled-text-color;
				background-color: @selecter-disabled-background-color;
			}
		}


		// .selecter-options.scroller

		&-options.scroller {
			overflow: hidden;

			.scroller-content {
				max-height: @selecter-max-height;

				padding: 0;
			}
		}

		// Media queries

		& when (@selecter-max-width = true) {

			@media screen and (max-width: 740px) {
				max-width: 40%;
			}

			@media screen and (max-width: 500px) {
				max-width: 100%;
			}

			@media screen and (min-width: 980px) {
				.selecter-item:hover,
				.selecter-item.selected:hover {
					background-color: #f3f3f3;
				}

				.selecter-item.disabled:hover {
					background-color: #fff;
				}

				:hover .selecter-selected {
					background-color: #fff;
				}

				.disabled .selecter-item:hover {
					background: #fff;
				}
			}
		}
	}
