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

.view__stack {
    // using table-row display type to allow the quantity to always line up, even when the length is different
    display : table-row;
    max-width: 100%;

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

        &:not(:last-child) {
            padding-bottom : $size-margin-xsmall;
        }
    }

    .quantity {
        padding-right : $size-margin-medium;
        position      : relative;
        text-align    : right;

        input {
            width: 4em;

            background  : none;
            border      : none;
            font-family : $font-family-text;
            font-size   : $font-size-large;
            text-align  : right;
        }

        .hover {
            $backgroundColor: fade-out($color-black, 0.25);

            display: none;
            position: absolute; left: 50%; top: -($font-size-large * 2);
            transform: translateX(-50%);

            background: $backgroundColor;
            color: $color-white;
            font-family: $font-family-control;
            font-size: $font-size-medium;
            padding: $size-margin-small;
            z-index: $layer-dialog;

            &:after {
                position: absolute; top: 100%; left: calc(50% - 9px); // $font-size-large / 2

                content: "";
                width: 0;
                height: 0;
                border-style: solid;
                border-width: $size-margin-medium $size-margin-medium 0 $size-margin-medium;
                border-color: $backgroundColor transparent transparent transparent;
            }
        }

        &:hover {
            .hover.enabled {
                display: block;
            }
        }
    }

    .icon {
        padding-right : $size-margin-small;

        img {
            height : $size-minecraft-block;
            width  : $size-minecraft-block;
        }
    }

    .name {
        padding-right : $size-margin-large;
        position: relative;
        width: 100%;

        a {
            // use absolute positioning to pull the name out of the layout so that a long name won't cause the row to
            // be too long. Instead, this element will truncate itself with an ellipsis.
            position: absolute; top: 50%; width: 100%;
            transform: translateY(-50%);

            font-family   : $font-family-text;
            font-size     : $font-size-medium;
            line-height   : $size-minecraft-block;
            overflow      : hidden;
            text-overflow : ellipsis;
            white-space   : nowrap;
        }
    }

    .action {
        padding-left : $size-margin-small;

        .button {
            width : $size-button-height;
        }
    }
}

// Editable ////////////////////////////////////////////////////////////////////////////////////////////////////////////

.view__stack.editable {
    .quantity {
        input {
            width : 3em;

            border-bottom : 1px dashed $color-gray-dark;
            font-family   : $font-family-input;
        }
    }
}

@include screen-size(mobile) {
    .view__stack.editable {
        .quantity {
            input {
                width : 1.5em;
            }
        }
    }
}
