@use 'mixin:clickable.scss';
@use 'mixin:fx.scss';
@use 'mixin:border.scss';

@mixin fieldFocus() {
	@include fx.glowExterior;
	@include border.accent(
		var(--ironsworn-color-warm-50),
		var(--ironsworn-color-cool-50)
	);

	outline: var(--ironsworn-border-width-md) solid var(--ironsworn-color-warm);
}

@mixin fieldBase() {
	border-width: var(--ironsworn-border-width-md);
	border-style: var(--ironsworn-input-border-style);
	border-radius: var(--ironsworn-border-radius-md);
	border-color: var(--ironsworn-color-input-border);
	background: var(--ironsworn-color-input-bg);
	color: var(--ironsworn-color-fg);
}

@mixin field() {
	@include clickable.interactive;
	@include fieldBase;

	// specify invisible outline to stop jitter from border width transition
	outline-width: var(--ironsworn-border-width-md);
	outline-style: solid;
	outline-color: transparent;
	cursor: initial;

	&::placeholder {
		opacity: 0.5;
		color: var(--ironsworn-color-fg);
	}

	&:not([aria-readonly='true'], [readonly]) {
		&:hover {
			@include fx.glowInterior;

			border-color: var(--ironsworn-color-clickable-block-border-hover);
		}

		&:focus,
		&:focus-within {
			@include fieldFocus;
			@include border.accent(
				var(--ironsworn-color-warm-80),
				var(--ironsworn-color-cool-80)
			);

			&:hover {
				// box-shadow: @include fieldFocus(); [box-shadow],
				//   @include fx.glowInterior($spread, 0, var(--ironsworn-color-cool));
				//     [box-shadow];
			}
		}
	}
}
