/*
Crafting Guide - stack.scss

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

.view__stack {
    font-family: $font-family-normal;
    display: table-row;

    & > div {
        display: table-cell;
        vertical-align: middle;
    }

    .quantity {
        .bubble {
            border: 0.1em solid $color-gray-light;
            border-radius: 1.5em;
            background: $color-ice;

            input {
                width: 3em;
                background: none;
                border: none;
                color: $color-background-panel;
                font-family: $font-family-normal;
                font-size: $font-size-normal;
                font-weight: bold;
                line-height: $font-size-normal;
                outline: none;
                text-align: center;
            }

            &.editable:hover, &.editing {
                background: $color-background-panel;

                input {
                    color: $color-text;
                    font-family: $font-family-input;
                    font-weight: normal;
                }
            }
        }
    }

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

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

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

    .action {
        text-align: right;

        button {
            position: relative; width: 3.0em; height: 3.0em;
            display: inline-block;

            border: 0;
            font-size: $font-size-small;
            margin: 0;
            outline: none;
            padding: 0;

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

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

                &:disabled {
                    background: url('/images/check_disabled.png') no-repeat center !important;
                    cursor: inherit;
                }

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

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

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

                &:disabled {
                    background: url('/images/down_disabled.png') no-repeat center !important;
                    cursor: inherit;
                }

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

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

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

                &:disabled {
                    background: url('/images/remove_disabled.png') no-repeat center !important;
                    cursor: inherit;
                }

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

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

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

                &:disabled {
                    background: url('/images/up_disabled.png') no-repeat center !important;
                    cursor: inherit;
                }

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