/*** WIDGETS ***/
/* This should mostly go away with webcomponents */

/* Show something for undefined widget */
*:not(:defined) {
  background-size: contain;
  background-image: url(../../node_modules/bootstrap-icons/icons/question-circle.svg);
}

/* Get nextmatch sizing more nicely without messing with dynheight */
div.et2_nextmatch {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  width: 100%;
  overflow: hidden;

  & > div:not(:first-child) {
	flex: 1 1 100%;
	max-height: 100%;
  }

  th {
	font-weight: normal;
  }

  .nextmatch_lettersearch {
	background-color: var(--sl-color-neutral-100);
	table-layout: fixed;
	border-bottom: 1px solid var(--sl-color-neutral-400);

	td {
	  cursor: pointer;
	  text-align: center;

	  &:last-of-type {
		border-right: none;
	  }

	  &.lettersearch_active {
		font-weight: bold;
	  }
	}
  }

  .egwGridView_outer {
	border-collapse: collapse;
	width: 100%;

	thead > tr {
	  background-color: var(--sl-color-neutral-100);
	  //border-bottom: var(--sl-panel-border-width) solid var(--sl-color-neutral-500);

	  th {
		border-right: var(--sl-panel-border-width) solid var(--sl-color-neutral-400);
		//one nm header cell
		div.innerContainer {
		  display: flex;
		  align-items: center;
		  padding-left: var(--sl-spacing-2x-small);
		  min-height: 2em;
		  max-height: 6.5em;
		  overflow-x: hidden;
		  overflow-y: auto;
		  // if in vbox with more than one header do not wrap text and ellipsis
		  et2-vbox {
			width: 100%;
			span:not(.no_ellipsis) {
			  white-space: nowrap;
			  overflow: hidden;
			  text-overflow: ellipsis;

			}

			& > span:only-child, & > et2-description:only-child > span[part="content"] {
			  white-space: normal;
			}
		  }
		}

		.ellipsis {
		  &* {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			width: 100%;
		  }
		}
	  }

	  th.optcol span.selectcols {
		height: 9px;
		padding: 4px 14px 0 2px;
		margin-top: 4px;
		background-image: url(../../api/templates/default/images/selectcols.svg);
		background-repeat: no-repeat;
		background-size: 10px 10px;
		display: inline-block;
		background-position: top;
	  }
	}

	.egwGridView_scrollarea {
	  overflow-x: hidden;
	  overflow-y: auto;
	  table {
		border-collapse: collapse;
		tr.selected {
		  background-color: var(--highlight-background-color) !important;
		  &.focused{
			background-color: hsl(from var(--selection-color) h s l / .7) !important;
		  }
		}
	  }

	  table.egwGridView_grid {
		/* Visually hidden accessible header */

		thead {
		  position: absolute;
		  clip-path: inset(50%);
		  height: 1px;
		  width: 1px;
		  margin: -1px;
		  overflow: hidden;
		  padding: 0;
		  border: 0;
		  white-space: nowrap;
		}

		> tbody > tr {
		  border-bottom: var(--sl-panel-border-width) solid var(--sl-color-neutral-200);
		}
	  }
	}
  }
}

