:host {
    /*@doc Define a altura do container da barra de progresso.*/
    --ez-progress-bar-container-height: var(--space--16, 16px);

    /*@doc Define o arredondamento da barra de progresso e de seu container.*/
    --ez-progress-bar-radius: var(--border--radius-10, 10px);

    /*@doc Define a cor de fundo do container da barra de progresso.*/
    --ez-progress-bar-container-background: var(--background--medium, #F0F3F7);

    /*@doc Define a cor de fundo do container da barra de progresso.*/
    --ez-progress-bar-container-border: 1px solid var(--color--strokes, #DCE0E8);

    /*@doc Define a altura da barra de progresso interna.*/
    --ez-progress-bar-height: var(--space--12, 12px);

    /*@doc Define a altura da barra de progresso.*/
    --ez-progress-bar-background: var(--color--primary, #008561);

    /*@doc Define o tamanho da fonte do header.*/
    --ez-progress-bar-font-size: var(--text--medium, 14px);

    /*@doc Define a cor do texto do label.*/
    --ez-progress-bar-header-color: var(--color--ocean-green-1000, #00281D);

    /*@doc Define o espaçamento entre o header e a progressbar.*/
    --ez-progress-bar-gap: var(--space--6, 6px);

    /*@doc Define a cor do texto do help text.*/
    --ez-progress-bar-help-text-color: var(--color--ocean-green-1000, #00281D);

    /*@doc Define a cor do texto do help text.*/
    --ez-progress-bar-help-text-font-size: var(--text--small, 12px);


    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--ez-progress-bar-gap);
}


.ez-progress-bar__header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: var(--ez-progress-bar-header-color);
    font-size: var(--ez-progress-bar-font-size);
}

.progress-bar__container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
    height: var(--ez-progress-bar-container-height);
    border-radius: var(--ez-progress-bar-radius);
    background: var(--ez-progress-bar-container-background);
    border: var(--ez-progress-bar-container-border);
    padding: var(--space--2, 2px);
}

.progress-bar__content {
    height: var(--ez-progress-bar-height);
    background: var(--ez-progress-bar-background);
    border-radius: var(--ez-progress-bar-radius);
}

.ez-progress-bar__help-text {
    color: var(--ez-progress-bar-help-text-color);
    font-size: var(--ez-progress-bar-help-text-font-size);
}