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

.view__crafting_table {
    display: flex;

    .input_inventory {
        flex: 1 1 100%;

        display:      flex;
        margin-right: $size-margin-large;
    }

    .grid_block {
        flex: 1 1 100%;

        display: flex;
        align-items: center;
        justify-content: center;

        .input_grid {
            flex: 0 0 auto;

            align-items    : center;
            display        : flex;
            flex-direction : column;

            .view__crafting_grid {
                flex: 0 0 auto;
            }

            .tool {
                margin-top : $size-margin-small;

                font-family : $font-family-text;
                font-size   : $font-size-medium;
            }
        }

        .output_slot {
            flex: 0 0 auto;
            margin-left: $size-margin-large;

            display         : flex;
            flex-direction  : column;
            justify-content : center;
            align-items     : center;

            .view__slot {
                border: $size-border-medium solid $color-gray-medium;
            }

            .multiplier {
                font-family : $font-family-header;
                font-size   : $font-size-large;
                margin-top  : $size-margin-medium;
            }
        }
    }

    .output_inventory {
        flex: 1 1 100%;
        display: flex;
        margin-left: $size-margin-large;
    }
}

@include screen-size(mobile) {
    .view__crafting_table {
        border-bottom: 1px solid $color-gray-light;
        padding-bottom: $size-margin-medium;

        flex-direction: column;
        align-items: center;

        .input_inventory {
            flex: 0 0 auto;
            margin-bottom: $size-margin-small;
        }
        
        .grid_block {
            flex: 0 0 auto;

            .tool {
                margin-bottom: $size-margin-medium;
            }
        }

        .output_inventory {
            flex: 0 0 auto;
            margin-left: 0;
        }

        .view__inventory {
            margin-left: $size-margin-medium;
            margin-right: $size-margin-medium;
        }
    }
}
