@use "../../styles/variables" as *;

.wcgs-number-group {
	gap: 6px 0;

	&__label {
		font-size: 12px;
		font-weight: 500;
		line-height: 1.3;
		color: $wcgs-muted;
		text-align: center;
	}

	&__unit {
		margin-left: 8px;
		height: $wcgs-control-height;
		box-sizing: border-box;
		border: 1px solid $wcgs-border;
		border-radius: 4px;
		background: $wcgs-bg-soft;
		font-size: 14px;
		font-weight: 500;
		color: $wcgs-muted;
	}

	&__units {
		position: relative;
		min-width: 0;
		margin-left: 8px;
	}

	&__unit-toggle {

		@include wcgs-reset-button;
		width: 100%;
		height: $wcgs-control-height;
		box-sizing: border-box;
		border: 1px solid $wcgs-border;
		border-radius: 4px;
		background: $wcgs-bg-soft;
		font-size: 14px;
		font-weight: 500;
		color: $wcgs-muted;
		transition:
			border-color 220ms $wcgs-ease,
			color 200ms $wcgs-ease;

		&:hover,
		&.is-open {
			border-color: $wcgs-border-hover;
			color: $wcgs-text;
		}
	}

	&__unit-menu {

		@include wcgs-popover(top right);
		position: absolute;
		right: 0;
		top: calc(100% + 4px);
		z-index: 41;
		min-width: 100%;
		gap: 1px;
		padding: 4px;
		box-sizing: border-box;
		background: #fff;
		border: 1px solid $wcgs-border;
		border-radius: 6px;
		box-shadow: $wcgs-menu-shadow;

		.wcgs-number-group__unit-option {

			@include wcgs-reset-button;
			width: 100%;
			padding: 7px 0;
			border-radius: 4px;
			text-align: center;
			font-size: 13px;
			color: $wcgs-text-2;
			transition: background-color 160ms $wcgs-ease;

			&:hover {
				background-color: $wcgs-bg-soft;
			}

			&.is-active {

				@include wcgs-option-active;
			}
		}
	}

	// Separate fields (per-device values): 6px apart, as in the design.
	&.is-spaced {
		gap: 6px;

		.wcgs-number-group__unit,
		.wcgs-number-group__units {
			margin-left: 0;
		}
	}
}