.dx-select-group {
	appearance: none;
	position: relative;

	select {
		border: 1px solid var(--theme-core-control-border-color);
		border-radius: 2px;
		background-color: var(--theme-core-control-alt-background-color);
		font-style: normal;
		font-weight: 300;
		font-size: 12px;
		line-height: 14px;
		color: var(--theme-core-control-textbox-text-color);
		padding: 8px 32px 8px 12px;
		width: 100%;
		appearance: none;

		&:focus-visible {
			outline: 2px solid var(--theme-core-control-focus-color);
		}
	}

	&::after {
		position: absolute;
		bottom: 12px;
		right: 12px;
		content: '⌄';
		font-size: 8px;
		font-family: genesys-dev-icons !important;
		font-style: normal;
		font-weight: normal !important;
		font-feature-settings: normal;
		font-variant: normal;
		text-transform: none;
		line-height: 1;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		pointer-events: none;
	}

	&.disabled {
		&::after {
			color: var(--theme-core-control-disabled-text-color);
		}

		select:disabled {
			background-color: var(--theme-core-control-disabled-background-color);
			border-color: var(--theme-core-control-disabled-border-color);
			color: var(--theme-core-control-disabled-text-color);
			cursor: not-allowed;
		}
	}
}