/* Special styling for widgets in main-header, dialog header */
[slot="main-header"], et2-dialog > [slot="label"] {
  /* Only target the parts, or nested widgets will look weird */
  /* Anything changed here needs to be reset for et2-toolbar [slot=list] below */

  --sl-input-background-color: transparent;
  --sl-input-background-color-hover: transparent;
  --sl-input-background-color-focus: transparent;
  --sl-input-color: var(--application-header-text-color);
  --input-text-color: var(--application-header-text-color);
  --sl-input-icon-color: var(--application-header-text-color);
  --sl-input-color-hover: var(--application-header-text-color);
  --sl-input-placeholder-color: var(--application-header-text-color);
  --focus-background-color: hsla(from var(--application-header-text-color) h s l /0.18);


  ::part(listbox) {
	--sl-input-background-color: var(--sl-color-neutral-0);
  }

  color: var(--application-header-text-color);

  input::placeholder {
	color: black;
  }

  et2-vfs-upload, et2-file {
	--sl-color-neutral-0: transparent;
	--sl-color-neutral-700: var(--application-header-text-color);
	--sl-input-border-color: transparent;

	.et2_label {
	  color: var(--application-header-text-color);
	}

	&::part(button) {
	  --sl-input-border-color-hover: transparent;
	}
  }

  *::part(base), *::part(button__base), ::part(control) {
	color: var(--application-header-text-color);
	background-color: transparent;
  }

  et2-switch-icon::part(control) {
	font-size: var(--sl-font-size-x-large, 20px);
  }


  /****
INPUT FIELDS GET SOME BACKGROUND WHEN FOCUSED
 ****/

  .et2-input-widget:focus-within {
	--sl-input-background-color: var(--focus-background-color);
	--sl-input-background-color-focus: var(--focus-background-color);
	--sl-input-border-color: var(--sl-input-border-color-hover);

	&::part(input) {
	  background-color: var(--focus-background-color);
	}

  }

  /*HOVER effect on all clickable elements in the main-header*/
  /*we also want to style the clickable elements in the whole header in the same way*/

  .et2-input-widget {
	--sl-input-border-color-hover: var(--application-header-text-color);

	&.et2-textbox-widget, &.et2-select-widget {
	  --sl-input-border-color: var(--sl-color-neutral-400);
	  padding-inline: var(--sl-spacing-2x-small);
	}
  }

  et2-tree-dropdown {
	&::part(control) {
	  --sl-input-border-color: var(--sl-color-neutral-400);
	}

	padding-inline: var(--sl-spacing-2x-small);
  }

  .et2_clickable, et2-image, .et2-input-widget:not(et2-toolbar):not(et2-link-add) {
	--sl-input-border-color: transparent;
	--indicator-color: var(--sl-color-neutral-0);
	--sl-input-background-color: transparent;

	&::part(input):autofill, &::part(input):-webkit-autofill {
	  /* Chrome doesn't let us style autofill background directly */
	  transition: background-color 50000s ease-in-out 0s; /* Long transition to hide the default color change */
	  -webkit-text-fill-color: var(--application-header-text-color);
	  -webkit-box-shadow: 0 0 0 50px var(--sl-input-background-color) inset; /* Box shadow hides the default background color */
	}

	&[label]::part(label) {
	  padding-inline: var(--sl-spacing-x-small);
	}

	&::part(control) {
	  --indicator-color: var(--application-header-text-color);
	  --sl-input-background-color: transparent;
	  --image-filter: brightness(0) invert(1);
	  --image-filter-off: brightness(0) invert(1) opacity(0.5);
	}

	&::part(base) {
	  border: solid var(--sl-input-border-width) var(--sl-input-border-color);
	}

	&:hover::part(base), &:hover::part(control) {
	  border-color: var(--sl-input-border-color-hover);
	}
  }
  et2-link-add.et2-input-widget{
	--sl-input-border-color: var(--sl-color-neutral-400);
	&::part(listbox){
	  background: var(--sl-color-neutral-0);
	}
  }

  et2-switch-icon {
	border: solid var(--sl-input-border-width) var(--sl-input-border-color);
	border-radius: var(--sl-input-border-radius-medium);

	&:hover {
	  border-color: var(--sl-input-border-color-hover) !important;
	}
  }

  et2-button-toggle {
	&::part(control) {
	  border: solid var(--sl-input-border-width) var(--sl-input-border-color);
	  border-radius: var(--sl-input-border-radius-medium);
	}

  }

  /*END HOVER*/
  /****
  *
  * Make Elements in the main-header waste less space if possible
  *
   ****/

  et2-toolbar * {
	flex-grow: 0;
  }

  .et2-select-widget {
	flex-grow: 0;

	&::part(form-control) {
	  width: fit-content;
	}
  }

  /* Don't let search grow */

  [id$="api-search-button"] {
	flex: 0 0 min-content;
  }
}

et2-toolbar[slot="main-header"], [slot="main-header"] et2-toolbar, et2-dialog > et2-toolbar[slot="label"], et2-dialog > [slot="label"] et2-toolbar {
  flex: 1 1 auto;

  //No divider in our kdots toolbar
  sl-button-group {
	background: none;
  }

  et2-dropdown-button {
	::part(base) {
	  background-color: transparent;
	  color: currentColor;
	}
  }

  et2-switch-icon {
	padding-inline: var(--sl-spacing-small);
  }

  ::part(list), [slot="list"] {
	color: var(--sl-color-neutral-700);

	et2-button::part(base) {
	  border: solid var(--sl-input-border-width) var(--sl-input-border-color);
	  color: var(--sl-color-neutral-700);
	}

	et2-button:hover::part(base) {
	  color: var(--sl-color-neutral-700);
	  border-color: var(--sl-input-border-color);
	}
  }

  /* Change colors of things in list back */

  [slot="list"] {
	color: var(--sl-color-neutral-700);
	--indicator-color: var(--sl-color-neutral-700);
	--sl-input-color: var(--sl-color-neutral-700);
	--sl-input-color-hover: var(--sl-color-neutral-700);
	--sl-input-placeholder-color: var(--sl-color-neutral-700);

	::part(base), &::part(base), &::part(control) {
	  color: var(--sl-color-neutral-700);
	  --sl-input-color: var(--sl-color-neutral-700);
	  --indicator-color: var(--sl-color-neutral-700);
	  --image-filter: none;
	  --image-filter-off: none;
	}

	////since our placeholders also already carry a mening we should style them the same
	//&::part(input)::placeholder {
	//color: var(--sl-color-neutral-700);
	//}
	:hover::part(base) {
	  border-color: var(--sl-input-border-color);
	}
  }
}

/*Special styling for flatpickr widget*/
.flatpickr-calendar {
  .flatpickr-months {
	.flatpickr-current-month {
	  display: flex;
	  height: auto;
	  .flatpickr-monthDropdown-months {
		flex: 1 1 5ch;
		max-width: 13ch;
	  }
	  .numInputWrapper {
		flex: 0 0 6ch;
		.numInput {
		  padding: 0;
		}
	  }
	}
  }
}
/*** END WIDGETS ***/