:root,
:host,
.kdots-glassy {
  --inner-shine: inset 0 0.125rem 0 0 rgba(255, 255, 255, 0.2);
  --top-highlight: inset 0 0.25rem 0 0 rgba(255, 255, 255, 0.1);
  --upper-tint: inset 0 1.25em 0 0 rgba(255, 255, 255, 0.1);
  --lower-shade: inset 0 -1.125em 0 0 rgba(0, 0, 0, 0.02);
  --bottom-shadow: inset 0 -0.0625rem 0 0 rgba(0, 0, 0, 0.15);
  --inner-shine-active: inset 0 -0.0625rem 0 0 rgba(255, 255, 255, 0.1);
  --top-highlight-active: inset 0 0.125rem 0 0 rgba(0, 0, 0, 0.04);
  --upper-tint-active: inset 0 1.25em 0 0 rgba(0, 0, 0, 0.04);
  --lower-shade-active: inset 0 -1.125em 0 0 rgba(0, 0, 0, 0.02);
  --bottom-shadow-active: inset 0 -0.125rem 0 0 rgba(255, 255, 255, 0.04);
  /* Rounded corners */
  --sl-border-radius-small: 1rem;
  /* Small radius */
  --sl-border-radius-medium: var(--sl-input-height-small);
  /* Medium radius */
  --sl-border-radius-large: var(--sl-input-height-medium);
  /* Large radius */
  --sl-panel-border-radius: 1rem;
  /* Input field changes */
  /* don't add another box shadow to input fields in glassy main header otherwise it shows up twice*/
  /* Buttons */
  --sl-button-border-radius: var(--sl-border-radius-pill);
  --sl-button-padding: 0.25rem 0.75rem;
  --sl-button-primary-background-color: hsl(var(--application-color-hsl));
  --sl-button-primary-color: hsl(var(--sl-color-neutral-0));
  --sl-button-primary-hover-background-color: hsl(calc(var(--application-color-hsl) / 0.9));
  --sl-button-primary-hover-border-color: hsl(calc(var(--application-color-hsl) / 1));
}
:root et2-avatar::part(base),
:host et2-avatar::part(base),
.kdots-glassy et2-avatar::part(base) {
  background-color: transparent;
}
:root et2-avatar::part(base),
:host et2-avatar::part(base),
.kdots-glassy et2-avatar::part(base),
:root et2-lavatar::part(base),
:host et2-lavatar::part(base),
.kdots-glassy et2-lavatar::part(base) {
  border-radius: var(--sl-border-radius-circle);
}
:root et2-avatar::part(image),
:host et2-avatar::part(image),
.kdots-glassy et2-avatar::part(image),
:root et2-lavatar::part(image),
:host et2-lavatar::part(image),
.kdots-glassy et2-lavatar::part(image) {
  border-radius: var(--sl-border-radius-circle);
}
:root sl-popup::part(popup),
:host sl-popup::part(popup),
.kdots-glassy sl-popup::part(popup) {
  border: var(--sl-panel-border-width) solid var(--sl-panel-border-color);
  border-radius: var(--sl-panel-border-radius);
}
:root .et2-input-widget:not([disabled]):not([slot="main-header"]):not([slot="header-actions"])::part(base),
:host .et2-input-widget:not([disabled]):not([slot="main-header"]):not([slot="header-actions"])::part(base),
.kdots-glassy .et2-input-widget:not([disabled]):not([slot="main-header"]):not([slot="header-actions"])::part(base),
:root .et2-input-widget:not([disabled]):not([slot="main-header"]):not([slot="header-actions"])::part(input-control),
:host .et2-input-widget:not([disabled]):not([slot="main-header"]):not([slot="header-actions"])::part(input-control),
.kdots-glassy .et2-input-widget:not([disabled]):not([slot="main-header"]):not([slot="header-actions"])::part(input-control),
:root .et2-input-widget:not([disabled]):not([slot="main-header"]):not([slot="header-actions"])::part(combobox),
:host .et2-input-widget:not([disabled]):not([slot="main-header"]):not([slot="header-actions"])::part(combobox),
.kdots-glassy .et2-input-widget:not([disabled]):not([slot="main-header"]):not([slot="header-actions"])::part(combobox) {
  box-shadow: var(--upper-tint), var(--lower-shade);
}
:root .et2-input-widget:not([disabled]):not([slot="main-header"]):not([slot="header-actions"])::part(listbox),
:host .et2-input-widget:not([disabled]):not([slot="main-header"]):not([slot="header-actions"])::part(listbox),
.kdots-glassy .et2-input-widget:not([disabled]):not([slot="main-header"]):not([slot="header-actions"])::part(listbox) {
  --sl-input-background-color: var(--sl-color-neutral-0);
  color: var(--sl-color-neutral-700);
}
:root input,
:host input,
.kdots-glassy input {
  box-shadow: var(--upper-tint), var(--lower-shade);
  border-radius: var(--sl-input-border-radius-medium);
  border: var(--sl-input-border-width) solid var(--sl-input-border-color);
}
:root *[slot="main-header"] *::part(base),
:host *[slot="main-header"] *::part(base),
.kdots-glassy *[slot="main-header"] *::part(base),
:root *[slot="main-header"] *::part(input-control),
:host *[slot="main-header"] *::part(input-control),
.kdots-glassy *[slot="main-header"] *::part(input-control),
:root *[slot="main-header"] *::part(combobox),
:host *[slot="main-header"] *::part(combobox),
.kdots-glassy *[slot="main-header"] *::part(combobox),
:root *[slot="main-header"] *::part(button__base),
:host *[slot="main-header"] *::part(button__base),
.kdots-glassy *[slot="main-header"] *::part(button__base) {
  box-shadow: none !important;
}
:root .et2-button-widget::part(base),
:host .et2-button-widget::part(base),
.kdots-glassy .et2-button-widget::part(base),
:root button::part(base),
:host button::part(base),
.kdots-glassy button::part(base),
:root .plus_button::part(base),
:host .plus_button::part(base),
.kdots-glassy .plus_button::part(base),
:root .et2-button-widget::part(button__base),
:host .et2-button-widget::part(button__base),
.kdots-glassy .et2-button-widget::part(button__base),
:root button::part(button__base),
:host button::part(button__base),
.kdots-glassy button::part(button__base),
:root .plus_button::part(button__base),
:host .plus_button::part(button__base),
.kdots-glassy .plus_button::part(button__base) {
  border-radius: var(--sl-button-border-radius);
  box-shadow: var(--inner-shine), var(--top-highlight), var(--upper-tint), var(--lower-shade), var(--bottom-shadow);
}
:root .et2-button-widget:not([disabled]):active::part(base),
:host .et2-button-widget:not([disabled]):active::part(base),
.kdots-glassy .et2-button-widget:not([disabled]):active::part(base),
:root button:not([disabled]):active::part(base),
:host button:not([disabled]):active::part(base),
.kdots-glassy button:not([disabled]):active::part(base),
:root .plus_button:not([disabled]):active::part(base),
:host .plus_button:not([disabled]):active::part(base),
.kdots-glassy .plus_button:not([disabled]):active::part(base) {
  box-shadow: var(--inner-shine-active), var(--top-highlight-active), var(--upper-tint-active), var(--lower-shade-active), var(--bottom-shadow-active);
  transform: scale(0.98);
}
:root egw-app,
:host egw-app,
.kdots-glassy egw-app {
  /*sidebox styling
  */
}
:root egw-app::part(app-header),
:host egw-app::part(app-header),
.kdots-glassy egw-app::part(app-header) {
  box-shadow: var(--inner-shine), var(--top-highlight), var(--upper-tint), var(--lower-shade), var(--bottom-shadow);
}
:root egw-app::part(details-header),
:host egw-app::part(details-header),
.kdots-glassy egw-app::part(details-header) {
  background-color: var(--template-custom-color, var(--application-color, var(--sl-color-primary-800, lightblue)));
  border-radius: 1em;
  padding-block: var(--sl-spacing-3x-small);
  color: var(--application-header-text-color);
}
:root et2-dialog::part(panel),
:host et2-dialog::part(panel),
.kdots-glassy et2-dialog::part(panel) {
  border-radius: var(--sl-panel-border-radius);
}
:root et2-dialog::part(header),
:host et2-dialog::part(header),
.kdots-glassy et2-dialog::part(header) {
  /* Set header size, color & background */
  box-shadow: var(--inner-shine), var(--top-highlight), var(--upper-tint), var(--lower-shade), var(--bottom-shadow);
  color: var(--application-header-text-color, var(--sl-color-neutral-100));
  background: var(--template-custom-color, var(--application-color, var(--sl-color-primary-700)));
  height: var(--sl-spacing-3x-large);
  border-top-left-radius: var(--sl-panel-border-radius);
  border-top-right-radius: var(--sl-panel-border-radius);
}
:root et2-dialog::part(close-button),
:host et2-dialog::part(close-button),
.kdots-glassy et2-dialog::part(close-button) {
  color: var(--application-header-text-color, var(--sl-color-neutral-100));
}
:root .et2_required,
:host .et2_required,
.kdots-glassy .et2_required {
  border-radius: var(--sl-input-border-radius-medium);
}
