// for classes that apply a set of commonly used styles, but don't describe an element with a specific purpose
@import (reference) 'mixins.less';

.grid {
	display: grid;
}

.margin-left {
	.marginMixin(right);
}

.highlighted {
	.staticHighlightMixin(30);
}

.scrollable {
	// property intentionally duplicated to provide fallback
	overflow-y: scroll;
	overflow-y: overlay;
}

.margin-right {
	.marginMixin(left);
}

.vertical-text {
	writing-mode: vertical-lr;
	border: none;
	width: var(--font-size-24);

	i {
		display: inline-block;
		transform: rotate(90deg);
	}
}

.inset {
	margin: var(--ironsworn-spacer-md);
	border: var(--ironsworn-border-width-md) solid
		var(--ironsworn-color-border-muted);
	border-radius: var(--ironsworn-border-radius-md);
	padding: var(--ironsworn-spacer-md);
}

.boxgroup {
	--ironsworn-boxrow-size-sm: 25px;

	border: var(--ironsworn-border-width-md) solid var(--ironsworn-color-border);
	border-radius: var(--ironsworn-border-radius-lg);

	.boxrow {
		border-top: var(--ironsworn-border-width-md) solid
			var(--ironsworn-color-border);

		&:first-child {
			border-top: none;
		}

		&.small {
			flex-basis: var(--ironsworn-boxrow-size-sm);
			flex-grow: 0;
			line-height: var(--ironsworn-boxrow-size-sm);
		}
	}

	.box {
		display: flex;
		justify-content: center;
		border-left: var(--ironsworn-border-width-md) solid
			var(--ironsworn-color-border);
		border-width: var(--ironsworn-border-width-md);
		text-align: center;

		&:first-child {
			border-left: none;
		}
	}
}

.stack {
	flex-grow: 0;
	flex-direction: column;

	.stack-row {
		position: relative;
		// FIXME refactor as component and encapsulate the relevant css there
		flex: 0 0 auto;
		z-index: auto;
		border: var(--ironsworn-border-width-md) solid var(--ironsworn-color-border);
		border-radius: 0;
		border-top-width: 0;
		padding: 0;
		min-width: var(--ironsworn-vertical-slider-width);
		text-align: center;
		line-height: var(--ironsworn-line-height-lg);

		&:hover,
		&.hover,
		&.selected,
		&[aria-selected='true'] {
			z-index: var(
				--ironsworn-z-index-high
			); // with position: relative, ensures that hovered item borders/filters aren't rendered behind other items
		}

		&:first-child {
			border-top-width: 1px;
			border-top-left-radius: var(--ironsworn-border-radius-lg) !important;
			border-top-right-radius: var(--ironsworn-border-radius-lg) !important;
		}

		&:last-child {
			border-bottom-left-radius: var(--ironsworn-border-radius-lg) !important;
			border-bottom-right-radius: var(--ironsworn-border-radius-lg) !important;
		}

		&[aria-checked='true'] {
			background-color: var(
				--ironsworn-color-clickable-block-bg-selected
			) !important;
			color: var(--ironsworn-color-clickable-block-fg-selected) !important;
		}

		input[type='radio'] {
			appearance: none;
		}
	}
}

.nogrow {
	flex-grow: 0 !important;
}

.strikethru * {
	text-decoration: line-through;
}
