/*
Crafting Table - crafting_table.scss

Copyright (c) 2014-2015 by Redwood Labs
All rights reserved.
*/

.view__crafting_table {
    min-height: 14em;
    width: 100%;


    .panel {
        position: absolute; top: 5em; right: 2em; bottom: 0; left: 2em;
        background: $color-background-panel;

        .prev {
            background: url('/images/arrow-left-disabled.png');
            position: absolute; top: 50%; left: 1em; height: 8em; width: 4em;
            @include transform(translateY(-50%));

            &.enabled {
                background: url('/images/arrow-left.png');
                cursor: pointer;

                &:hover { background: url('/images/arrow-left-hover.png'); }
            }
        }

        .input {
            position: absolute; top: 50%; left: 33%;
            @include transform(translate(-50%, -50%));

            .tool {
                position: absolute; right: 0; bottom: -2em; left: 0; height: 1.5em;
                text-align: center;

                p { font-weight: bold; }
            }
        }

        .output {
            position: absolute; top: 50%; right: 16.5%; height: 5.3em; width: 5.3em;
            @include transform(translate(-50%, -50%));

            background: $color-gray-faint;
            border: 0.2em solid $color-gray-medium;
            padding: 0.1em;

            a {
                position: absolute; top: 50%; left: 50%; height: 4.8em; width: 4.8em;
                @include transform(translate(-50%, -50%));
            }

            .multiplier {
                position: absolute; bottom: -3em; left: 0; right: 0; height: 1.5em;
                font-family: PressStart;
                font-size: $font-size-large;
                text-align: center;
            }

            .quantity {
                position: absolute; right: 0; bottom: 0;
                color: black;
                font-family: PressStart;
                font-size: $font-size-large;
            }

            .quantity + .quantity {
                color: white;
                right: 0.2em; bottom: 0.2em;
                z-index: 1
            }
        }

        .next {
            background: url('/images/arrow-right-disabled.png');
            position: absolute; top: 50%; right: 1em; height: 8em; width: 4em;
            @include transform(translateY(-50%));

            &.enabled {
                background: url('/images/arrow-right.png');
                cursor: pointer;

                &:hover { background: url('/images/arrow-right-hover.png'); }
            }
        }
    }
}