@import '../environment';

body > header
{
    .close
    {
        @include baseline-box(12px, steps(2), 0.7px, 11px, 13px);

        position: absolute;
        z-index: 1;
        top: 0;
        right: 0;

        padding-left: $gutter;
        padding-right: $gutter;

        color: $color-text-darker;
        text-decoration: none;

        &:hover,
        &:focus
        {
            color: $color-link-normal;
        }

        .svg
        {
            margin-left: steps(2);

            > svg
            {
                width: steps(2.5);
            }
        }
    }

    @include for-at-least-normal-tablets
    {
        z-index: 1;

        .logo
        {
            position: relative;
            top: 0;
            left: 0;

            a
            {
                padding: steps(3) ($gutter * 2);
            }
        }

        .close
        {
            @include baseline-box(16px, steps(3), 0.9px, steps(3), steps(3));

            padding-left: $gutter * 2;
            padding-right: $gutter * 2;

            white-space: nowrap;

            .svg
            {
                margin-left: steps(2.5);
                vertical-align: top;
                position: relative;
                top: 3px;

                > svg
                {
                    width: steps(3);
                }
            }
        }
    }
}

body > main
{
    margin: 0;

    nav.products
    {
        @include content-padding;

        position: absolute;
        left: 0;
        right: 0;

    	overflow-y: auto;

        li > a
        {
            @include baseline-box(16px, steps(2.5), 0.7px, steps(1), steps(0.5));

            display: block;
            padding-left: $gutter;
            padding-right: $gutter;

            font-weight: bold;
            color: $color-text-darker;
            text-decoration: none;

            &:hover,
            &:focus
            {
                color: $color-brand-normal;

                .svg
                {
                    color: inherit;
                }
            }
        }

        .svg.product
        {
            color: $color-brand-darker;
            text-align: left;
        }

        .note
        {
            @include small-text;

            margin-top: steps(1);

            color: $color-text-lighter;
        }
    }

    @include for-at-most-small-tablets
    {
        nav.products
        {
            display: flex;
            flex-direction: column;

        	height: calc(100% - #{steps(6)});

            background: $color-background-lightest;

            ul
            {
                margin-top: steps(4);
                margin-bottom: steps(4);

                border-bottom: 1px solid $color-border-normal;

                > li
                {
                    @include clickable;

                    padding: steps(2) steps(2) steps(1.5) steps(8);
                    border: solid $color-border-normal;
                    border-width: 1px 1px 0;

                    &.contacts
                    {
                        display: none;
                    }

                    .svg.product
                    {
                        float: left;
                        margin-left: steps(-5.5);
                        margin-right: steps(2.5);

                        &, > svg
                        {
                            width: steps(3);
                            height: steps(3);
                        }
                    }

                    .note
                    {
                        margin-top: steps(0.5);
                    }

                    > a
                    {
                        @include baseline-paddings(16px, steps(2.5), 0, 0);

                        padding-left: 0;
                        padding-right: 0;
                        margin-top: -1px;
                    }
                }
            }
        }

        .tools
        {
            margin-top: auto;
        }
    }

    @include for-at-least-normal-tablets
    {
        nav.products
        {
        	height: calc(100% - #{steps(9)});
            padding: 0;

            ul
            {
                display: flex;
                flex-wrap: wrap;
            }

            li
            {
                @include clickable;
                @include transition("background");

                flex: 0 1 auto;

                width: 33.33%;
                min-height: steps(31);
                padding: steps(3) ($gutter * 2);
                border: solid $color-border-normal;
                border-width: 0 1px 1px 0;

                &:hover
                {
                    background: $color-background-lighter;
                }

                &.contacts
                {
                    display: flex;
                    padding: 0;
                }

                > a
                {
                    @include serif-font-family;
                    @include baseline-box(22px, steps(3), 0.5px);

                    padding-left: 0;
                    padding-right: 0;
                }
            }

            .svg.product
            {
                display: block;
                margin-bottom: steps(5);
            }

            aside.contact-banner
            {
                @include full-column;

                padding: steps(2) steps(4) steps(3);
                margin: 0;

                > .heading
                {
                    @include baseline-box(22px, steps(3), -0.1px);
                }

                p > a::after
                {
                    content: none;
                }

                p.primary
                {
                    margin: steps(1) 0;
                }

                p.additional
                {
                    .customer-centers
                    {
                        color: $color-link-normal;
                    }
                }
            }
        }

        .tools
        {
            display: none;
        }
    }

    @include for-desktops
    {
        nav.products aside.contact-banner
        {
            padding-top: steps(3);

            p.primary
            {
                margin: steps(4) 0 steps(2);
            }
        }
    }

    @include for-normal-desktops
    {
        nav.products li
        {
            width: 25%;
        }
    }
}
