:host {
    /*background*/
    /*@doc Define o padding horizontal do componentes.*/
    --ez-tag--padding-x: var(--space--8, 8px);
    /*@doc Define o padding vertical do componente.*/
    --ez-tag--padding-y: var(--space--4, 4px);
    /*@doc Define a largura minima do componente.*/
    --ez-tag--min-width: var(--space--6, 6px);
    /*@doc Define a largura minima do componente.*/
    --ez-tag--min-height: var(--space--14, 14px);
    /*@doc Define o raio da borda do componente.*/
    --ez-tag--border-radius: var(--border--radius-24, 24px);
    /*@doc Define a cor de fundo.*/
    --ez-tag--background-color: var(--color--ocean-green-600, #008561);

    /*label*/
    /*@doc Define o peso da fonte do label.*/
    --ez-tag_label--font-weight: var(--font-weight--regular, 400);
    /*@doc Define o tamanho da fonte do label.*/
    --ez-tag_label--font-size: var(--font-size--default, 14px);
    /*@doc Define a cor da fonte do label.*/
    --ez-tag_label--color: var(--color--gray-70, #FFFFFF);
}

.tag {
    /*public*/
    background-color: var(--ez-tag--custom-background-color, var(--ez-tag--background-color));
    padding: var(--ez-tag--padding-y) var(--ez-tag--padding-x);
    border-radius: var(--ez-tag--border-radius);
    min-width: var(--ez-tag--min-width);
    min-height: var(--ez-tag--min-height);

    /*private*/
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

label {
    /*public*/
    font-weight: var(--ez-tag_label--font-weight);
    font-size: var(--ez-tag_label--font-size);
    color: var(--ez-tag_label--custom-color, var(--ez-tag_label--color));

    /*private*/
    font-family: var(--font--pattern, Arial);
    line-height: var(--ez-tag_label--font-size);
    text-align: center;
    line-height: normal;
}

.light-ocean-green {
    --ez-tag--background-color: var(--ez-tag--custom-background-color, var(--color--ocean-green-100));
    --ez-tag_label--color: var(--ez-tag_label--custom-color, var(--color--ocean-green-600));
}

.green {
    --ez-tag--background-color: var(--ez-tag--custom-background-color, var(--color--green-600));
    --ez-tag_label--color: var(--ez-tag_label--custom-color, var(--color--gray-70));
}

.light-green {
    --ez-tag--background-color: var(--ez-tag--custom-background-color, var(--color--green-200));
    --ez-tag_label--color: var(--ez-tag_label--custom-color, var(--color--green-600));
}

.yellow {
    --ez-tag--background-color: var(--ez-tag--custom-background-color, var(--color--yellow-600));
    --ez-tag_label--color: var(--ez-tag_label--custom-color, var(--color--yellow-900));
}

.light-yellow {
    --ez-tag--background-color: var(--ez-tag--custom-background-color, var(--color--yellow-200));
    --ez-tag_label--color: var(--ez-tag_label--custom-color, var(--color--yellow-800));
}

.red {
    --ez-tag--background-color: var(--ez-tag--custom-background-color, var(--color--red-600));
    --ez-tag_label--color: var(--ez-tag_label--custom-color, var(--color--gray-70));
}

.light-red {
    --ez-tag--background-color: var(--ez-tag--custom-background-color, var(--color--red-200));
    --ez-tag_label--color: var(--ez-tag_label--custom-color, var(--color--red-600));
}

.gray {
    --ez-tag--background-color: var(--ez-tag--custom-background-color, var(--color--gray-500));
    --ez-tag_label--color: var(--ez-tag_label--custom-color, var(--color--gray-100));
}

.light-gray {
    --ez-tag--background-color: var(--ez-tag--custom-background-color, var(--color--gray-100));
    --ez-tag_label--color: var(--ez-tag_label--custom-color, var(--color--gray-400));
}

.petroleum {
    --ez-tag--background-color: var(--ez-tag--custom-background-color, var(--color--petroleum-600));
    --ez-tag_label--color: var(--ez-tag_label--custom-color, var(--color--petroleum-200));
}

.light-petroleum {
    --ez-tag--background-color: var(--ez-tag--custom-background-color, var(--color--petroleum-100));
    --ez-tag_label--color: var(--ez-tag_label--custom-color, var(--color--petroleum-400));
}