@import (reference) '../../../styles/variables';
@import (reference) '../../../styles/mixins';

:root {
	--color-picker-cell-size: 20px;
}

.jodit-color-picker {
	margin: 0;
	padding: 12px;
	text-align: left;
	user-select: none;

	// width: 170px;
	// height: 86px;
	// border-radius: 4px;

	&__groups {
		display: flex;
		flex-direction: column;
		gap: 1px;
	}

	&__group {
		display: flex;
		flex-wrap: wrap;
		white-space: normal;
		gap: 1px;
	}
	row-gap: 1px;

	&__color-item {
		display: block;
		width: var(--color-picker-cell-size);
		height: var(--color-picker-cell-size);
		border: 0 solid transparent;
		border-radius: 2px;

		text-align: center;
		text-decoration: none;
		box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);

		&:hover {
			border: 1px solid var(--color-border-selected);
			outline: 1px solid var(--color-border-selected);
		}

		&_active_true,
		&:active {
			border: 1px solid var(--color-border-selected);
			outline: 1px solid var(--color-border-selected);
		}
	}

	&__native {
		svg {
			display: inline-block;
			width: 16px;
			height: 16px;
			margin-right: 4px;
		}

		input {
			width: 18px;
			height: 18px;
			padding: 0;
			border: none;
			appearance: none;

			&[type='color']::-webkit-color-swatch-wrapper {
				padding: 0;
			}

			input[type='color']::-webkit-color-swatch {
				border: none;
			}
		}
	}
}