/*
 * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */

:root {
	--ck-style-panel-button-width: 120px;
	--ck-style-panel-button-height: 80px;
	--ck-style-panel-button-shadow-color: hsl(0deg 0% 0% / 10%);
	--ck-style-panel-button-shadow: 0px 0px 6px var(--ck-style-panel-button-shadow-color);
	--ck-style-panel-button-label-background: hsl(0, 0%, 90%);
	--ck-style-panel-button-hover-label-background: hsl(0, 0%, 80%);
	--ck-style-panel-button-hover-border-color: hsl(0, 0%, 70%);
}

.ck.ck-style-panel .ck-style-grid {
	row-gap: var(--ck-spacing-large);
	column-gap: var(--ck-spacing-large);

	& .ck-style-grid__button {
		--ck-color-button-default-hover-background: var(--ck-color-base-background);
		--ck-color-button-default-active-background: var(--ck-color-base-background);

		padding: 0;
		width: var(--ck-style-panel-button-width);
		height: var(--ck-style-panel-button-height);

		/* Let default .ck-button :focus styles apply */
		&:not(:focus) {
			border: 1px solid var(--ck-color-base-border);
			box-shadow: var(--ck-style-panel-button-shadow);
		}

		& .ck-button__label {
			height: 22px;
			line-height: 22px;
			width: 100%;
			padding: 0 var(--ck-spacing-medium);
			overflow: hidden;
			text-overflow: ellipsis;
			flex-shrink: 0;
			background: var(--ck-style-panel-button-label-background);
		}

		& .ck-style-grid__button__preview {
			width: 100%;
			overflow: hidden;
			opacity: .9;

			padding: var(--ck-spacing-medium);
			border: 2px solid var(--ck-color-base-background);
		}

		&.ck-disabled {
			--ck-color-button-default-disabled-background: var(--ck-color-base-foreground);

			/* Let default .ck-button :focus styles apply */
			&:not(:focus) {
				box-shadow: none;
				border-color: var(--ck-style-panel-button-label-background);
			}

			& .ck-button__label {
				background: var(--ck-style-panel-button-label-background);
			}

			& .ck-style-grid__button__preview {
				opacity: .4;

				border-color: var(--ck-color-base-foreground);
				filter: saturate(.3);
			}
		}

		&.ck-on {
			--ck-color-button-on-background: var(--ck-color-base-background);
			--ck-color-button-on-hover-background: var(--ck-color-base-background);
			--ck-color-button-on-active-background: var(--ck-color-base-background);
			--ck-style-panel-button-shadow-color: hsla(208, 88%, 52%, 0.1);

			border-color: var(--ck-color-base-active);

			& .ck-button__label {
				background: var(--ck-color-base-active);
				color: var(--ck-color-base-background);
			}

			&:hover {
				border-color: var(--ck-color-base-active-focus);

				& .ck-button__label {
					background: var(--ck-color-base-active-focus);
				}
			}
		}

		&:hover:not(.ck-disabled):not(.ck-on) {
			border-color: var(--ck-style-panel-button-hover-border-color);

			& .ck-style-grid__button__preview {
				opacity: 1;
			}

			& .ck-button__label {
				background: var(--ck-style-panel-button-hover-label-background);
			}
		}
	}
}
