:host {
  /* @doc Define a camada de visibilidae do componente. */
  --ez-list__host--z-index: var(--visible, 1);

  /* @doc Define o raio da borda do componente. */
  --ez-list__host--border-radius: var(--border--radius-medium, 12px);

  /* @doc Define o espaçamento entre a lista e o componente. */
  --ez-list__host--padding: var(--space--medium, 12px);

  /* @doc Define o espaçamento interno do ícone. */
  --ez-list__icon--padding: var(--space--small, 6px);

  /* @doc Define a cor do ícone de arrasto do item da lista. */
  --ez-list__icon--color: #AFB6C0;

  /* @doc Define o espaçamento externo do item da lista. */
  --ez-list__item--margin: 0 var(--space--small, 6px);

  /* @doc Define a cor do texto do item da lista. */
  --ez-list__item--color: var(--title--primary, #2b3a54);

  /* @doc Define o estilo borda inferior do item da lista. */
  --ez-list__item--border-bottom: none;

  /* @doc Define a cor da borda inferior do item da lista. */
  --ez-list__item--border-bottom-color: none;

  /* @doc Define o estilo do texto do item da lista. */
  --ez-list__item--font-family: var(--font-pattern, "Roboto");

  /* @doc Define o tamanho do texto do item da lista. */
  --ez-list__item--font-size: var(--text--medium, 14px);
  
  /* @doc Define o tipo da quebra de linha do item da lista. */
  --ez-list__item--white-space: var(--ez-list__item--white-space, nowrap);

  /* @doc Define o espaçamento lateral direito para items selecionados. */
  --ez-list__selectable--padding-right: var(--space--small, 6px);
  
  /* @doc Define o espaçamento lateral esquerdo para items selecionados. */
  --ez-list__selectable--padding-left: var(--space--small, 6px);

  /*@doc Define o raio da borda de items selecionados.*/
  --ez-list__selected-item--border-radius: var(--border--radius-small, 6px);
  
  /*@doc Define a cor de fundo de items selecionados.*/
  --ez-list__selected-item--background-color: var(--color--primary-300, #E2F4EF);

  /* @doc Define o estilo do texto do grupo da lista. */
  --ez-list__group--font-family: var(--font-pattern, "Roboto");
  
  /* @doc Define o tamanho do texto do grupo da lista. */
  --ez-list__group--font-size: var(--text--medium, 14px);
  
  /* @doc Define o peso do texto do grupo da lista. */
  --ez-list__group--font-weight: var(--text-weight--large, 600);
  
  /* @doc Define o espaçamento inferior do grupo da lista. */
  --ez-list__group--padding-bottom: var(--space-small, 6px);

  /* @doc Define o estilo do texto da área de transferência de grupos. */
  --ez-list__group-overlay--font-family: var(--font-pattern, "Roboto");

  /* @doc Define o tamanho do texto da área de transferência de grupos. */
  --ez-list__group-overlay--font-size: var(--text--medium, 14px);
  
  /* @doc Define a cor da borda pontilhada sobre os elementos da lista. */
  --ez-list__over--border--color: var(--color--primary, #008561);

  /*@doc Define a altura do container para arrasto para última posição .*/
  --ez-list__last-droppable-space--height: var(--space--small, 6px);
  
  /*@doc Define o espaçamento do container de itens arrastáveis .*/
  --ez-list__draggable-list--padding-bottom: var(--space--small, 6px);

  /* @doc Define a imagem do ícone de drag. */
  --ez-list__draggable-icon--image: url('data:image/svg+xml;utf8,<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="m 6.75,2.25 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z"/></svg>');

  /* scrollbar */
  /*@doc Define a cor da barra de rolagem do componente.*/
  --ez-list__scrollbar--color-default: var(--scrollbar--default, #626e82);
  /*@doc Define a cor de fundo da barra de rolagem do componente.*/
  --ez-list__scrollbar--color-background: var(--scrollbar--background, #E5EAF0);
  /*@doc Define a cor do hover na barra de rolagem do componente.*/
  --ez-list__scrollbar--color-hover: var(--scrollbar--hover, #2B3A54);
  /*@doc Define a cor do active na barra de rolagem do componente.*/
  --ez-list__scrollbar--color-clicked: var(--scrollbar--clicked, #a2abb9);
  /*@doc Define o raio da borda da barra de rolagem do componente.*/
  --ez-list__scrollbar--border-radius: var(--border--radius-small, 6px);
  /*@doc Define a largura da barra de rolagem do componente.*/
  --ez-list__scrollbar--width: var(--space--small, 6px);

  max-height: 100%;
  width: 100%;
  background-color: #fff;
  display: flex;
  outline: none;

  /*public*/
  z-index: var(--ez-list__host--z-index);
}

p {
  margin: 0;
}

.draggable {
  /* private */
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0px, auto) minmax(0px, auto);
  place-items: center;
  border-top: 1px dashed #fff;
  justify-content: space-between;

  /*public*/
  font-family: var(--ez-list__item--font-family);
  font-size: var(--ez-list__item--font-size);
}

.dragging {
  background: #FFFFFF;
  /* Primary/color--primary */

  border: 1px solid #008561;
  box-sizing: border-box;
  box-shadow: 0px 0px 16px rgba(0, 38, 111, 0.122);
  border-radius: 6px;
}

.selectable {
  cursor: pointer;

  /*public*/
  padding-right: var(--ez-list__selectable--padding-right);
  padding-left: var(--ez-list__selectable--padding-left);
}

.selectable-container {
  margin: 0px !important;
}

.hover-feedback:hover {
  background-color: var(--background--medium);
  border-radius: var(--border--radius-regular);
}

.item-content {
  display: flex;
  align-items: center;
  overflow: hidden;
  justify-content: flex-start;
  width: 100%;
}

.draggable-list {
  padding: 0;
  margin: 0;
  width: 100%;
  max-height: 100%;
  scrollbar-width: thin;
  
  /*public*/
  color: var(--text-color);
  scrollbar-color: var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background);
}

.draggable-list li {
  display: flex;
  
  /*public*/
  font-family: var(--ez-list__item--font-family);
  font-size: var(--ez-list__item--font-size);
  color: var(--ez-list__item--color);
  border-bottom: var(--ez-list__item--border-bottom, none) var(--ez-list__item--border-bottom-color);
}

.draggable-list li > div {
  /*public*/
  padding: var(--space--3xs, 4px) var(--space--3xs, 4px);
  margin: var(--ez-list__item--margin);
}

.over {
  /*public*/
  border-top: 1px dashed var(--ez-list__over--border--color);
}

.last-droppable-space {
  /*public*/
  height: var(--ez-list__last-droppable-space--height);
}

.draggable-selected {
  /*public*/
  background-color: var(--background--strong) !important;
}

.draggable-selected div:hover {
  /*public*/
  background-color: var(--background--strong) !important;
}

.draggable-list::-webkit-scrollbar {
  /*public*/
  background-color: var(--ez-list__scrollbar--color-background);
  width: var(--ez-list__scrollbar--width);
  max-width: var(--ez-list__scrollbar--width);
  min-width: var(--ez-list__scrollbar--width);
}

.draggable-list::-webkit-scrollbar-track {
  /*public*/
  background-color: var(--ez-list__scrollbar--color-background);
  border-radius: var(--ez-list__scrollbar--border-radius);
}

.draggable-list::-webkit-scrollbar-thumb {
  /*public*/
  background-color: var(--ez-list__scrollbar--color-default);
  border-radius: var(--ez-list__scrollbar--border-radius);
}

.draggable-list::-webkit-scrollbar-thumb:vertical:hover,
.draggable-list::-webkit-scrollbar-thumb:horizontal:hover {
  /*public*/
  background-color: var(--ez-list__scrollbar--color-hover);
}

.draggable-list::-webkit-scrollbar-thumb:vertical:active,
.draggable-list::-webkit-scrollbar-thumb:horizontal:active {
  /*public*/
  background-color: var(--ez-list__scrollbar--color-clicked);
}

.draggable-icon {
  align-items: flex-start;
  display: flex;
  outline: none;
  border: none;
  background-color: unset;
}

.draggable-icon::after {
  content: '';
  display: flex;
  width: 18px;
  height: 18px;

  /*public*/
  background-color: var(--ez-list__icon--color);
  -webkit-mask-image: var(--ez-list__draggable-icon--image);
  mask-image: var(--ez-list__draggable-icon--image);
}

* {
  box-sizing: border-box;
}

.checkbox {
  width: fit-content;
}

.text--ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  
  /*public*/
  white-space: var(--ez-list__item--white-space);
}

.group-container {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  overflow-y: auto;
  outline: none;
  width: 100%;
  scrollbar-width: thin;

  /*public*/
  scrollbar-color: var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background);
}

.group-name {
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /*public*/
  color: var(--title--primary);
  font-family: var(--ez-list__group--font-family);
  font-size: var(--ez-list__group--font-size);
  font-weight: var(--ez-list__group--font-weight);
  padding-bottom: var(--ez-list__group--padding-bottom);
}

.group {
  display: flex;
  flex-direction: column;
}

.group-container::-webkit-scrollbar {
  /*public*/
  background-color: var(--ez-list__scrollbar--color-background);
  width: var(--ez-list__scrollbar--width);
  max-width: var(--ez-list__scrollbar--width);
  min-width: var(--ez-list__scrollbar--width);
}

.group-container::-webkit-scrollbar-track {
  /*public*/
  background-color: var(--ez-list__scrollbar--color-background);
  border-radius: var(--ez-list__scrollbar--border-radius);
}

.group-container::-webkit-scrollbar-thumb {
  /*public*/
  background-color: var(--ez-list__scrollbar--color-default);
  border-radius: var(--ez-list__scrollbar--border-radius);
}

.group-container::-webkit-scrollbar-thumb:vertical:hover,
.group-container::-webkit-scrollbar-thumb:horizontal:hover {
  /*public*/
  background-color: var(--ez-list__scrollbar--color-hover);
}

.group-container::-webkit-scrollbar-thumb:vertical:active,
.group-container::-webkit-scrollbar-thumb:horizontal:active {
  /*public*/
  background-color: var(--ez-list__scrollbar--color-clicked);
}

.section-container {
  display: flex;
  position: relative;
  height: 100%;
}

.items-container {
  width: 100%;
  max-height: 100%;
  outline: none;
  scrollbar-width: thin;

  /*public*/
  scrollbar-color: var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background);
}

.group-items-container {
  width: 100%;
  max-height: 100%;
  height: 100%;
  outline: none;
}

.items-container::-webkit-scrollbar {
  /*public*/
  background-color: var(--ez-list__scrollbar--color-background);
  width: var(--ez-list__scrollbar--width);
  max-width: var(--ez-list__scrollbar--width);
  min-width: var(--ez-list__scrollbar--width);
}

.items-container::-webkit-scrollbar-track {
  /*public*/
  background-color: var(--ez-list__scrollbar--color-background);
  border-radius: var(--ez-list__scrollbar--border-radius);
}

.items-container::-webkit-scrollbar-thumb {
  /*public*/
  background-color: var(--ez-list__scrollbar--color-default);
  border-radius: var(--ez-list__scrollbar--border-radius);
}

.items-container::-webkit-scrollbar-thumb:vertical:hover,
.items-container::-webkit-scrollbar-thumb:horizontal:hover {
  /*public*/
  background-color: var(--ez-list__scrollbar--color-hover);
}

.items-container::-webkit-scrollbar-thumb:vertical:active,
.items-container::-webkit-scrollbar-thumb:horizontal:active {
  /*public*/
  background-color: var(--ez-list__scrollbar--color-clicked);
}

.group-overlay {
  background: rgba(226, 244, 239, 0.8);
  border: 1px solid #008561;
  border-radius: 8px;
  position: absolute;
  display: none;
  place-items: center;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  margin: 0;
  cursor: pointer;

  /*public*/
  font-family: var(--ez-list__group-overlay--font-family);
  font-size: var(--ez-list__group-overlay--font-size);
}

.presetedHeight {
  min-height: 100px;
}

.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 50px;
  color: white;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.selected-item {
  /*public*/
  background: var(--ez-list__selected-item--background-color);
  border-radius: var(--ez-list__selected-item--border-radius);
}

.slot-item {
  align-items: flex-end;
}

.overGroup {
  background: rgba(226, 244, 239, 0.8);
  border: 1px solid #008561;
  box-sizing: border-box;
  border-radius: 8px;
  padding-top: 6px;
}