@import 'ansyn/less/colors';
@import 'ansyn/less/common';

:host {
	&.combo-center .combo-container .options-container /deep/ .option {
		justify-content: center;
		text-align: center;
	}

	position: relative;
	display: block;
	height: 100%;
	width: 100%;

	.combo-container {
		height: 100%;
		width: 100%;
		position: relative;

		button {
			margin: 0;
			padding: 0;
			border: none;
			color: white;
			background: #4c4c4c;
			box-sizing: border-box;
			outline: none;
			width: 34px;
			height: 34px;
			border-radius: 5px;
			cursor: pointer;

			&.mode-on {
				border: 1px solid @application-contrast-color;
			}

			&:hover:not(:disabled), &.active {
				border: 1px solid @application-primary-color;
				border-radius: 1px;
			}

			/deep/ i.icon {
				vertical-align: middle;
				font-size: 0;
			}
		}

		.options-container {
			width: auto;
			min-width: 100%;
			background: @background-color-0;
			z-index: 1;

			&.show {
				visibility: visible;
			}

			&:focus {
				visibility: visible;
				outline: none;
			}

			visibility: hidden;
			position: absolute;
			top: 100%;
			box-sizing: border-box;
		}

		&.transparent {
			@transparent-color: rgba(255, 255, 255, 0.4);

			/deep/ button[ansynComboBoxTrigger] {
				background: transparent;
				border: none;
				border-bottom: 1px solid @transparent-color;
				padding: 6px;
			}

			.options-container {
				box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2);
				border-color: @transparent-color;

				/deep/ .option {
					font-weight: 500;

					&:hover {
						color: @application-primary-color;
					}
				}
			}

			&.top {
				/deep/ button[ansynComboBoxTrigger] {
					border-bottom: 1px solid @transparent-color;
					border-top: none;
					min-width: 100px;
				}
			}
		}

		&.bottom {
			.options-container {
				border-top: none;
			}
		}

		&.top {
			.options-container {
				bottom: initial;
				top: 100%;
				border-bottom: none;
			}
		}
	}
}

/deep/ div.option {
	display: flex;
	align-items: center;
}
