.pattern-environment-selection {
	display: inline-flex;
	flex-grow: 1;
	justify-content: space-between;;
	align-items: center;
	position: relative;
	height: 60px;
	color: inherit;
	cursor: pointer;
	overflow: hidden;
	padding-left: 0;
	transition: .3s all ease-in-out;
	margin-right: auto;
	&--disabled {
		color: @border-color;
		cursor: not-allowed;
		min-width: 0;
		.pattern-environment-selection__value {
			width: 0;
		}
	}
	& &__label {
		font-weight: bold;
		overflow: hidden;
		width: 0;
		padding: 0;
	}
	& &__arrow {
		padding: 0;
		margin-left: -30px;
	}
	& &__value {
		width: 0;
		overflow: hidden;
	}
	& &__arrow,
	& &__label,
	& &__value {
		position: relative;
		z-index: 1;
		background: @root-background;
		pointer-events: none;
	}
	& &__native {
		z-index: 0;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		appearance: none;
		border: 0;
		background: transparent;
		color: inherit;
		cursor: pointer;
		&:focus {
			outline: none;
		}
	}
	& &__arrow {
		transform: rotate(90deg);
	}
	@media screen and (min-width: 500px) {
		min-width: 200px;
		flex-grow: 0;
		&--disabled {
			.pattern-environment-selection__value {
				width: 0;
			}
		}
		& &__label {
			width: auto;
			padding: 10px 10px 10px 15px;
		}
		& &__value {
			width: auto;
			overflow: hidden;
		}
		& &__arrow {
			margin-left: 0;
		}
		& &__native {
			position: absolute;
		}
		&.pattern-tool {
			padding: 0;
		}
	}
}