:host {
  display: block;

  /*@doc Define a largura do container.*/
  --snk-expression-group--container-condition--width: 184px;
  /*@doc Define a altura do container.*/
  --snk-expression-group--container-condition--height: 38px;
  /*@doc Define o tamanho da borda.*/
  --snk-expression-group--container-condition--border-radius: var(--border--radius-medium, 12px);

  /*@doc Define a altura do container.*/
  --snk-expression-group--container-option--width: 85px;
  /*@doc Define a cor da condition AND*/
  --snk-expression-group__container-condition--background-and: #66B6A0;
  /*@doc Define a cor da condition OR*/
  --snk-expression-group__container-condition--background-or: #EBC65E;

  /*@doc Define o padding da expression*/
  --snk-expression-group__container-expression--padding-left: 26px;

  /*@doc Define a cor de efeito de tracejado.*/
  --snk-expression-group__background-color-dashed: var(--background--body, #fafcff);

  --ez-text-input__margin-bottom: 0px;
}

.snk-expression-group__container-condition {
  width: var(--snk-expression-group--container-condition--width);
  height: var(--snk-expression-group--container-condition--height);
  border-radius: var(--snk-expression-group--container-condition--border-radius);
  z-index: var(--more-visible--2x, 3);
  padding: var(--space--nano, 2px);
}

.snk-expression-group__container-option {
  width: var(--snk-expression-group--container-option--width);
}

.snk-expression-group__container-condition[data-condition="AND"] {
  background-color: var(--snk-expression-group__container-condition--background-and);
}

.snk-expression-group__container-condition[data-condition="OR"] {
  background-color: var(--snk-expression-group__container-condition--background-or);
}

.snk-expression-group__container-expression{
  padding-left: var(--snk-expression-group__container-expression--padding-left);
}

.dashes{
  z-index: var(--visible, 1);
  background: var(--snk-expression-group__background-color-dashed);
  border-left: 2px dashed var(--text-secondary, #A2ABB9);
  position: absolute;
  width: 15px;
  height: 58px;
  margin-left: -15px;
  margin-top: -36.5px;
}

.horizontal-dashes {
  z-index: var(--more-visible, 2);
  border-bottom: 2px dashed var(--text-secondary, #A2ABB9);
  position: absolute;
  width: 15px;
  height: 54px;
  margin-left: -15px;
  margin-top: -33.5px;
}

.hidden{
  display: none;
}


