/*
 * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */

:root {
	--ck-list-style-button-size: 44px;
}

.ck.ck-list-styles-dropdown > .ck-dropdown__panel > .ck-toolbar {
	background: none;
	padding: 0;

	& > .ck-toolbar__items {
		grid-template-columns: repeat( 3, auto );
		row-gap: var(--ck-spacing-medium);
		column-gap: var(--ck-spacing-medium);
		padding: var(--ck-spacing-medium);

		& .ck-button {
			/* Make the button look like a thumbnail (the icon "takes it all"). */
			width: var(--ck-list-style-button-size);
			height: var(--ck-list-style-button-size);
			padding: 0;

			/*
			 * Buttons are aligned by the grid so disable default button margins to not collide with the
			 * gaps in the grid.
			 */
			margin: 0;

			/*
			 * Make sure the button border (which is displayed on focus, BTW) does not steal pixels
			 * from the button dimensions and, as a result, decrease the size of the icon
			 * (which becomes blurry as it scales down).
			 */
			box-sizing: content-box;

			& .ck-icon {
				width: var(--ck-list-style-button-size);
				height: var(--ck-list-style-button-size);
			}
		}
	}
}