.z-select,
z-select {
	display: inline-grid;

	&:focus {
		outline: none;
	}

	ul > li.default-option {
		font-style: italic;
	}

	.focusable {
		position: relative;
		width: 100%;
		height: 24px;
		padding: 3px 16px 3px 4px;
		overflow: hidden;
		font-size: $font-form-size;
		line-height: initial;
		vertical-align: baseline;
		text-align: left;
		text-overflow: ellipsis;
		word-break: break-all;
		white-space: pre;
		cursor: default;
		border-radius: 0;

		@extend %form-input-style;
		@extend %webkit-scrollbar;

		&::after {
			@extend %icons-font;
			position: absolute;
			top: 50%;
			right: 4px;
			font-size: $icon-smaller-size;
			content: $zi-chevron-down;
			transform: translateY(-50%);
		}

		&:active,
		&:hover,
		&:focus {
			color: $font-color;
			background-color: $form-bg-color;
			border-color: $form-border-color;
			box-shadow: none;
		}

		&.red {
			color: $red;

			&::after {
				color: $font-color;
			}
		}
	}

	.list {
		display: none;
		z-index: 20000;
		max-height: 362px;
		max-width: 453px;
		box-sizing: border-box;
		overflow-x: hidden;
		overflow-y: auto;
		border: 1px solid;
		box-shadow: 0 6px 10px 0 $action-shadow-color;

		@extend %form-input-style;
		@extend %webkit-scrollbar;

		li {
			display: block;
			height: inherit;
			box-sizing: border-box;
			min-height: 24px;
			max-width: 453px;
			padding: 5px;
			line-height: normal;
			color: $font-color;
			text-overflow: ellipsis;
			word-break: break-word;
			user-select: none;
			white-space: nowrap;
			overflow: hidden;

			&.hover {
				background-color: $action-hover-color;
			}

			&.red {
				color: $red;
			}

			&[disabled] {
				color: $form-disabled-font-color;
			}

			&[optgroup] {
				&::before {
					content: attr(optgroup);
					display: block;
					font-weight: bold;
				}
			}
		}

		> li {
			> ul {
				display: grid;
				grid-template-columns: minmax(max-content, 1fr);
				margin: 5px -5px -5px;

				li {
					padding-right: 15px;
					padding-left: 15px;
				}
			}
		}

		&.fall-upwards {
			box-shadow: 0 -6px 10px 0 $action-shadow-color;
		}
	}

	&.is-expanded {
		> ul {
			display: block;
			position: fixed;
		}
	}

	&[disabled] {
		.focusable {
			@extend %form-disabled;

			pointer-events: none;
		}
	}

	&[readonly] {
		.focusable {
			@extend %form-readonly;
		}
	}
}
