.header {
    border: none;
    border-radius: calc(0.5 * var(--unit));
    padding: 4px 6px;

    background-color: transparent;
    cursor: pointer;
    text-decoration: none;

    font-size: 16px;

    display: flex;
    align-items: center;
    gap: var(--unit);

    font-family: inherit;
}

.icon, .text {
    filter: grayscale(1) opacity(.6);
}

.icon {
    width: 22px;
    height: 22px;
}

.text {
    color: var(--black);
    font-weight: 500;
}

.text:empty {
    display: none;
}

@media screen and (max-width: 599px) {
    .text.long {
        display: none;
    }
}

@media screen and (max-width: 389px) {
    .text {
        display: none;
    }
}

.header.active,
:host([active]) .header {
    background-color: var(--black);
}



.header.active .icon,
.header.active .text,
:host([active]) .icon,
:host([active]) .text {
    filter: invert() brightness(20);
}

@media screen and (hover: hover) {
    .header:hover {
        background-color: var(--black);
    }

    .header:hover .icon,
    .header:hover .text {
        filter: invert() brightness(20);
    }
}

:host(.pulse) .header {
    animation: pulse-header-bg 450ms ease 10 alternate;
}

@keyframes pulse-header-bg {
    0% {background: transparent}
    100% {background: var(--yellow)}
}