:host {
  /* dimensions */
  /*@doc Define a altura do chip.*/
  --ez-label-chip--height: 32px;

  /* Label */
  /*@doc Define o tamanho do label.*/
  --ez-label-chip__label--font-size: var(--font-size--default, 14px);
  /*@doc Define a família da fonte do label.*/
  --ez-label-chip__label--font-family: var(--font-pattern, Arial);
  /*@doc Define o peso da fonte do label.*/
  --ez-label-chip__label--font-weight: var(--font-weight--regular, 400);
  /*@doc Define o espaçamento do label.*/
  --ez-label-chip__horizontal-padding: var(--space--8, 8px);
  /*@doc Define a cor do texto.*/
  --ez-label-chip__label--text--primary: var(--color--gray-70, #FFFFFF);
  /*@doc Define a cor do ícone.*/
  --ez-label-chip__label--icon--primary: var(--color--gray-70, #FFFFFF);

  /* Label Container */
  /*@doc Define o raio da borda do container do chip.*/
  --ez-label-chip__label__container--border-radius: var(--border--radius-large, 24px);
  /*@doc Define o estilo da borda do container.*/
  --ez-label-chip__label__container--border: 1px solid;
  /*@doc Define a cor da borda do container.*/
  --ez-label-chip__label__container--border-color-strokes: transparent;
  /*@doc Define a cor da borda e do fundo quando o chip está desativado.*/
  --ez-label-chip__label__container-color--disabled: var(--color--gray-80, #F9F9F9);
  /*@doc Define a cor de fundo do container.*/
  --ez-label-chip__label__container--background-color: var(--color--ocean-green-600, #008561);
  /*@doc Define a cor da borda do container quando ativo.*/
  --ez-label-chip__label__container--border-color-active: transparent;
  /*@doc Define a cor do fundo do container quando está ativo.*/
  --ez-label-chip__label__container--default--background-color--active: var(--color--ocean-green-700, #00684C);
  /*@doc Define a cor do texto quando está ativo.*/
  --ez-label-chip__label__container--default--color--active: var(--color--gray-70, #FFFFFF);
  /*@doc Define a cor do texto e do ícone quando o chip está desabilitado.*/
  --ez-label-chip__label__container--text--disabled: var(--color--gray-300, #A4A5A7);
  /*@doc Define a cor da borda quando o componente está ativo.*/
  --ez-label-chip__label__container--default--border-color--active: var(--color--ocean-green-200);
  /*@doc Define a cor da borda quando o componente está ativo e na variação secundária.*/
  --ez-label-chip__label__container--secondary--border-color--active: var(--color--gray-200);
   /*@doc Define a margem do chip.*/
  --ez-label-chip__label__container--margin: 0px;
}

.label__text {
  /*private*/
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;

  /*public*/
  font-family: var(--ez-label-chip__label--font-family);
  font-size: var(--ez-label-chip__label--font-size);
  font-weight: var(--ez-label-chip__label--font-weight);
}

.label__text--disabled {
  cursor: not-allowed;
}

.label__container {
  /*private*/
  cursor: pointer;
  width: max-content;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space--4);
  outline: none;
  /*public*/
  height: var(--ez-label-chip--height);
  border: var(--ez-label-chip__label__container--border);
  border-radius: var(--ez-label-chip__label__container--border-radius);
  padding: 0 var(--ez-label-chip__horizontal-padding);
  outline-color: var(--ez-label-chip__label__container--default--border-color--active);
  margin: var(--ez-label-chip__label__container--margin);
}

.label__container[data-size="default"] {
  height: var(--ez-label-chip--height, 32px);
}

.label__container[data-size="medium"] {
  height: 42px;
}

.label__container[data-size="large"] {
  height: 50px;
}

.label__container--row-reverse {
  flex-direction: row-reverse;
}

.label__container--disabled {
  cursor: not-allowed;
}

.label__container:hover {
  -webkit-transition: 150ms -webkit-filter linear;
  transition: 150ms filter linear, 150ms -webkit-filter linear;
  filter: brightness(90%);
}

.label__container:focus {
  box-shadow: 0 0 0 2px var(--color--gray-70), 0 0 0 4px var(--ez-label-chip__label__container--default--border-color--active);
}

.label__container:active {
  -webkit-transition: 150ms -webkit-filter linear;
  transition: 150ms filter linear, 150ms -webkit-filter linear;
  filter: brightness(85%);
}

/*PRIMARY*/

.label__container ez-icon {
  --ez-icon--color: var(--ez-label-chip__label--icon--primary);
}

:host .label__container ::slotted(ez-icon) {
  --ez-icon--color: var(--ez-label-chip__label--icon--primary);
}

.label__container[data-color-state="default"] {
  border-color: var(--ez-label-chip__label__container--border-color-strokes);
  background-color: var(--ez-label-chip__label__container--background-color);
  color: var(--ez-label-chip__label--text--primary);
}

.label__container[data-color-state="active"] {
  border-color: var(--ez-label-chip__label__container--border-color-active);
  background-color: var(--ez-label-chip__label__container--default--background-color--active);
  color: var(--ez-label-chip__label__container--default--color--active);
}

.label__container:focus {
  box-shadow: 0 0 0 2px var(--color--gray-70), 0 0 0 4px var(--ez-label-chip__label__container--default--border-color--active);
}

/*SECONDARY*/
.label__container[data-color-type="secondary"] {
  --ez-label-chip__label--icon--primary: var(--color--gray-300, #A4A5A7);
  --ez-label-chip__label__container--border-color-strokes: var(--color--gray-200, #D2D2D3);
  --ez-label-chip__label__container--background-color: var(--color--gray-70, #F7F7F8);
  --ez-label-chip__label--text--primary: var(--color--ocean-green-1000, #00281D);
  --ez-label-chip__label__container--border-color-active: var(--color--gray-200, #D2D2D3);
  --ez-label-chip__label__container--default--background-color--active: var(--color--primary-300, #6BB8A3);
  --ez-label-chip__label__container--default--color--active: var(--color--ocean-green-600, #008561);
  --ez-label-chip__label__container--default--border-color--active: var(--color--ocean-green-600, #008561);
}

/*ERROR*/
.label__container[data-color-type="error"] {
  --ez-label-chip__label--icon--primary: var(--color--gray-70, #FFFFFF);
  --ez-label-chip__label__container--border-color-strokes: transparent;
  --ez-label-chip__label__container--background-color: var(--color--red-600, #BD0025);
  --ez-label-chip__label--text--primary: var(--color--gray-70, #FFFFFF);
  --ez-label-chip__label__container--border-color-active: transparent;
  --ez-label-chip__label__container--default--background-color--active: var(--color--red-700, #97001E);
  --ez-label-chip__label__container--default--color--active: var(--color--gray-70, #FFFFFF);
  --ez-label-chip__label__container--default--border-color--active: transparent;
}

/*ERROR-LIGHT*/
.label__container[data-color-type="error-light"] {
  --ez-label-chip__label--icon--primary: var(--color--red-600, #BD0025);
  --ez-label-chip__label__container--border-color-strokes: transparent;
  --ez-label-chip__label__container--background-color: var(--color--red-200, #F2CCD3);
  --ez-label-chip__label--text--primary: var(--color--red-600, #BD0025);
  --ez-label-chip__label__container--border-color-active: transparent;
  --ez-label-chip__label__container--default--background-color--active: var(--color--red-300, #E599A8);
  --ez-label-chip__label__container--default--color--active: var(--color--red-600, #BD0025);
  --ez-label-chip__label__container--default--border-color--active: transparent;
}


/*WARNING*/
.label__container[data-color-type="warning"] {
  --ez-label-chip__label--icon--primary: var(--color--yellow-900, #604701);
  --ez-label-chip__label__container--border-color-strokes: transparent;
  --ez-label-chip__label__container--background-color: var(--color--yellow-600, #EFB103);
  --ez-label-chip__label--text--primary: var(--color--yellow-900, #604701);
  --ez-label-chip__label__container--border-color-active: transparent;
  --ez-label-chip__label__container--default--background-color--active: var(--color--yellow-700, #BF8E02);
  --ez-label-chip__label__container--default--color--active: var(--color--yellow-900, #604701);
  --ez-label-chip__label__container--default--border-color--active: transparent;
}

/*WARNING-LIGHT*/
.label__container[data-color-type="warning-light"] {
  --ez-label-chip__label--icon--primary: var(--color--yellow-600, #EFB103);
  --ez-label-chip__label__container--border-color-strokes: transparent;
  --ez-label-chip__label__container--background-color: var(--color--yellow-200, #FDF6E4);
  --ez-label-chip__label--text--primary: var(--color--yellow-600, #EFB103);
  --ez-label-chip__label__container--border-color-active: transparent;
  --ez-label-chip__label__container--default--background-color--active: var(--color--yellow-300, #F6EB8A);
  --ez-label-chip__label__container--default--color--active: var(--color--yellow-600, #EFB103);
  --ez-label-chip__label__container--default--border-color--active: transparent;
}

/*SUCCESS*/
.label__container[data-color-type="success"] {
  --ez-label-chip__label--icon--primary: var(--color--gray-70, #FFFFFF);
  --ez-label-chip__label__container--border-color-strokes: transparent;
  --ez-label-chip__label__container--background-color: var(--color--green-600, #157A00);
  --ez-label-chip__label--text--primary: var(--color--gray-70, #FFFFFF);
  --ez-label-chip__label__container--border-color-active: transparent;
  --ez-label-chip__label__container--default--background-color--active: var(--color--green-700, #116200);
  --ez-label-chip__label__container--default--color--active: var(--color--gray-70, #FFFFFF);
  --ez-label-chip__label__container--default--border-color--active: transparent;
}

/*SUCCESS-LIGHT*/
.label__container[data-color-type="success-light"] {
  --ez-label-chip__label--icon--primary: var(--color--green-600, #157A00);
  --ez-label-chip__label__container--border-color-strokes: transparent;
  --ez-label-chip__label__container--background-color: var(--color--green-200, #C8E6C9);
  --ez-label-chip__label--text--primary: var(--color--green-600, #157A00);
  --ez-label-chip__label__container--border-color-active: transparent;
  --ez-label-chip__label__container--default--background-color--active: var(--color--green-300, #A5D6A7);
  --ez-label-chip__label__container--default--color--active: var(--color--green-600, #157A00);
  --ez-label-chip__label__container--default--border-color--active: transparent;
}

/*DISABLED*/
.label__container[data-color-state="disabled"] {
  border-color: var(--ez-label-chip__label__container-color--disabled);
  background-color: var(--ez-label-chip__label__container-color--disabled);
  color: var(--ez-label-chip__label__container--text--disabled);
  cursor: not-allowed;
  filter: none;
}

.label__container[data-color-state="disabled"] ez-icon {
  --ez-icon--color: var(--ez-label-chip__label__container--text--disabled);
}


:host .label__container[data-color-state="disabled"] ::slotted(ez-icon) {
  --ez-icon--color: var(--ez-label-chip__label__container--text--disabled);
}