:host {
  /* general */
  /*@doc Define o tamanho da fonte do componente.*/
  --snk-pesquisa--font-size: var(--text--medium, 14px);
  /*@doc Define a família da fonte do componente.*/
  --snk-pesquisa--font-family: var(--font-pattern, Arial);
  /*@doc Define o peso da fonte do componente.*/
  --snk-pesquisa--font-weight: var(--text-weight--medium, 400);

  /* records */
  /*@doc Define a cor da fonte do indicador de registros do componente.*/
  --snk-pesquisa__records--color: var(--text--primary, #626e82);
  /* records */
  /*@doc Define a cor da fonte do indicador de registros do componente.*/
  --snk-pesquisa__records--color-secondary: var(--text--secondary, #626e82);
  /* records */
  /*@doc Define o espaçamento vertical do indicador de registros do componente.*/
  --snk-pesquisa__records--padding-vertical: var(--space--medium, 12px);

  /* content */
  /*@doc Define o espaçamento da direita no conteúdo do componente.*/
  --snk-pesquisa__content--padding-right: var(--space--small, 6px);

  /* buttons */
  /*@doc Define a cor do botão de pesquisa do componente.*/
  --snk-pesquisa__btn--color: var(--title--primary, #2B3A54);
  /*@doc Define a cor do botão de pesquisa do componente quando desabilitado.*/
  --snk-pesquisa__btn-disabled--color: var(--text--disable, #AFB6C0);
  /*@doc Define a cor do botão de pesquisa do componente quando o mouse está sobre ele.*/
  --snk-pesquisa__btn-hover--color: var(--color--primary, #4e4e4e);

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

  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.snk-pesquisa {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.snk-pesquisa__input {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding-top: 4px;
  padding-right: 4px;
}

.snk-pesquisa__input ez-icon {
  --ez-icon--color: inherit;

  /*public*/
  font-weight: var(--text-weight--large, 600);
}

.snk-pesquisa__content {
  display: flex;
  flex-direction: column;
  overflow-y: hidden;

  scrollbar-width: thin;
  /*public*/
  scrollbar-color: var(--snk-pesquisa__scrollbar--color-clicked) var(--snk-pesquisa__scrollbar--color-background);
  padding-right: var(--snk-pesquisa__content--padding-right);
  height: 100vh;
}

.snk-pesquisa__content::-webkit-scrollbar {
  /*public*/
  background-color: var(--snk-pesquisa__scrollbar--color-background);
  width: var(--snk-pesquisa__scrollbar--width);
  max-width: var(--snk-pesquisa__scrollbar--width);
  min-width: var(--snk-pesquisa__scrollbar--width);
}

.snk-pesquisa__content::-webkit-scrollbar-track {
  /*public*/
  background-color: var(--snk-pesquisa__scrollbar--color-background);
  border-radius: var(--snk-pesquisa__scrollbar--border-radius);
}

.snk-pesquisa__content::-webkit-scrollbar-thumb {
  /*public*/
  background-color: var(--snk-pesquisa__scrollbar--color-default);
  border-radius: var(--snk-pesquisa__scrollbar--border-radius);
}

.snk-pesquisa__content::-webkit-scrollbar-thumb:vertical:hover,
.snk-pesquisa__content::-webkit-scrollbar-thumb:horizontal:hover {
    /*public*/
    background-color: var(--snk-pesquisa__scrollbar--color-hover);
}

.snk-pesquisa__content::-webkit-scrollbar-thumb:vertical:active,
.snk-pesquisa__content::-webkit-scrollbar-thumb:horizontal:active {
    /*public*/
    background-color: var(--snk-pesquisa__scrollbar--color-clicked);
}

.snk-pesquisa__records-label{
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  font-family: var(--snk-pesquisa--font-family);
  font-weight: var(--snk-pesquisa--font-weight);
  font-size: var(--snk-pesquisa--font-size);
  padding-bottom: var(--snk-pesquisa__records--padding-vertical);
  padding-top: var(--snk-pesquisa__records--padding-vertical);
}

.snk-pesquisa__records-label.hidden{
  display: none;
}

.snk-pesquisa__records {
  color: var(--snk-pesquisa__records--color);
}

.snk-pesquisa__records-limit {
  color: var(--snk-pesquisa__records--color-secondary);
}

.snk-pesquisa__records-limit.hidden,
.snk-pesquisa__records.hidden {
  visibility: hidden;
}

.snk-pesquisa__btn {
  outline: none;
  border: none;
  background: none;
  cursor: pointer;

  /*public*/
  color: var(--snk-pesquisa__btn--color);
}

.snk-pesquisa__btn:disabled {
  cursor: unset;

  /*public*/
  color: var(--snk-pesquisa__btn-disabled--color);
}

.snk-pesquisa__btn:disabled:hover {
  cursor: unset;

  /*public*/
  color: var(--snk-pesquisa__btn-disabled--color);
}

.snk-pesquisa__btn:hover {
  /*public*/
  color: var(--snk-pesquisa__btn-hover--color);
}

.snk-pesquisa__cards-container{
  height: 100%;
  overflow-y: auto;
}
