:root {
	--ck-highlight-pen-white1: #ffffff;
	--ck-highlight-pen-white2: #f2f2f2;
	--ck-highlight-pen-white3: #d8d8d8;
	--ck-highlight-pen-white4: #bfbfbf;
	--ck-highlight-pen-white5: #a5a5a5;
	--ck-highlight-pen-white6: #7f7f7f;
	--ck-highlight-pen-black1: #000000;
	--ck-highlight-pen-black2: #7f7f7f;
	--ck-highlight-pen-black3: #595959;
	--ck-highlight-pen-black4: #bfbfbf;
	--ck-highlight-pen-black5: #a5a5a5;
	--ck-highlight-pen-black6: #7f7f7f;
	--ck-highlight-pen-beige1: #eeece1;
	--ck-highlight-pen-beige2: #ddd9c3;
	--ck-highlight-pen-beige3: #c4bd97;
	--ck-highlight-pen-beige4: #938953;
	--ck-highlight-pen-beige5: #494429;
	--ck-highlight-pen-beige6: #1d1b10;
	--ck-highlight-pen-blue1: #1f497d;
	--ck-highlight-pen-blue2: #c6d9f0;
	--ck-highlight-pen-blue3: #8db3e2;
	--ck-highlight-pen-blue4: #548dd4;
	--ck-highlight-pen-blue5: #17365d;
	--ck-highlight-pen-blue6: #0f243e;
	--ck-highlight-pen-red1: #c0504d;
	--ck-highlight-pen-red2: #f2dcdb;
	--ck-highlight-pen-red3: #e5b9b7;
	--ck-highlight-pen-red4: #d99694;
	--ck-highlight-pen-red5: #953734;
	--ck-highlight-pen-red6: #632423;	
	--ck-highlight-pen-green1: #9bbb59;
	--ck-highlight-pen-green2: #ebf1dd;
	--ck-highlight-pen-green3: #d7e3bc;
	--ck-highlight-pen-green4: #c3d69b;
	--ck-highlight-pen-green5: #76923c;
	--ck-highlight-pen-green6: #4f6128;	
	--ck-highlight-pen-purple1: #8064a2;
	--ck-highlight-pen-purple2: #e5e0ec;
	--ck-highlight-pen-purple3: #ccc1d9;
	--ck-highlight-pen-purple4: #b2a2c7;
	--ck-highlight-pen-purple5: #5f497a;
	--ck-highlight-pen-purple6: #3f3151;	
	--ck-highlight-pen-cyan1: #4bacc6;
	--ck-highlight-pen-cyan2: #dbeef3;
	--ck-highlight-pen-cyan3: #b7dde8;
	--ck-highlight-pen-cyan4: #a3d4e0;
	--ck-highlight-pen-cyan5: #92cddc;
	--ck-highlight-pen-cyan6: #31859b;		
	--ck-highlight-pen-orange1: #f79646;
	--ck-highlight-pen-orange2: #fdeada;
	--ck-highlight-pen-orange3: #fbd5b5;
	--ck-highlight-pen-orange4: #fac08f;
	--ck-highlight-pen-orange5: #e36c09;
	--ck-highlight-pen-orange6: #974806;		
	--ck-highlight-pen-yellow1: #ffff00;
	--ck-highlight-pen-yellow2: #fff2ca;
	--ck-highlight-pen-yellow3: #ffe694;
	--ck-highlight-pen-yellow4: #f2c314;
	--ck-highlight-pen-yellow5: #c09100;
	--ck-highlight-pen-yellow6: #7f6000;		
}

@define-mixin highlight-pen-color $color {
	.ck5-pen-$color {
		color: var(--ck-highlight-pen-$color);
	}
}

@mixin highlight-pen-color white1;
@mixin highlight-pen-color white2;
@mixin highlight-pen-color white3;
@mixin highlight-pen-color white4;
@mixin highlight-pen-color white5;
@mixin highlight-pen-color white6;
@mixin highlight-pen-color black1;
@mixin highlight-pen-color black2;
@mixin highlight-pen-color black3;
@mixin highlight-pen-color black4;
@mixin highlight-pen-color black5;
@mixin highlight-pen-color black6;
@mixin highlight-pen-color beige1;
@mixin highlight-pen-color beige2;
@mixin highlight-pen-color beige3;
@mixin highlight-pen-color beige4;
@mixin highlight-pen-color beige5;
@mixin highlight-pen-color beige6;
@mixin highlight-pen-color blue1;
@mixin highlight-pen-color blue2;
@mixin highlight-pen-color blue3;
@mixin highlight-pen-color blue4;
@mixin highlight-pen-color blue5;
@mixin highlight-pen-color blue6;
@mixin highlight-pen-color red1;
@mixin highlight-pen-color red2;
@mixin highlight-pen-color red3;
@mixin highlight-pen-color red4;
@mixin highlight-pen-color red5;
@mixin highlight-pen-color red6;
@mixin highlight-pen-color green1;
@mixin highlight-pen-color green2;
@mixin highlight-pen-color green3;
@mixin highlight-pen-color green4;
@mixin highlight-pen-color green5;
@mixin highlight-pen-color green6;
@mixin highlight-pen-color purple1;
@mixin highlight-pen-color purple2;
@mixin highlight-pen-color purple3;
@mixin highlight-pen-color purple4;
@mixin highlight-pen-color purple5;
@mixin highlight-pen-color purple6;
@mixin highlight-pen-color cyan1;
@mixin highlight-pen-color cyan2;
@mixin highlight-pen-color cyan3;
@mixin highlight-pen-color cyan4;
@mixin highlight-pen-color cyan5;
@mixin highlight-pen-color cyan6;
@mixin highlight-pen-color orange1;
@mixin highlight-pen-color orange2;
@mixin highlight-pen-color orange3;
@mixin highlight-pen-color orange4;
@mixin highlight-pen-color orange5;
@mixin highlight-pen-color orange6;
@mixin highlight-pen-color yellow1;
@mixin highlight-pen-color yellow2;
@mixin highlight-pen-color yellow3;
@mixin highlight-pen-color yellow4;
@mixin highlight-pen-color yellow5;
@mixin highlight-pen-color yellow6;

.ckeditor5-highlight-color .ck-toolbar{
	flex-wrap: wrap !important;
	width: 308px;
}
.ckeditor5-highlight-color .ck-toolbar .ck-button{
	margin: 0;
	padding: 0;
	width: 30px;
	height: 30px;
}
.ckeditor5-highlight-color .ck-toolbar .ck-button .ck.ck-icon{
	width: 100%;
	height: 100%;
}