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

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

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

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

    /*@doc Define o peso da fonte utilizada para o titulo do componente.*/
    --snk-configurator__title--font-weight: var(--text-weight--extra-large, 700);

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

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

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

    /*@doc Define o peso da fonte utilizada para o subtitulo do componente.*/
    --snk-configurator__subtitle--font-weight: var(--text-weight--large, 600);

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

.snk-configurator {
    display: grid;
    grid-template-rows: auto 1fr auto;
    max-height: 100%;
    width: 100%;
}

.snk-configurator__collsable-box-action {
  width: 100%;
}

.snk-configurator__action-buttons {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: var(--space--medium);
}

.snk-configurator__outline {
  display: flex;
  flex-direction: column;
  gap: var(--space--small);
  margin-top: var(--space--small);
  margin-bottom: var(--space--large);
}

@media screen and (min-width: 480px) {
    .snk-configurator {
        width: 359px;
        max-width: 359px;
    }
}

.snk-configurator__button-config {
    --ez-button--min-width: 100%;
}

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

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

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

.snk-configurator__subtitle {
    display: flex;
    margin: 0;

    /*public*/
    padding-top: var(--space--medium);
    padding-bottom: var(--space--small);
    color: var(--snk-configurator__subtitle--color);
    font-size: var(--snk-configurator__subtitle--font-size);
    font-family: var(--snk-configurator__subtitle--font-family);
    font-weight: var(--snk-configurator__subtitle--font-weight);
}

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

.snk-configurator__main {
    overflow-y: auto;
    scrollbar-width: thin;
    margin: var(--space--medium) 0;

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

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

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

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

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

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