/*
Crafting Guide - stack.scss

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

.view__stack {
    font-family: $font-family-normal;

    td {
        padding: 0.2em 0;
    }

    td.quantity {
        position: relative;
        width: 4em;

        input {
            position: absolute; top: 50%; height: $font-size-small; width: 100%;
            @include transform(translateY(-50%));

            border-radius: 0.75em;
            background: $color-ice;
            color: $color-background-panel;
            font-family: $font-family-normal;
            font-size: $font-size-normal;
            font-weight: bold;
            text-align: center;

            &.editable {
                &:focus {
                    background: $color-background-panel;
                    color: $color-text;
                    font-family: $font-family-input;
                    font-weight: normal;
                    outline: none;
                }

                &:hover {
                    background: $color-background-panel;
                    color: $color-text;
                    font-family: $font-family-input;
                    font-weight: normal;
                }
            }
        }
    }

    td.icon {
        width: 4.6em;
        padding: 0.2em 0.5em;

        img {
            width: 100%; height: auto;
            max-height: 4.8em;
            @include pixel-image;
        }
    }

    td.name a {
        color: $color-text;
        display: inline;
        font-size: $font-size-normal;
        text-decoration: none;

        &:hover {
            color: $color-active-hover;
            text-decoration: underline;
        }
    }

    td.action {
        text-align: right;
    }

    button.remove {
        opacity: 0;
        position: relative; width: 1.8em; height: 1.8em;
        background: url('/images/remove.png') no-repeat center;
        border: 0;
        outline: none;

        &:hover {
            background: url('/images/remove-hover.png') no-repeat center;
        }
    }

    &:hover {
        button.remove {
            opacity: 1;
        }
    }
}