✏️ Editing: number.scss Writable

.ct-option-number {
	display: flex;
	align-items: center;
	position: relative;
	height: 30px;
	width: 100px;

&[data-width="full"] {
		width: 100%;
	}

&[data-position="right"] {
		margin-inline-start: auto;
	}

input {
		--padding: 3px 30px;
		text-align: center;

&::-webkit-contacts-auto-fill-button {
			position: absolute;
			visibility: hidden;
		}
	}

> a {
		position: absolute;
		// top: 1px;
		width: 30px;
		// height: calc(100% - 2px);
		height: 100%;
		color: inherit;

&:before, &:after {
			position: absolute;
			content: '';
			inset: 0;
			margin: auto;
			width: 8px;
			height: 1px;
			opacity: 0.8;
			background: currentColor;
			transition: background 0.1s linear,
						opacity 0.1s linear;
		}

&.ct-minus {
			inset-inline-start: 1px;
			// border-top-left-radius: 2px;
			// border-bottom-left-radius: 2px;
			
			&:after {
				display: none;
			}
		}

&.ct-plus {
			inset-inline-end: 1px;
			// border-top-right-radius: 2px;
			// border-bottom-right-radius: 2px;

&:after {
				transform: rotate(90deg);
			}
		}

// not disabled state
		&:not(.ct-disabled) {
			cursor: pointer;

&:hover {
				color: #fff;
				opacity: 1;
				background: var(--ui-accent-color);
			}
		}

&.ct-disabled {
			opacity: 0.4;
			pointer-events: none;
		}

&:hover {
			~ input {
				--optionBorderColor: var(--ui-accent-color) !important;
			}
		}
	}
}

🔐 Sid Gifari File Manager Pro