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

.view__step {
    display: flex;
    flex-direction: column;

    &:not(:first-child) {
        border-top: 1px solid $color-gray-light;
        margin-top: $size-margin-large;
        padding-top: $size-margin-small;
    }

    &:hover {
        & > .buttons {
            opacity: 1.0;
        }
    }

    h3 {
        margin-bottom: 1em;
    }

    .main_content {
        display: flex;

        .view__inventory {
            flex: 50%;
            margin-left: $size-margin-large;

            .buttons {
                display: none;
            }
        }

        .view__recipe {
            flex: 50%;
        }
    }

    .buttons {
        margin-top: $size-margin-large;

        opacity: 0;

        display: flex;

        .button {
            flex: 1 1 50%;

            &:not(:first-child) {
                margin-left: $size-margin-medium;
            }
        }

        a {
            border: 0;

            .bezel {
                border-top    : 3px solid $color-button-highlight;
                border-left   : 3px solid $color-button-highlight;
                border-bottom : 6px solid $color-button-shadow;
                border-right  : 3px solid $color-button-shadow;
            }
        }
    }

    &.complete {
        opacity: 0.25;

        h3 {
            text-decoration: line-through;
        }
    }
}

@include screen-size(mobile) {
    .view__step {
        .main_content {
            flex-direction: column-reverse;

            .view__inventory {
                flex: 0 0 auto;
                margin: $size-margin-large $size-margin-large 0 $size-margin-large;
            }

            .view__recipe {
                flex: 0 0 auto;
            }
        }

        .buttons {
            opacity: 1.0;

            .button {
                .full {
                    display: none;
                }
            }
        }
    }
}