btns.css

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

.jsdialog:not(.sidebar) *[disabled]:not(.spinfieldbutton-up):not(.spinfieldbutton-down):not(.spinfield) {
	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):not(.spinfieldbutton-up):not(.spinfieldbutton-down):not(.spinfield) {
	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);
}
#viewMode {
	margin: 0px 5px;
}
/* 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,
#readonlyMode {
	background-color: transparent;
	border: 1px solid transparent;
	color: var(--color-main-text);
	border-radius: var(--border-radius);
	height: max-content;
}

#readonlyMode {
	border: 1px solid var(--color-btn-border);
}

/* view mode dropdown (jsdialog menubutton) */
#viewModeDropdown .unotoolbutton {
	border: 1px solid var(--color-btn-border);
	background-color: transparent;
	color: var(--color-main-text);
	padding: 0;
}

#viewModeDropdown .unobutton {
	border: none;
	padding: 4px 8px;
	height: var(--btn-size-s);
	width: fit-content;
}

#viewModeDropdown .arrowbackground {
	min-width: 18px;
	border-left: 1px solid var(--color-btn-border);
	background-color: transparent;
}

#viewModeDropdown .unotoolbutton:hover {
	border: 1px solid var(--color-btn-border);
	color: var(--color-text-darker);
	background-color: var(--color-background-tabs-group);
}

@keyframes viewmode-attention {
	0%, 100% { translate: 0; }
	30% { translate: -2px; }
	60% { translate: 1px; }
	80% { translate: -0.5px; }
}

#viewModeDropdown.attention .unotoolbutton {
	animation: viewmode-attention 200ms cubic-bezier(0.2, 0, 0, 1) 2;
}

/* 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,
#readonlyMode: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);
	overflow: hidden;
}

/* 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);
}

/* if menubutton has text - be sure it is fully visible */
.menubutton.has-label button {
	min-width: fit-content;
}

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

button.jsdialog[disabled] img {
	filter: grayscale(100%);
	opacity: 0.5;
}

.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-btn):not(.ui-corner-all):not(.button-primary):not(.unobutton):not(.form-field-button):not(.col):not(.arrowbackground):not(.ui-combobox-button):not(.ui-linkbutton):not(.spinfieldbutton-up):not(.spinfieldbutton-down):not(.menubutton):not(.ui-treeview-header-button) {
	box-sizing: border-box;
	height: 32px;
	line-height: normal;
	color: var(--color-main-text);
	font-size: var(--default-font-size);
	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;
}

/* dialog main action buttons should have equal minimal width */
.ui-button-box .button-secondary,
.ui-button-box .ui-pushbutton {
	min-width: 62px !important;
}

.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;
}

#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 */
/* Insert field using Writer - Reference - Cross-Reference, double click on inserted field to edit */
div[id^='TemplateDialog'] #Columns :is(#back, #next) button.has-img img,
div[id^='ColumnDialog'] :is(#back, #next) button.has-img img,
div[id^='FieldRefPage'] :is(#prev, #next) button.has-img img {
	width: 100%;
	height: 100%;
}