/* For btns hover status see device-desktop.css */

.jsdialog:not(.sidebar) *[disabled] {
	color: var(--color-text-lighter) !important;
	background: var(--color-background-lighter);
}

.jsdialog *[disabled]:not(label):not(.ui-frame-container):not(.checkbutton):not(.spinfieldcontainer):not(.ui-grid):not(.ui-content):not(.ui-listbox-container):not(.ui-pushbutton-wrapper) {
	border: 1px solid var(--color-border-lighter);
}

#toolbar-down .unotoolbutton[disabled],
#toolbar-down .unotoolbutton[disabled] *[disabled] {
	opacity: 0.5;
	background-color: transparent;
}

/* toolbuttons */
.unotoolbutton .unobutton.selected + .ui-content.unolabel {
	color: var(--color-text-dark);
}

/* toolbuttons non selected */
#clearFormatting,
.hasnotebookbar .ui-content.unotoolbutton.has-label,
.hasnotebookbar .ui-content.unotoolbutton.inline,
.hasnotebookbar .ui-content.unotoolbutton:not(.has-label):not(.inline),
.sidebar.unotoolbutton,
.ui-overflow-group-more.unotoolbutton,
.jsdialog.unotoolbutton,
.notebookbar.unotoolbutton,
#closebutton {
	background-color: transparent;
	border: 1px solid transparent;
	color: var(--color-main-text);
	border-radius: var(--border-radius);
	height: max-content;
}

/* toolbuttons non selected hover */
.hasnotebookbar .ui-content.unotoolbutton.has-label:hover,
.hasnotebookbar .ui-content.unotoolbutton.inline:hover,
.hasnotebookbar .ui-content.unotoolbutton:not(.has-label):not(.inline):hover,
.unotoolbutton:hover,
.close-navigation-wrapper:hover {
	border: 1px solid var(--color-btn-border);
	color: var(--color-text-darker);
	border-radius: var(--border-radius);
	background-color: var(--color-background-tabs-group);
}

/* toolbuttons selected */
.hasnotebookbar .ui-content.unotoolbutton.selected.has-label,
.hasnotebookbar .ui-content.unotoolbutton.selected.inline,
.hasnotebookbar .ui-content.unotoolbutton.selected:not(.has-label):not(.inline),
.sidebar.unotoolbutton.selected,
.notebookbar.unotoolbutton.selected,
.jsdialog.unotoolbutton.selected {
	background-color: rgba(var(--doc-type), 0.1);
	border: 1px solid rgb(var(--doc-type));
	color: var(--color-text-dark);
	border-radius: var(--border-radius);
}
[data-theme='dark'] .hasnotebookbar .ui-content.unotoolbutton.selected.has-label,
[data-theme='dark'] #toggledarktheme,
[data-theme='dark'] .hasnotebookbar .ui-content.unotoolbutton.selected.inline,
[data-theme='dark'] .hasnotebookbar .ui-content.unotoolbutton.selected:not(.has-label):not(.inline),
[data-theme='dark'] .sidebar.unotoolbutton.selected,
[data-theme='dark'] #context-toolbar .unotoolbutton.selected {
	background-color: var(--color-background-darker);
	border-color: var(--color-border-darker);
}

/* toolbuttons selected hover */
/* toolbuttons have .unobuttons as children */
.hasnotebookbar .ui-content.unotoolbutton.has-label:hover,
.hasnotebookbar .ui-content.unotoolbutton.selected:hover,
.hasnotebookbar .ui-content.unotoolbutton.selected:not(.has-label):not(.inline):hover,
.sidebar.unotoolbutton.selected:hover,
.ui-overflow-group-more.unotoolbutton:hover,
.notebookbar.unotoolbutton.selected:hover,
.jsdialog.unotoolbutton.selected:hover {
	color: var(--color-text-darker);
	border-radius: var(--border-radius);
	background-color: var(--color-background-tabs-group);
}

/*limit icon to button height*/
button.jsdialog img {
	max-height: 100%;
}

.annotation-btns-container {
	display: flex;
	flex-direction: row;
	justify-content: end;
	flex-wrap: wrap;
}

:not(.main-nav) .button-secondary,
:not(.main-nav) .button-secondary:not(.arrowbackground),
:not(.main-nav) > div:not(.toolbox) > button:not(.ui-tab):not(.ui-expander):not(.ui-corner-all):not(.button-primary):not(.unobutton):not(.form-field-button):not(.col):not(.arrowbackground):not(.ui-combobox-button) {
	box-sizing: border-box;
	height: 32px;
	line-height: normal;
	color: var(--color-main-text);
	font-size: var(--default-font-size);
	min-width: 62px;
	background-color: var(--color-background-dark);
	border: 1px solid var(--color-btn-border);
	border: 1px solid var(--color-border-dark);
	border-radius: var(--border-radius);
	margin: 5px;
	vertical-align: middle;
	width: max-content;
}

.button-primary {
	height: 32px;
	line-height: 0em;
	color: var(--color-primary-text);
	min-width: 62px;
	background-color: var(--color-primary);
	border: 1px solid var(--color-primary-dark);
	border-radius: var(--border-radius);
	margin: 5px;
	vertical-align: middle;
	width: max-content;
}

.jsdialog.ui-button-box.end {
	margin-top: 8px;
	display: flex;
	justify-content: space-between;
}

.jsdialog.ui-button-box button[disabled='disabled'] {
	color: var(--color-text-lighter) !important;
	background-color: var(--color-background-lighter) !important;
	border-color: var(--color-border-lighter) !important;
}

.ui-button-box .jsdialog.ui-pushbutton:not(.hidden) {
	display: initial !important;
	font-size: var(--default-font-size);
}

.ui-pushbutton[disabled] {
	color: var(--color-text-lighter) !important;
	background-color: var(--color-background-lighter) !important;
	border: 1px solid var(--color-border-lighter) !important;
}

.ui-pushbutton[disabled]:hover {
	cursor: not-allowed !important;
	background: var(--color-background-darker) !important;
}

/* button box */

.jsdialog.ui-button-box {
	display: grid;
}

.jsdialog.ui-button-box-right {
	grid-column: 2;
	display: flex;
	justify-self: end;
	margin-inline-end: -5px;
}

.jsdialog.ui-button-box-left {
	grid-column: 1;
	display: flex;
	justify-self: start;
	margin-inline-start: -5px;
}

/* Eg: Sidebar -> Animation -> Effects buttons shouldn't overflow the content */
button.has-img {
	min-width: auto !important;
}

#container .ui-grid-cell button.jsdialog.has-img:not(.sidebar) {
	display: grid;
	grid-template-columns: 24px 1fr;
	text-align: start;
	gap: 5px;
	width: 100% !important;
	margin: 2px !important;
}

/* Thesaurus <- button */
button#left.has-img > img {
	width: 16px;
}

/* Calc Auto-Filter buttons coming from core */
[data-theme='dark'] button#select_current.has-img > img {
	filter: invert(.9)
}

[data-theme='dark'] button#unselect_current.has-img > img {
	filter: invert(.9)
}

/* Writer - Format - Page Style - Columns */
/* Writer - Format - Columns */
div[id^='TemplateDialog'] #Columns :is(#back, #next) button.has-img,
#ColumnDialog :is(#back, #next) button.has-img {
	width: 100%;
}