@zeix/ui-element/docs-src/components/spin-button/spin-button.css

UIElement - minimal reactive framework based on Web Components

spin-button {
	display: inline-flex;
    max-width: 7rem;

	.value {
		box-sizing: border-box;
		margin: 0;
		border-top: 1px solid var(--color-border);
		border-bottom: 1px solid var(--color-border);
		height: var(--input-height);
		min-width: 2rem;
		max-width: 3rem;
		text-align: center;
		font-size: var(--font-size-s);
		padding: 0 var(--space-s);
		line-height: 2;
		flex-grow: 1;
	}

	> button {
		flex-grow: 0;
		box-sizing: border-box;
		height: var(--input-height);
		min-width: var(--input-height);
		border: 1px solid var(--color-border);
		background-color: var(--color-secondary);
		color: var(--color-text);
		padding: 0 var(--space-s);
		font-size: var(--font-size-s);
		line-height: var(--line-height-s);
		white-space: nowrap;
		cursor: pointer;
		transition: all var(--transition-shorter) var(--easing-inout);

		&:disabled {
			opacity: var(--opacity-translucent);
		}

		&:not(:disabled) {
			cursor: pointer;
			opacity: var(--opacity-solid);

			&:hover {
				background-color: var(--color-secondary-hover);
			}

			&:active {
				background-color: var(--color-secondary-active);
			}
		}

		&:first-child {
			border-radius: var(--space-xs) 0 0 var(--space-xs);
		}

		&:last-child {
			border-radius: 0 var(--space-xs) var(--space-xs) 0;
		}
	}

	[hidden] + button {
		flex-grow: 1;
		border-radius: var(--space-xs);
		color: var(--color-text-inverted);
		background-color: var(--color-primary);
		border-color: var(--color-primary-active);

		&:hover {
			background-color: var(--color-primary-hover);
		}

		&:active {
			background-color: var(--color-primary-active);
		}
	}
}