@import (reference) '../style/index.less';

.container {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
    padding: @padding-small @padding-medium;
    border-bottom: 0px;
    background-color: @theme-color;
    color: @text-color;
    font-size: @font-size;
    & + div {
        margin-top: @margin-medium * 5;
    }
    @media @mobile {
        padding: @padding-small;
        flex-direction: column;
    }
}

.titleContainer {
    display: flex;
    width: 100%;
    align-items: center;
    @media @mobile {
        justify-content: space-between;
    }
}

.title {
    h4 {
        margin: @margin-zero;
        padding: @padding-zero @padding-small;
        color: inherit;
        transition: @transition-time color;
    }
    p {
        margin: @margin-zero;
        text-align: center;
    }
    &:hover {
        h4, p {
            color: #61afef;
        }
    }
}

.list {
    .flex-center();
    flex-wrap: nowrap;
    font-size: 1.4rem;
    ul {
        list-style: none;
        .flex-center();
        flex-wrap: nowrap;
        height: 8vh;
        margin: @margin-zero @margin-medium;
        padding: @padding-zero;
        @media @mobile {
            margin-top: @margin-small;
            margin-bottom: @margin-small;
        }
        li {
            margin: @margin-zero @margin-small;
            a {
                transition: @transition-time color;
                &:hover {
                    cursor: pointer;
                    color: #c678dd;
                }
            }
        }
    }
    @media @mobile {
        flex-direction: column;
        margin-top: @margin-small;
    }
}

.menuButton {
    display: none;
    @media @mobile {
        display: block;
        margin-left: @margin-medium;
        float: right;
        margin-right: @margin-small;
    }
}

.collapsedMenu {
    @media @mobile {
    display: none;
        transition: @transition-time max-height ease,
                    @transition-time margin ease,
                    @transition-time opacity ease;
    }
}

.expandedMenu {
    @media @mobile {
        opacity: .8;
        transition: @transition-time max-height ease,
                    @transition-time opacity ease;
    }
}

