/*
 * What you're currently looking at is the source code of a legally protected, proprietary software.
 * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
 * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
 *
 * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
 */

.ck.ck-button.ck-tab-button {
	padding: 0;
	border: 0;
	cursor: pointer;
	justify-content: center;

	&:active,
	&:focus {
		box-shadow: none;
	}

	&:not(.ck-disabled):hover {
		background-color: var(--ck-color-tab-button-active-background);
	}

	& .ck.ck-icon {
		box-sizing: content-box;
		padding: var(--ck-tab-button-padding);
		color: var(--ck-color-tab-button-icon);
	}

	&.ck-on {
		border: 0;
		background-color: var(--ck-color-tab-button-active-background);
		color: var(--ck-color-tab-button-active-border);

		& .ck.ck-icon {
			color: var(--ck-color-tab-button-active-icon);
			background-color: var(--ck-color-tab-button-active-background);
		}
	}

	&.ck-tab-button_top {
		&.ck-on {
			border-bottom: 1px solid var(--ck-color-tab-button-active-icon);
			box-shadow: var(--ck-color-tab-button-active-icon) 0 1px 0 0;

			& .ck.ck-icon {
				padding-bottom: calc(var(--ck-tab-button-padding) - 1px);
			}
		}
	}

	&.ck-tab-button_left {
		&.ck-on {
			border-left: 0;
			border-right: 1px solid var(--ck-color-tab-button-active-icon);
			box-shadow: var(--ck-color-tab-button-active-icon) 1px 0 0 0;

			& .ck.ck-icon {
				padding-right: calc(var(--ck-tab-button-padding) - 1px);
			}
		}
	}

	&.ck-tab-button_right {
		&.ck-on {
			border-right: 0;
			border-left: 1px solid var(--ck-color-tab-button-active-icon);
			box-shadow: var(--ck-color-tab-button-active-icon) -1px 0 0 0;

			& .ck.ck-icon {
				padding-left: calc(var(--ck-tab-button-padding) - 1px);
			}
		}
	}
}