//
// Crafting Guide - header.scss
//
// Copyright © 2014-2017 by Redwood Labs
// All rights reserved.
//

.view__header {
    background: $color-gray-light;

    display        : flex;
    flex-direction : column;

    .top-row {
        display     : flex;
        align-items : center;

        a {
            flex         : 0 0 auto;
            height       : $size-minecraft-block * 1.5;
            width        : $size-minecraft-block * 1.5;
            margin-right : $size-margin-medium;

            img {
                position : relative;
                height   : $size-minecraft-block * 1.5;
                width    : $size-minecraft-block * 1.5;
            }
        }

        h1 {
            flex: 1 1 auto;
            white-space: nowrap;
        }

        .addthis_sharing_toolbox {
            flex         : 0 0 auto;
            min-height   : 37px; // actual size of addthis component
            min-width    : 144px;
            margin-right : $size-margin-small;

            &.placeholder {
                border     : 1px solid orange;
                text-align : center;

                &:before {
                    color       : orange;
                    content     : "ADD THIS";
                    font-family : $font-family-header;
                    font-size   : $font-size-large;
                    line-height : 37px;
                }
            }
        }
    }

    .divider {
        background : $color-planks url('/images/planks.png');

        align-items       : center;
        display           : flex;
        flex-wrap         : wrap;
        justify-content   : center;
        padding           : $size-margin-medium $size-margin-medium;
        padding-top       : 0;

        .button {
            flex-grow    : 1;
            flex-shrink  : 1;
            min-width    : 3 * $size-minecraft-block;
            max-width    : 5 * $size-minecraft-block;
            margin-top   : $size-margin-medium;
            margin-right : $size-margin-small;

            &:last-child {
                margin-right: 0;
            }
        }
    }

    .breadcrumb-bar {
        background: $color-screen;
        padding: 0 ($size-margin-medium + $size-margin-large);

        font-family: $font-family-control;
        font-size: $font-size-medium;
        line-height: $font-size-medium + 2 * $size-margin-small;

        display: flex;

        .breadcrumbs {
            flex: 1 1 75%;

            text-indent: -$size-margin-large;

            &:before {
                content: "⟩";
                margin-right: $size-margin-medium;
            }

            a {
                text-decoration: underline;
            }

            span {
                margin: 0 $size-margin-medium;
            }
        }

        .extra-nav {
            flex: 1 1 25%;
            align-self: flex-end;

            text-align: right;
        }
    }
}

@include screen-size(desktop) {
    .view__header {
        .top-row {
            a {
                img {
                    top    : -$size-minecraft-block * 0.5;
                    left   : -$size-minecraft-block * 0.5;
                    height : $size-minecraft-block * 2.0;
                    width  : $size-minecraft-block * 2.0;
                }
            }
        }
    }
}

@include screen-size(tablet) {
    .view__header {
        .top-row {
            h1 {
                font-size : $font-size-xlarge;
            }
        }
    }
}

@include screen-size(mobile) {
    .view__header {
        .top-row {
            display : none;
        }

        .divider {
            .button.login {
                display: none;
            }
        }

        .breadcrumb-bar {
            .extra-nav {
                display: none;
            }
        }
    }
}