#botao-marcar-como-lida {
    display: flex;
    padding: 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    background: var(--Brand-Background-Primary, #FFF);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
}

.texto-qtd-presentes {
    padding: 8px 0px;
    color: var(--Brand-Content-Primary, #334156);
    font-size: var(--Type-Font-Size-default, 16px);
    font-style: normal;
    font-weight: var(--Type-Font-Weight-lg, 700);
    line-height: var(--Type-Line-Height-medium, 24px);
}

.texto-tempo-notificacao {
    color: var(--Brand-Content-Primary, #334156);
    font-size: var(--Type-Font-Size-small, 14px);
    font-weight: var(--Type-Font-Weight-sm, 500);
    line-height: var(--Type-Line-Height-xsmall, 16px);
}

.texto-notificacao {
    color: var(--Brand-Content-Secondary, #556F97);
    font-size: var(--Type-Font-Size-medium, 14px);
    font-style: normal;
    font-weight: var(--Type-Font-Weight-sm, 400);
    line-height: var(--Type-Line-Height-small, 20px);
    display: flex;
    align-items: center;
    gap: 8px;
}

.elipse-notificacao {
    display: inline-flex;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

    .elipse-notificacao.nao-lida {
        background: var(--Positive-Content-Hover, #0CAD0F);
    }

    .elipse-notificacao.lida {
        background: var(--Positive-Content-Disable, #A0B4D1);
    }

.mensagem-notificacao {
    color: var(--Brand-Content-Action, #0C3BDD);
    font-size: var(--Type-Font-Size-medium, 14px);
    font-style: normal;
    font-weight: var(--Type-Font-Weight-lg, 700);
    line-height: var(--Type-Line-Height-small, 20px);
}

.texto-tipo-lista {
    color: var(--Brand-Content-Secondary, #556F97);
    font-size: var(--Type-Font-Size-small, 12px);
    font-style: normal;
    font-weight: var(--Type-Font-Weight-sm, 400);
    line-height: var(--Type-Line-Height-xsmall, 16px); /* 133.333% */
}

.texto-marcar-todas-lidas {
    color: var(--Brand-Content-Action, #0C3BDD);
    font-size: var(--Type-Font-Size-default, 16px);
    font-style: normal;
    font-weight: var(--Type-Font-Weight-lg, 700);
    line-height: var(--Type-Line-Height-medium, 24px); /* 150% */
    padding: 16px;
}

.nav-notificacoes {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Spacing-space-x1, 4px);
    align-self: stretch;
    padding-top: 16px;
    row-gap: 6px;
}

.botoes-notificacoes {
    display: flex;
    padding: 8px 0px;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

    .botoes-notificacoes button {
        display: flex;
        padding: 8px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        flex: 1 0 0;
    }

        .botoes-notificacoes button.active {
            border-radius: 200px;
            border: 1px solid var(--Semantica-Border-Default, #D2E1FF);
            background: var(--Semantica-Background-Pressed, #002776);
            color: var(--Semantica-Content-OnColor, #FFF);
            font-size: var(--Type-Font-Size-small, 12px);
            font-style: normal;
            font-weight: var(--Type-Font-Weight-lg, 700);
            line-height: var(--Type-Line-Height-xsmall, 16px); /* 133.333% */
        }

    .botoes-notificacoes button {
        border-radius: 200px;
        border: 1px solid var(--Semantica-Border-Default, #D2E1FF);
        background: var(--Semantica-Background-Primary, #FFF);
        color: #0C3BDD;
        font-size: var(--Type-Font-Size-small, 12px);
        font-style: normal;
        font-weight: var(--Type-Font-Weight-lg, 700);
        line-height: var(--Type-Line-Height-xsmall, 16px);
    }

.img-prod-notificacao {
    display: flex;
    height: 40px;
    padding: 26px 0px;
    align-items: center;
    gap: 10px;
    aspect-ratio: 1/1;
}

    .img-prod-notificacao img {
        border-radius: 8px;
        border: 2.298px solid var(--Brand-Border-Primary, #CEE2FF);
        /* TODO: procurar qual asset é -> background: url(<path-to-image>) lightgray 50% / cover no-repeat, var(--Brand-Border-Primary, #CEE2FF); */
        z-index: 2;
    }

        .img-prod-notificacao img.segunda-img {
            right: 22px;
            position: relative;
        }

    .img-prod-notificacao span.mais-produtos {
        border-radius: 8px;
        border: 2.298px solid var(--Brand-Border-Primary, #CEE2FF);
        background: var(--Brand-Border-Primary, #CEE2FF);
        width: 46px;
        height: 46px;
        right: 40px;
        position: relative;
        z-index: 3;
        color: var(--Brand-Content-Primary, #334156);
        font-size: var(--Type-Font-Size-medium, 14px);
        font-style: normal;
        font-weight: var(--Type-Font-Weight-lg, 700);
        line-height: var(--Type-Line-Height-small, 20px); /* 142.857% */
    }

.view-sem-notificacao-lida {
    display: flex;
    height: 100vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--Spacing-space-x1, 4px);
    align-self: stretch;
}

    .view-sem-notificacao-lida span {
        color: var(--Brand-Content-Secondary, #556F97);
        font-size: var(--Type-Font-Size-default, 16px);
        font-style: normal;
        font-weight: var(--Type-Font-Weight-lg, 700);
        line-height: var(--Type-Line-Height-medium, 24px); /* 150% */
    }

.texto-notificacao-sem-lidas {
    color: var(--Brand-Content-Secondary, #556F97);
    text-align: center;
    font-size: var(--Type-Font-Size-medium, 14px);
    font-style: normal;
    font-weight: var(--Type-Font-Weight-sm, 400);
    line-height: var(--Type-Line-Height-small, 20px);
}

.titulo-notificacoes {
    display: flex;
    padding: var(--Spacing-XSmall, 8px);
    align-items: center;
    gap: 12px;
    align-self: stretch;
}

    .titulo-notificacoes i {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        font-size: 22px;
    }

    .titulo-notificacoes span {
        color: var(--Semantica-Content-Primary, #222F43);
        font-size: var(--Type-Font-Size-default, 20px);
        font-weight: var(--Type-Font-Weight-lg, 700);
        line-height: var(--Type-Line-Height-medium, 24px); /* 150% */
    }


/*Input pesquisar produtos*/
.header__content:has(.header__right #labelPesquisarProduto.active) {
    gap: 0;
    width: fit-content;
}

#nomeTela {
    transition: opacity 0.3s ease;
}

    #nomeTela.hidden {
        opacity: 0;
        pointer-events: none;
    }

#labelPesquisarProduto {
    width: 0px;
    height: 40px;
    transition: all 0.3s ease;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

    #labelPesquisarProduto.active {
        width: calc(min(96vw, var(--max-page-width) - 80px));
        opacity: 1;
        pointer-events: auto;
    }

#botaoPesquisarProduto {
    display: initial;
    transition: display 0.3s ease;
}

    #botaoPesquisarProduto.hidden {
        display: none;
        pointer-events: none;
    }

#fecharLabelPesquisarProduto {
    position: absolute;
    right: 0;
    width: 48px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 0;
}

    #fecharLabelPesquisarProduto i {
        font-size: 14px;
    }