:host {
    /* @doc Define a cor do título do item da lista. */
    --ez-list-item__title--color: var(--color--ocean-green-900, #003D2D);

    /* @doc Define a cor do texto do item da lista. */
    --ez-list-item__text--color: var(--color--ocean-green-1000, #00281D);

    /* @doc Define a cor do ícone do item da lista. */
    --ez-list-item__icon--color: var(--color--ocean-green-600, #008561);

    /* @doc Define a cor do background do item da lista. */
    --ez-list-item__background--color: var(--color--gray-80, #F9F9F9);

    /* @doc Define a cor da borda do item da lista com hover. */
    --ez-list-item__border--color-hover: var(--color--gray-100, #DEDEDE);

    /* @doc Define a largura mínima do componente. */
    --ez-list-item__min-width: 150;

    display: flex;
    flex-direction: column;
    background: var(--ez-list-item__background--color);
    padding: var(--space--12, 12px) var(--space--16, 16px);
    min-width: var(--ez-list-item__min-width);
    width: 100%;
    border-radius: var(--border--radius-16, 16px);
    outline: none;
    transition: box-shadow 0.2s;
    cursor: pointer;
}

:host(:hover) {
    outline: none;
    box-shadow: 0 0 0 1px var(--ez-list-item__border--color-hover);
}


.list-item__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}


.list-item__title{
    color: var(--ez-list-item__title--color);
    font-size: var(--text--large);
    font-weight: var(--font-weight--medium);
}

.list-item__text{
    font-size: var(--text--medium);
    font-weight: var(--font-weight--regular);
    color: var(--ez-list-item__text--color);
}


ez-icon {
    --ez-icon--color: var(--ez-list-item__icon--color);
}