:host {
  /*private*/
  display: flex;
  width: 100%;

  /*@doc Define a cor de fundo do componente.*/
  --snk-expression-item--background-color: var(--background--xlight, #fff);

  /* Spacing */
  /*@doc Define o espaçamento interno entre os itens*/
  --snk-expression-item__itens--padding: var(--space--small, 6px);

  /* Sizes */
  /*@doc Define o tamanho do campo operator*/
  --snk-expression-item__width--input-operator: 220px;
  /*@doc Define o tamanho do campo value*/
  --snk-expression-item__width--input-value: 240px;
  /*@doc Define o tamanho do campo value-variable*/
  --snk-expression-item__width--input-value-variable: 176px;

  /* Bordes */
  /*@doc Define o arredondamento das bordas*/
  --snk-expression-item--border-radius: var(--border--radius-medium, 12px);
  /*@doc Define a cor da borda.*/
  --snk-expression-item--border-color: var(--color--strokes, #DCE0E8);
  /*@doc Define largura e estilo da borda.*/
  --snk-expression-item--border-style: var(--border--small, 1px solid);

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

.box{
  /*private*/
  width: 100%;
  height: 56px;
  background: var(--snk-expression-item--background-color);

  /*public*/
  border: var(--snk-expression-item--border-color) var(--snk-expression-item--border-style);
  border-radius: var(--snk-expression-item--border-radius);
}

.box__container{
  /*private*/
  display: flex;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;

  /*public*/
  margin: var(--space--small, 6px);
}

.box__container--input-filter{
  width: 100%;
}

.box__container--input-operator{
  /*private*/
  display: flex;
  /*public*/
  width: var(--snk-expression-item__width--input-operator);
  min-width: var(--snk-expression-item__width--input-operator);
}

.box__container--input-value{
  /*private*/
  display: flex;
  /*public*/
  width: var(--snk-expression-item__width--input-value);
  min-width: var(--snk-expression-item__width--input-value);
}

.box__container--input-value-variable{
  /*private*/
  display: flex;
  /*public*/
  width: var(--snk-expression-item__width--input-value-variable);
  min-width: var(--snk-expression-item__width--input-value-variable);
}

.box__container--button-delete{
  display: flex;
}

.box__container > div {
  padding-left: var(--snk-expression-item__itens--padding);
  padding-right: var(--snk-expression-item__itens--padding);
}

.box__container--button-delete--icon {
  width: 42px;
  min-width: 42px;
}

.box__container--input-value-variable--icon{
  cursor: pointer;
}

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