.header {
    display: flex;
    width: 100%;
    height: $header-height;
    color: var(--white);
    background: var(--gradient-header);

    h3,
    h6 {
        color: inherit;
    }
}

.mod-header-min-height {
    min-height: $header-line-height;
}

.header-section {
    &.mod-padded {
        padding: 0 25px;
    }

    &.mod-icon {
        width: $header-height;
        cursor: pointer;

        &:hover,
        &.open {
            background-color: var(--navy-blue-100);
        }
    }
}

.header-height {
    height: $panel-header-height;
}

.header-hamburger {
    padding: $header-hamburger-padding;
    background-color: transparent;
    border: none;
    outline-width: 0;
    cursor: pointer;
    opacity: $transparency-2;
    transition: opacity $navigation-toggle-duration ease-in-out;

    svg {
        fill: var(--white);
    }
}

.header-hamburger-opened {
    opacity: $transparency-4;
    transition: opacity $navigation-toggle-duration ease-in-out;
}