:root, :host, .kdots-glassy {
  // Shiny
  --inner-shine: inset 0 0.125rem 0 0 rgb(255 255 255 / 0.2);
  --top-highlight: inset 0 0.25rem 0 0 rgb(255 255 255 / 0.1);
  --upper-tint: inset 0 1.25em 0 0 rgb(255 255 255 / 0.1);
  --lower-shade: inset 0 -1.125em 0 0 rgb(0 0 0 / 0.02);
  --bottom-shadow: inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.15);

  --inner-shine-active: inset 0 -0.0625rem 0 0 rgb(255 255 255 / 0.1);
  --top-highlight-active: inset 0 0.125rem 0 0 rgb(0 0 0 / 0.04);
  --upper-tint-active: inset 0 1.25em 0 0 rgb(0 0 0 / 0.04);
  --lower-shade-active: inset 0 -1.125em 0 0 rgb(0 0 0 / 0.02);
  --bottom-shadow-active: inset 0 -0.125rem 0 0 rgb(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;

  et2-avatar::part(base) {
	background-color: transparent;
  }

  et2-avatar, et2-lavatar {
	&::part(base) {
	  border-radius: var(--sl-border-radius-circle);
	}

	&::part(image) {
	  border-radius: var(--sl-border-radius-circle);
	}
  }

  sl-popup::part(popup) {
	border: var(--sl-panel-border-width) solid var(--sl-panel-border-color);
	border-radius: var(--sl-panel-border-radius);
  }



  /* Input field changes */
  .et2-input-widget:not(:focus-within):not(.et2-button-widget) {
	&:not([disabled]):not([slot="main-header"]):not([slot="header-actions"]) {
	  &::part(base), &::part(input-control), &::part(combobox) {
		box-shadow: var(--upper-tint), var(--lower-shade);
	  }

	  &::part(listbox) {
		--sl-input-background-color: var(--sl-color-neutral-0);
		color: var(--sl-color-neutral-700)
	  }
	}
  }
  //plain input fields (created by eg. et2-textbox in projectmanager) also need the same styling
  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);
  }

  /* don't add another box shadow to input fields in glassy main header otherwise it shows up twice*/

  *[slot="main-header"] {
	*::part(base), *::part(input-control), *::part(combobox), *::part(button__base) {
	  box-shadow: none !important;
	}
  }

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

  // box shadow inside the toolbar lists just looks bad. Exclude it there
  .et2-button-widget:not([slot='list']), button, .plus_button {
	&::part(base), &::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);
	}

	&: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);
	  }
	}
  }

  egw-app {
	&::part(app-header) {
	  box-shadow: var(--inner-shine), var(--top-highlight), var(--upper-tint), var(--lower-shade), var(--bottom-shadow);
	}

	/*sidebox styling
  */

	&::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);
	}
  }

  et2-dialog {
	&::part(panel) {
	  border-radius: var(--sl-panel-border-radius);
	}

	&::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);
	}

	&::part(close-button) {
	  color: var(--application-header-text-color, var(--sl-color-neutral-100));
	}
  }
  .et2_required{
	border-radius: var(--sl-input-border-radius-medium);
  }
}