.Header {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 10;
    background-color: $color-header-background;
    box-shadow: inset 0 -1px 0 0 rgba(black, 0.25), 0 2px 0 rgba(black, 0.1);
    text-overflow: ellipsis;
    color: $color-header-content;
}

.Header-title {
    @include link-default(inherit, none);
    padding: 0.75rem 1rem;
    font-size: 1.125rem; // 18px
    line-height: (24 / 18);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.Header-button {
    @include border-inline(end, 1px solid rgba($color-header-content, 0.25));
    display: block;
    flex-shrink: 0;
    border: 0;
    height: 3rem;
    width: 3rem;
    touch-action: manipulation;
    color: inherit;
    cursor: pointer;

    &:hover {
        background-color: rgba($color-header-content, 0.05);
    }

    &:active {
        background-color: rgba($color-header-content, 0.1);
    }
}

.Header-navToggle {
    svg {
        display: none;
        margin: 0 auto;
        fill: $color-header-content;
    }
}

.Frame {
    .Header-navToggleIcon--open {
        display: block;
    }
}

.Frame.is-closed {
    .Header-navToggleIcon--open {
        display: none;
    }
    .Header-navToggleIcon--closed {
        display: block;
    }
}