@import "tools";

#nav-line {
    background-color: #e2e2e2;
    position: relative;

    @media screen and (min-width: 62.5em) {
        @include size-px(width, 975);
        margin: auto;
    }

    #show-menu {
        display: block;
        float: left;
        @include size-px(line-height, 13);
        @include size-px(padding-top, 18);
        @include size-px(padding-bottom, 18);
        @include size-px(padding-left, 13);
        @include size-px(padding-right, 13);
        color: #0c7076;
        @include size-px(font-size, 11);
        @include mono;

        .long {
            display: none;

            &:after {
                @include size-px(padding-left, 10);
                content: url("/static/img/arrow-gray.png");
                vertical-align: top;
            }
        }

        @media screen and (min-width: 20em) {
            .long { display: inline; }
            .short { display: none; }
        }

        @media screen and (min-width: 53em) {
            display: none;
        }
    }

    ul#menu {
        list-style: none;
        padding: 0;
        margin: 0;

        display: none;
        position: absolute;
        top: 49px;
        left: 0;
        right: 10px;

        @media screen and (min-width: 24em) {
            right: auto;
        }

        @media screen and (min-width: 53em) {
            display: block;
            position: static;
            @include size-px(margin-left, 6);
        }

        li.menu {
            background-color: #e2e2e2;

            @media screen and (min-width: 53em) {
                float: left;
            }

            a.menu {
                display: block;
                @include size-px(line-height, 13);
                @include size-px(padding-top, 18);
                @include size-px(padding-bottom, 15);

                @include size-px(border-bottom-width, 3);
                border-bottom-style: solid;
                border-bottom-color: #e2e2e2;
                
                @include size-px(padding-left, 13);
                @include size-px(padding-right, 13);
                color: #0c7076;
                @include size-px(font-size, 11);
                @include mono;
            }

            a.hidden-box-trigger:hover {
                border-bottom-color: white;
            }
        }
    }

    #lang-menu {
        display: block;
        float: right;

        @include size-px(padding-left, 25);
        @include size-px(padding-right, 20);
        background: #f7f7f7;
        @include mono;

        @media screen and (min-width: 15em) {
            position: relative;
        }

        #lang-button {
            display:block;
            @include size-px(line-height, 17);
            @include size-px(padding-top, 16);
            @include size-px(padding-bottom, 16);

            @include size-px(font-size, 10);
            color: #717171;

            .label {
                display: none;

                @media screen and (min-width: 62.5em) {
                    display: inline;
                }

                &:after {
                    @include size-px(padding-left, 10);
                    content: url("/static/img/arrow-gray.png");
                    vertical-align: top;
                }
            }

            .lang-flag {
                @include size-px(font-size, 13);
                @include size-px(line-height, 15);
            }
        }

        #lang-menu-items {
            z-index: 9999;

            button {
                @include mono;
                display: none;
                background: #f7f7f7;
                color: #6f6f6f;
                cursor: pointer;
                width: 100%;
                margin: 0;
                padding: 0;

                @include size-px(padding-top, 10);
                @include size-px(padding-bottom, 10);

                @media screen and (min-width: 62.5em) {
                    @include size-px(padding-top, 5);
                    @include size-px(padding-bottom, 5);
                }

                border-style: solid;
                border-color: #ddd;
                border-width: 0;
                @include size-px(border-bottom-width, 1);

                @include size-px(font-size, 13);

                &.active {
                    color: #000;
                }
            }
        }

        &:hover, &.hover {
            #lang-menu-items {
                position: absolute;
                padding: 0;
                left: 0;
                right: 0;

                @media screen and (min-width: 15em) {
                    left: auto;
                    @include size-px(width, 180);
                    @include size-px(top, 49);
                }
                @media screen and (min-width: 62.5em) {
                    width: 100%;
                }

                button {
                    display: block;
                }
            }
        }
    }
}