/*
this file is used to apply extension settings via css variables
*/

html {
	--extension-font-size: 16px;
	--hot-font-size-add-modifier: 1;
}

/* use font size from editor */

body.vs-code-settings-font-size {
	font-size: calc(1 * var(--vscode-editor-font-size));
}

body.vs-code-settings-font-size .handsontable td {
	font-size: calc(var(--vscode-editor-font-size) + var(--hot-font-size-add-modifier));
	height: calc(var(--vscode-editor-font-size) + var(--hot-font-size-add-modifier) + 6px);
	line-height: calc(var(--vscode-editor-font-size) + var(--hot-font-size-add-modifier) + 5px);
}
body.vs-code-settings-font-size .handsontableInputHolder textarea {
	font-size: calc(var(--vscode-editor-font-size) + var(--hot-font-size-add-modifier));
	height: calc(var(--vscode-editor-font-size) + var(--hot-font-size-add-modifier) + 6px);
	line-height: calc(var(--vscode-editor-font-size) + var(--hot-font-size-add-modifier) + 5px);
}

body.vs-code-settings-font-size .input {
	font-size: calc(1 * var(--vscode-editor-font-size));
}

body.vs-code-settings-font-size .button {
	font-size: calc(1 * var(--vscode-editor-font-size));
}

body.vs-code-settings-font-size .switch[type=checkbox]+label {
	font-size: calc(1 * var(--vscode-editor-font-size));
	padding-left: calc(4 * var(--vscode-editor-font-size));
	padding-top: 0;
}

body.vs-code-settings-font-size .switch[type=checkbox]+label span {
	/* margin-left: calc(1 * var(--vscode-editor-font-size)); */
}

body.vs-code-settings-font-size .switch[type=checkbox]+label::before, .switch[type=checkbox]+label:before {
	height: calc(1.3 * var(--vscode-editor-font-size));
	width: calc(3 * var(--vscode-editor-font-size));
}

body.vs-code-settings-font-size .switch[type=checkbox]+label::after, .switch[type=checkbox]+label:after {
	height: calc(1 * var(--vscode-editor-font-size));
	width: calc(1 * var(--vscode-editor-font-size));
	top: calc(0.2 * var(--vscode-editor-font-size));
}

body.vs-code-settings-font-size .textarea {
	font-size: calc(1 * var(--vscode-editor-font-size));
}

/* END use font size from editor */

/* use font size from extension settings */

body.extension-settings-font-size {
	font-size: calc(1 * var(--extension-font-size));
}

body.extension-settings-font-size .handsontable td {
	font-size: calc(var(--extension-font-size) + var(--hot-font-size-add-modifier));
	height: calc(var(--extension-font-size) + var(--hot-font-size-add-modifier) + 6px);
	line-height: calc(var(--extension-font-size) + var(--hot-font-size-add-modifier) + 5px);
}
body.extension-settings-font-size .handsontableInputHolder textarea {
	font-size: calc(var(--extension-font-size) + var(--hot-font-size-add-modifier));
	height: calc(var(--extension-font-size) + var(--hot-font-size-add-modifier) + 6px);
	line-height: calc(var(--extension-font-size) + var(--hot-font-size-add-modifier) + 5px);
}

body.extension-settings-font-size .input {
	font-size: calc(1 * var(--extension-font-size));
}

body.extension-settings-font-size .button {
	font-size: calc(1 * var(--extension-font-size));
}

body.extension-settings-font-size .switch[type=checkbox]+label {
	font-size: calc(1 * var(--extension-font-size));
	padding-left: calc(4 * var(--extension-font-size));
	padding-top: 0;
}

body.extension-settings-font-size .switch[type=checkbox]+label span {
	/* margin-left: calc(1 * var(--extension-font-size)); */
}

body.extension-settings-font-size .switch[type=checkbox]+label::before, .switch[type=checkbox]+label:before {
	height: calc(1.3 * var(--extension-font-size));
	width: calc(3 * var(--extension-font-size));
}

body.extension-settings-font-size .switch[type=checkbox]+label::after, .switch[type=checkbox]+label:after {
	height: calc(1 * var(--extension-font-size));
	width: calc(1 * var(--extension-font-size));
	top: calc(0.2 * var(--extension-font-size));
}
body.extension-settings-font-size .textarea {
	font-size: calc(1 * var(--extension-font-size));
}

/* END use font size from extension settings */