/*!
 * VisualEditor UserInterface SymbolListBookletLayout styles.
 *
 * @copyright See AUTHORS.txt
 */

@import '../../../../lib/codex-design-tokens/theme-wikimedia-ui.less';

.ve-ui-symbolListBookletLayout {
	.oo-ui-outlineOptionWidget {
		padding: 0.25em 0.5em;
	}
}

.ve-ui-symbolListPage {
	.oo-ui-bookletLayout-stackLayout > & {
		padding: 0.5em;
	}

	h3 {
		color: @color-subtle;
		margin: 0 0 0.5em 0;
		font-weight: normal;
		font-size: 1em;
	}

	&-symbols {
		white-space: normal;
	}

	// See T406982 for border/background color reasoning
	&-symbol {
		cursor: pointer;
		font-size: 1.5em;
		line-height: 1.8em;
		min-width: 1.8em;
		height: 1.8em;
		text-align: center;
		display: inline-block;
		vertical-align: top;
		margin: 0 3px 3px 0;
		// Should be @border-color-muted
		border: 1px solid #dadde3;
		transition: border-color 200ms;
		border-radius: @border-radius-base;

		&:hover {
			// Should be @background-color-interactive-subtle--hover
			background-color: @background-color-interactive;
		}

		&:active {
			// Should be @background-color-interactive-subtle--active
			background-color: #dadde3;
		}
	}
}