@import './_partials/index';

:global {
	.FlySelect,
	select {
		display: inline-block;
		height: 30px;
		@include theme-input-background-color;
		@include theme-input-border;
		@include theme-color-graydark-else-white;
		font-weight: 300;
		-webkit-appearance: none;
		padding: 0 35px 0 10px;
		cursor: pointer;
		position: relative;
		max-width: 100%;
		@include cursorPointer;

		&[disabled] {
			-webkit-filter: grayscale(100%);
			pointer-events: none;

			* {
				pointer-events: none;
			}
		}

		&:not(.FlySelect__Open) {
			&.FlySelect__Focus,
			&:focus {
				outline: none;
				box-shadow: 0 0 0 2px $green;
			}
		}

		&.FlySelect__Open {
			z-index: 5;

			.FlySelect_Options {
				display: block;
			}
		}

		svg {
			width: 12px;
			height: 12px;
			margin: -1px 0 0 auto;
			align-self: center;

			&.DownloadSmall {
				margin: 0 7px 0 0;
			}

			path {
				@include __theme-fill($green-dark, $green);
			}
		}

		.FlySelect_Options {
			position: fixed;
			top: 0;
			left: 0;
			display: none;
			width: auto;
			@include theme-input-background-color;
			@include theme-input-border-box-shadow;
		}

		.CurrentValue * {
			max-width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.CurrentValue_Placeholder {
			color: $gray75;
		}

		.FlySelect_Option,
		.CurrentValue {
			display: flex;
			cursor: pointer;
			align-items: center;
			line-height: 30px;

			.FlySelect__Right {
				margin: 0 0 0 auto;

				.FlySelect__Check {
					margin-left: 10px;
				}
			}

			.FlySelect__SecondaryText {
				margin-left: auto;
				color: $gray75;
				font-weight: 300;
			}

			svg.FlySelect__ItemIcon,
			img {
				margin: 0 10px 0 0;
				width: auto;
				flex-shrink: 0;
			}

			img {
				height: 22px;
				border-radius: 1px;
				@include if-theme-dark() {
					filter: brightness(0.44);
				}
			}

			svg.FlySelect__ItemIcon {
				height: 27px;
			}
		}

		[class^="Avatar"] {
			margin-right: 10px;

			img {
				height: inherit;
				margin: 0;
			}
		}

		.FlySelect_OptionGroup {
			height: 37px;
			line-height: 37px;
			text-align: left;
			@include theme-color-gray-else-gray25;
			@include theme-background-gray15-else-graydark50;
			@include tracking(5);
			font-weight: 700;
			padding: 0 20px;
			display: flex;

			a {
				margin-left: auto;
				@include theme-color-gray-else-gray25;
				display: flex;
				align-items: center;

				svg {
					width: 6px;
					height: 14px;
					margin: -1px 0 0 10px;

					path {
						fill: $gray75;
					}
				}

				&:hover {
					@include theme-color-gray-else-white;

					svg path {
						@include theme-fill-gray-else-white;
					}
				}
			}
		}

		.FlySelect_Option {
			height: 30px;
			padding: 0 10px;

			.FlySelect__SecondaryText {
				margin-right: 0;
			}

			&:hover,
			&:focus {
				outline: none;
				@include __theme-color($white, $gray-dark);
				@include __theme-background($green-dark, white);

				span {
					@include __theme-color($white, $gray-dark);
				}

				svg path {
					@include __theme-fill($white, $gray-dark);
				}
			}

			&.FlySelect_Option__Striped:nth-child(even):not(:hover) {
				@include theme-background-gray2-else-gray2row;
			}
		}
	}

	.FlySelect {
		&.FlySelect__HasFooter {
			.FlySelect_OptionsContainer {
				padding-bottom: 57px;
			}
		}
	}

	.FlySelect_OptionsContainer {
		overflow: auto;
		max-height: inherit;
	}

	.FlySelect__Footer {
		display: flex;
		position: absolute;
		align-items: center;
		justify-content: center;
		z-index: 2;
		@include theme-background-white85-else-graydark;
		@include theme-border-top;
		border-radius: 0 0 4px 4px;
		padding: 0;
		bottom: 0;
		left: 0;
		right: 0;
		height: 57px;
		overflow: hidden;
		text-align: center;

		.FlySelect__FooterLink {
			justify-content: center;
			border-radius: 0 0 4px 4px;
			width: 100%;
			height: 57px;
			line-height: 57px;
			text-align: center;
			font-weight: bold;

			svg {
				vertical-align: middle;
				width: 6px;
				height: 14px;
				margin-left: 10px;
			}

			&:hover {
				background: $green-dark50;
				color: $white;

				svg path {
					fill: $white;
				}
			}
		}
	}

	.FormRow {
		margin: 0 0 20px;
		display: flex;
		justify-content: space-between;
		width: 100%;

		&.FormRow__Half {
			.FormField { // needed for distributed Environments
				flex: 0 0 calc(50% - 15px);
			}
		}

		&.FormRow__Third,
		&.#{deprecated(--Third, '2.5', '2.0', 'Needed for distributed Environments')} {
			.FormField { // needed for distributed Environments
				flex: 0 0 calc(33.333333333333% - 15px);
			}
		}

		&.FormRow__Center {
			justify-content: center;
		}

		.FormField { // needed for distributed Environments
			width: 100%;
			min-width: 0; // Flex box text overflow workaround: http://stackoverflow.com/questions/12022288/how-to-keep-a-flex-item-from-overflowing-due-to-its-text

			> label {
				display: block;
				margin: 0 0 10px;
				@include theme-color-graydark-else-white;
			}

			input:not([type="checkbox"]) {
				@include flywheelInput;
			}

			.FlySelect {
				width: 100%;
				height: 57px;
				padding: 0 50px 0 20px;
				font-weight: 500;
				background-position: right 20px top 50%;

				.FlySelect_Option {
					height: 57px;
					line-height: 57px;
					padding: 0 20px;
				}

				.CurrentValue {
					line-height: 57px;
				}
			}
		}
	}
}