:host {
  display: flex;
  flex-direction: column;
  height: 100%;

  /*@doc Define a família da fonte.*/
  --text-area--font-family: var(--font-pattern, Arial);
  /*@doc Define o posicionamento do label.*/
  --text-area__label--floating--top: var(--space--small, 6px);
  /*@doc Define o raio da borda do container*/
  --snk-filter-assistent-mode__container--border-radius: var(--border--radius-medium, 12px);
  /*@doc Define a cor de fundo do container.*/
  --snk-filter-assistent-mode__container--background: var(--background--medium, #f0f3f7);
  /*@doc Define a margem interna do container*/
  --snk-filter-assistent-mode__container--margin: var(--space--small, 6px) var(--space--medium, 12px);
}

.ez-box__container--external {
  /*private*/
  height: 100px;
  width: 100%;
  overflow-y: auto;

  /*public*/
  background-color: var(--snk-filter-assistent-mode__container--background);
  border-radius: var(--snk-filter-assistent-mode__container--border-radius);
}

.ez-box__container--internal {
  /*public*/
  margin: var(--snk-filter-assistent-mode__container--margin);
}

.ez-box__container--title{
  /*private*/
  display: block;
  user-select: none;

  /*public*/
  font-family: var(--text-area--font-family);
  font-size: var(--text--extra-small);
  color: var(--title--primary);
  top: var(--text-area__label--floating--top);
}

.ez-box__container--expression{
  /*private*/
  display: block;

  /*public*/
  font-family: var(--text-area--font-family);
  font-size: var(--text--medium);
  color: var(--title--primary);
  top: var(--text-area__label--floating--top);
}

.snk-personalized-filter__expression-input--line {
  /*private*/
  width: 100%;
  height: 2px; 

  /*public*/
  background-color: var(--snk-personalized-filter--background-color-line);
  margin-top: var(--snk-personalized-filter--margin-line);
  margin-bottom: var(--snk-personalized-filter--margin-line);
}