.navbar-header {
    height: rem(72px);
    background-color: var(--white);
    position: sticky;
    top: 0;
    padding: rem(16px) rem(24px);
    z-index: 2;
}

.sidebar-toggle,
.sidebar-mobile-toggle {
    line-height: 1.2;
    color: var(--text-primary-light);

    .icon {
        font-size: rem(22px);
    }
}

.sidebar-toggle {
    display: none;
    @include media(xl) {
        display: inline-block;
    }

    &.active {
        .icon {
            &.non-active {
                display: none;
            }

            &.active {
                display: inline-block;
            }
        }
    }

    .icon {
        &.active {
            display: none;
        }
    }
}

.sidebar-mobile-toggle {
    display: inline-block;
    @include media(xl) {
        display: none;
    }
}

.navbar-search {
    position: relative;
    display: none;
    @include media(lg) {
        display: inline-block;
    }

    input {
        width: rem(388px);
        height: rem(40px);
        background-color: var(--neutral-50);
        border: 1px solid var(--input-form-light);
        @include border-radius(rem(8px));
        padding-block: rem(5px);
        padding-inline-start: rem(42px);
        padding-inline-end: rem(20px);
        color: var(--text-primary-light);

        &:focus {
            border-color: var(--brand);
        }
    }

    .icon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        inset-inline-start: rem(15px);
        font-size: rem(18px);
        color: var(--black);
    }
}

[data-theme-toggle] {
    font-size: 0;
    position: relative;

    &::after {
        position: absolute;
        content: "\f1bf";
        font-family: remixicon;
        font-style: normal;
        font-size: rem(20px);
        color: var(--text-primary-light);
    }

    &[aria-label="dark"] {
        &::after {
            content: "\ef6f";
            color: #fff;
        }
    }
}