Picker.less

// Picker.less
//
@import '../../styles/variables.less';
@import '../../styles/text.less';
@import '../../styles/mixins.less';
@import '../../styles/skin.less';

.picker {
	display: inline-block;
	border-radius: @moon-button-small-height;
	vertical-align: bottom;
	position: relative;
	text-align: center;
	margin-left: @moon-spotlight-outset;
	margin-right: @moon-spotlight-outset;

	.moon-custom-text({
		border-radius: @moon-button-small-height-large;
	});

	.sizingPlaceholder,
	.valueWrapper {
		.moon-text-base();
		.moon-locale-non-latin({line-height: @moon-button-small-height;});
		max-width: 300px;

		.moon-custom-text({
			font-size: @moon-item-font-size-large;
		});
	}

	.sizingPlaceholder {
		height: 0;
		visibility: hidden;
	}

	.valueWrapper {
		overflow: hidden;
		margin-left: auto;
		margin-right: auto;
		vertical-align: bottom;

		line-height: @moon-button-small-height;
		height: @moon-button-small-height;

		.moon-custom-text({
			line-height: @moon-button-small-height-large;
			height: @moon-button-small-height-large;
		});
	}

	.incrementer,
	.decrementer {
		cursor: pointer;
		margin: 0;
		position: relative;
		transition: transform 100ms;

		.disabled({
			cursor: default;
		});
	}

	&.horizontal {
		display: inline-flex;

		:global(.enact-locale-right-to-left) & {
			flex-direction: row-reverse;
		}

		.incrementer {
			order: 3;
			flex-shrink: 0;
			margin-left: @moon-spotlight-outset;
		}
		.decrementer {
			order: 1;
			flex-shrink: 0;
			margin-right: @moon-spotlight-outset;
		}
		.valueWrapper {
			order: 2;
		}
	}

	&.joined {
		&::before {
			.position(0);

			content: '';
			display: block;
			position: absolute;
			border-width: 0;
			border-style: solid;
			border-radius: inherit;
			pointer-events: none;
		}

		.icon {
			vertical-align: top;
			margin: 0;
			width: @moon-button-small-height;
			height: @moon-button-small-height;
			line-height: @moon-button-small-height;
		}

		.incrementer,
		.decrementer {
			will-change: transform;
			transform: scale(0.7);

			&.hidden {
				visibility: hidden;
			}
		}

		.focus({
			.incrementer,
			.decrementer {
				transform: scale(0.95);
			}

			&.incrementing .incrementer,
			&.decrementing .decrementer {
				transform: scale(0.7);
			}
		});

		&.horizontal {
			.moon-custom-text({
				font-size: @moon-item-font-size-large;
				height: @moon-button-small-height-large;
				line-height: @moon-button-small-height-large;
			});
			&.incrementing::before {
				border-right-width: @moon-integer-picker-shadow-width;
			}
			&.decrementing::before {
				border-left-width: @moon-integer-picker-shadow-width;
			}
			.incrementer,
			.decrementer {
				margin: 0;
				height: @moon-button-small-height;
				line-height: @moon-button-small-height;
			}
			.moon-custom-text({
				.incrementer,
				.decrementer {
					&,
					.icon {
						height: @moon-button-small-height-large;
						line-height: @moon-button-small-height-large;
					}
				}
			});
		}

		&.vertical {
			&.incrementing::before {
				border-top-width: @moon-integer-picker-shadow-width;
			}
			&.decrementing::before {
				border-bottom-width: @moon-integer-picker-shadow-width;
			}
			.incrementer,
			.decrementer {
				display: block;
			}
		}
	}

	&.small .valueWrapper {
		width: (@moon-icon-size + @moon-spotlight-outset*3);
	}
	&.medium .valueWrapper {
		width: 180px;
	}
	&.large .valueWrapper {
		width: 300px;
	}

	&.small,
	&.medium,
	&.large {
		.valueWrapper {
			position: relative;

			.item {
				position: absolute;
				.position(0);
			}
		}

		&.vertical {
			.valueWrapper {
				.sizingPlaceholder,
				.item {
					.moon-custom-text({
						margin: 0 @moon-spotlight-outset;
					});
				}
			}
		}
	}

	&.vertical .valueWrapper {
		display: block;
		position: relative;

		.moon-custom-text({
			padding: 0 @moon-spotlight-outset;
		});

		.sizingPlaceholder,
		.item {
			margin: 0 @moon-spotlight-outset;

			.moon-custom-text({
				margin: 0;
			});
		}

		.item {
			position: absolute;
			.position(0);
		}
	}

	// Skin colors
	.applySkins({
		.sizingPlaceholder,
		.valueWrapper {
			color: @moon-picker-text-color;
		}

		.valueWrapper {
			color: inherit;
		}

		&.joined {
			color: @moon-picker-joined-text-color;
			background-color: @moon-picker-joined-bg-color;

			&::before {
				border-color: rgba(0, 0, 0, 0.2);
			}

			.icon {
				color: @moon-picker-joined-text-color;
			}

			.focus({
				background-color: @moon-spotlight-border-color;
				color: @moon-spotlight-text-color;

				.icon {
					color: @moon-spotlight-text-color;
				}
			});
		}
	});
}

.muted({
	.picker {
		.applySkins({
			&.joined {
				.focus({
					background-color: transparent;
					color: @moon-picker-text-color;

					.incrementer,
					.decrementer {
						transform: scale(0.7);
					}
				});
			}
		});
	}
});