@import 'global-variables';

%general-hamburger-span {
    display: block;
    height: $hamburger-line-height;
    width: $hamburger-width;
    transition: $luxbar-transition;
}

%hamburger-lines {
    span {
        background-color: transparent;

        &::before,
        &::after {
            margin-top: 0;
        }
    }
}

.#{$luxbar-css-prefix}-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: $luxbar-height;
}

.#{$luxbar-css-prefix}-menu-left {
    .#{$luxbar-css-prefix}-navigation,
    .#{$luxbar-css-prefix}-header {
        justify-content: flex-start;
    }
}

.#{$luxbar-css-prefix}-menu-right {
    .#{$luxbar-css-prefix}-hamburger {
        margin-left: auto;
    }
}

.#{$luxbar-css-prefix}-brand {
    font-size: 1.6em;
    padding: $luxbar-padding;
}

.#{$luxbar-css-prefix}-menu {
    min-height: $luxbar-height;
    transition: $luxbar-transition;
    width: 100%;
}

.#{$luxbar-css-prefix}-navigation {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.#{$luxbar-css-prefix}-menu,
.#{$luxbar-css-prefix}-item {
    a {
        text-decoration: none;
        color: inherit;
        cursor: pointer;
    }
}

.#{$luxbar-css-prefix}-item {
    height: $luxbar-height;

    a {
        padding: $luxbar-padding;
        display: block;
    }
}

.#{$luxbar-css-prefix}-hamburger {
    padding: $luxbar-padding;
    position: relative;
    cursor: pointer;

    span {
        @extend %general-hamburger-span;

        &::before,
        &::after {
            @extend %general-hamburger-span;
            content: '';
            position: absolute;
        }

        &::before {
            margin-top: -8px;
        }

        &::after {
            margin-top: 8px;
        }
    }
}

.#{$luxbar-css-prefix}-checkbox {
    display: none;

    &:not(:checked) ~.#{$luxbar-css-prefix}-menu {
        overflow: hidden;
        height: $luxbar-height;
    }

    &:checked ~.#{$luxbar-css-prefix}-menu {
        transition: height $luxbar-transition;
        height: 100vh;
        overflow: auto;

        li {
            .#{$luxbar-css-prefix}-hamburger {
                @extend %hamburger-lines;
            }
        }
    }
}

.dropdown {
    position: relative;
    height: auto;
    min-height: $luxbar-height;

    &:hover > ul {
        position: relative;
        display: block;
        min-width: 100%;
    }

    > a {
        &::after {
            $expand-arrow-height: 5px;

            position: absolute;
            content: '';
            right: 10px;
            top: $luxbar-height / 2 - $expand-arrow-height + 1px;
            border-width: $expand-arrow-height $expand-arrow-height 0;
            border-color: transparent;
            border-style: solid;
        }
    }

    > ul {
        display: block;
        overflow-x: hidden;
        list-style: none;
        padding: 0;

        .#{$luxbar-css-prefix}-item {
            min-width: 100%;
            height: $luxbar-height / 2;
            padding: 5px 10px 5px 40px;

            a {
                min-height: $luxbar-height / 2;
                line-height: $luxbar-height / 2;
                padding: 0;
            }
        }
    }
}
