/*
 * Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 *     http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

table.paramsTable {
    border-collapse: collapse;
    border: none;
    margin: 6px 0;
    width: 100%;

    td {
        border: none;
        height: 27px;
        line-height: 27px;
    	color: #bfbfbf;
        font-weight: normal;
    	font-size: 12px;
        padding: 1px 4px 1px 2px;
        text-shadow: 0px -1px 0 rgba(0, 0, 0, 0.8);
        vertical-align: middle;
        text-align: right;
        -webkit-font-smoothing: antialiased;
    }

    .field-column {
        text-align: left;
    }

    tr.field {

        .multi-control-table {
            width: 100%;
        }

        td.field-label {
            padding: 0 6px 0 0;
            text-align: right;
            width: 75px;
            max-width: 75px;
            @include prefixProperty(text-overflow, ellipsis);
            overflow: hidden;
        }

        td.field-value-label {
            width: 65px;
            padding-right: 5px;
            text-align: left;
        }
    }

    tr.header {
        font-weight: bold;
        background: rgba(0, 0, 0, 0.2);
        color: white;
        text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
    }

    .param-color-preview {
        cursor: pointer;
        @include prefixProperty(appearance, none);
        width: 100%;
        height: 21px;
        margin: 10px 0 0 0px;
        border: 1px solid rgba(0,0,0,.8);
        border-radius: 3px;
        color: transparent;
        @include prefixProperty(box-shadow, inset 0 1px 2px rgba(0, 0, 0, 0.4));
    }

    .param-color-preview::-webkit-color-swatch-wrapper {
        display: none;
    }

    .warp-control {
        background-color: #202020;
        border-radius: 4px;
        border: 1px solid black;
        @include prefixProperty(box-shadow, inset 0 0 1px black);
    }

    input[type=range] {
        @extend .approx-slider, .approx-slider.dark;
        width: 98%;
    }

    input[type=range].vertical {
        @include prefixProperty(transform, rotate(90deg));
        @include prefixProperty(transform-origin, 0 50%);
        margin: 0 0 0 15px;
    }

    .value-label {
        text-align: left;
        margin: 0 0 0 3px; 
        padding: 0 3px 0 2px;
        text-shadow: 0 1px 0 #000;
        font-size: 1.1em;
        cursor: pointer;
        text-decoration: underline;
    }

    .value-editor {
        margin: 0 0 0 3px; 
        height: 21px; 
        @include prefixProperty(box-shadow, 0px 0px 3px 1px black);
        outline: none;
        border: none;
        width: 100%;
        padding: 0 3px;
        border-radius: 3px;
        background: rgba(255,255,255,.15);
        color: #fff;
        text-align: left;
    }
    .param-color-editor{
        @extend .value-editor;
        @include prefixProperty(transition, all 0.2s ease-out);
        padding: 0 3px 0 3px;
        width: 55px;
    }

    .multi-control-table.param-color {
        input[type='range'] {
            height: 5px;
        }
        .range-r {
            background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(245, 248, 250, 0.1))),
                        -webkit-gradient(linear, left top, right top, from(#000), to(#f00));
        }

        .range-g {
            background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(245, 248, 250, 0.1))),
                        -webkit-gradient(linear, left top, right top, from(#000), to(#0f0));
        }

        .range-b {
            background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(245, 248, 250, 0.1))),
                        -webkit-gradient(linear, left top, right top, from(#000), to(#00f));
        }

        .range-a {
            background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(245, 248, 250, 0.1))),
                        -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(#fff)),
                        -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.4)), to(rgba(245, 248, 250, 0.4))),
                        url(../img/color_bg.png);
        }
    }
}
