/*
Crafting Guide - feedback.scss

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

.view__feedback {
    position: fixed; top: 50%; left: -30em; width: 25em;
    @include transform(translateY(-50%));

    background: white;
    border: 0.2em solid $color-gray-dark;
    border-left: 0;
    border-right: 0.1em solid $color-gray-faint;
    box-size: border-box;
    box-shadow: 0.3em 0.3em 0.6em 0 $color-gray-shadow;
    padding: 2em;
    z-index: $layer-dialog;

    .error {
        background: white;
        clear: both;
        display: none;
        margin-top: 4em;
        text-align: center;

        p {
            color: $color-error-new;
            font-family: $font-family-normal;
            font-size: $font-size-small;
        }
    }

    .label {
        position: absolute; top: -0.2em; right: -4.5em; bottom:-0.2em; width: 4.5em;

        background: $color-gray-faint;
        border: 0.2em solid $color-gray-dark;
        border-bottom-right-radius: 1.0em;
        border-left: 0;
        border-top-right-radius: 1.0em;
        box-shadow: 0.3em 0.3em 0.6em 0 $color-gray-shadow;
        cursor: pointer;
        text-align: center;
        z-index: $layer-dialog - 1;

        img {
            position: absolute; top: 0.5em; left: 50%; height: 3.6em; width: 3.6em;
            @include transform(translateX(-50%));
        }

        p {
            position: absolute; top: 50%; left: 50%;
            @include transform(translateX(-50%) rotate(-90deg));

            font-family: $font-family-header;
            font-size: $font-size-x-large;
        }
    }

    button[name="send"] {
        float: right;
        margin-top: 0.5em;
    }

    input {
        position: relative; width: 100%;

        border: 1px solid $color-gray-light;
        box-sizing: border-box;
        margin-bottom: 1em;
        padding: 0.2em;
    }

    textarea {
        border: 1px solid $color-gray-light;
        position: relative; height: 11.5em; width: 100%;

        font-family: $font-family-input;
        font-size: $font-size-normal;
        resize: vertical;
    }
}