:host {
    /*@doc Define o espaçamento utilizado no rodapé do componente.*/
    --snk-grid-config__footer--padding-top: var(--space--medium, 12px);

    /*@doc Define o espaçamento utilizado no centro do componente.*/
    --snk-grid-config__main--padding-right: var(--space--medium, 12px);

    /*@doc Define o espaçamento utilizado no seletor de abas do componente.*/
    --snk-grid-config__tabselector-container--padding: var(--space--medium, 12px);

    /*@doc Define o espaçamento utilizado à esquerda do botão de fechar do componente.*/
    --snk-grid-config__button-close--padding-left: var(--space--medium, 12px);

    /*@doc Define a cor do texto utilizado para o titulo do componente.*/
    --snk-grid-config__title--color: var(--title--primary, #2B3A54);

    /*@doc Define o estilo da fonte utilizada para o titulo do componente.*/
    --snk-grid-config__title--font-family: var(--font-pattern, "Roboto");

    /*@doc Define o tamanho da fonte utilizada para o titulo do componente.*/
    --snk-grid-config__title--font-size: var(--title--large, 20px);

    /*@doc Define o peso do texto utilizado para o titulo do componente.*/
    --snk-grid-config__title--font-weight: var(--text-weight--extra-large, 700);

    /*@doc Define o estilo da fonte utilizada para o subtitulo do componente.*/
    --snk-grid-config__subtitle--font-family: var(--font-pattern, "Roboto");

    /*@doc Define o tamanho da fonte utilizada para o subtitulo do componente.*/
    --snk-grid-config__subtitle--font-size: var(--text--medium, 14px);

    /* @doc Define o estilo do texto do grupo da lista. */
    --snk-grid-config__group--font-family: var(--font-pattern, "Roboto");

    /* @doc Define o tamanho do texto do grupo da lista. */
    --snk-grid-config__group--font-size: var(--text--medium, 14px);

    /* @doc Define o peso do texto do grupo da lista. */
    --snk-grid-config__group--font-weight: var(--text-weight--large, 600);

    /* @doc Define o espaçamento inferior do grupo da lista. */
    --snk-grid-config__group--padding-bottom: var(--space-small, 6px);

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

    display: flex;
    flex-direction: column;
    max-height: 100%;
    width: 100%;
}

.grid-config__body {
  overflow: auto;
}

.padding-right--medium {
    padding-right: var(--space--medium);
}

ez-list {
    height: 100%;
}

.height-calc {
    max-height: calc(100% - 24px);
}

.grid-config__footer {
    display: flex;
    justify-content: flex-end;
    width: 100%;

    /*public*/
    padding-top: var(--snk-grid-config__footer--padding-top);
}

.hidden {
    display: none;
}

.tabselector-container {
    /*public*/
    padding: var(--snk-grid-config__tabselector-container--padding) 0;
}

.button-close {
    /*public*/
    padding-left: var(--snk-grid-config__button-close--padding-left);
}

.title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.title {
    display: flex;
    margin: 0;
    line-height: normal;
    letter-spacing: 0em;
    text-align: left;

    /*public*/
    color: var(--snk-grid-config__title--color);
    font-size: var(--snk-grid-config__title--font-size);
    font-family: var(--snk-grid-config__title--font-family);
    font-weight: var(--snk-grid-config__title--font-weight);
}

.subtitle {
    /*public*/
    color: var(--text--primary);
    font-size: var(--snk-grid-config__subtitle--font-size);
    font-family: var(--snk-grid-config__subtitle--font-family);
}

.grid-config__main {
    overflow-y: auto;
    scrollbar-width: thin;
    width: 100%;
    padding-bottom: 20px;

    /*public*/
    scrollbar-color: var(--snk-grid-config__scrollbar--color-clicked) var(--snk-grid-config__scrollbar--color-background);
}

.group-name {
    /*public*/
    font-family: var(--snk-grid-config__group--font-family);
    font-size: var(--snk-grid-config__group--font-size);
    font-weight: var(--snk-grid-config__group--font-weight);
    padding-bottom: var(--snk-grid-config__group--padding-bottom);
}