// Place all the styles related to the editor controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

$margin: 20px;
$character-size: 32px * 5;
$left-pane-width: $character-size + $margin * 2;

html {
    -ms-touch-action: manipulation;
}

.dropdown-menu > li > a {
    cursor: default;
}

#messages {
    position: absolute;
    right: 20px;
    z-index: 999;
    max-height: 80%;
    overflow: auto;
    bottom: 20px;
    width: 25%;
}

.left-pane {
    position: relative;
    height: 100%;
    float: left;
    margin-left: -100%;
}

.right-pane {
    position: relative;
    height: 100%;
    width: 100%;
    float: left;
}

#modes-container {
    position: absolute;
    width: 100%;
    left: 0;
    top: 60px;
    right: 0;
    bottom: 0;

    .modes-tab-pane {
        position: relative;
        height: 98%;

        #block-tab-left-pane {
            width: $left-pane-width;

            #selectors-container {
                position: relative;
                margin-left: $margin;
                width: $character-size;
                height: 100%;
                overflow: hidden;

                ul.nav-pills {
                    margin: 0 0 4px 0;
                    font-size: 0.8em;
                    line-height: 1em;

                    li {
                        line-height: 12px;

                        a {
                            margin-right: 2px;
                            margin-tiop: 2px;
                            margin-bottom: 2px;

                            padding-top: 8px;
                            padding-bottom: 8px;
                            padding-right: 5px;
                            padding-left: 5px;

                            line-height: 12px;
                        }
                    }
                }

                #selectors-tab-content {
                    $border-size: 5px;
                    $border-color: #0088cc;

                    position: absolute;
                    width: $character-size + $margin * 3;
                    top: 32px;
                    left: 0;
                    right: 0;
                    bottom: -2px;
                    overflow-y: scroll;

                    .selector-tab {
                        .item {
                            position: relative;
                            width: $character-size;
                            height: $character-size;

                            a {
                                text-decoration: none;
                                cursor: pointer;
                                font-size: 1.5em;
                                vertical-align: middle;
                                display: table-cell;
                            }

                            .item-info {
                                position: absolute;
                                left: 0;
                                top: 0;
                                right: 0;
                                bottom: 0;
                                width: $character-size;
                                height: $character-size;

                                color: gray;

                                .name {
                                    position: absolute;
                                    left: $border-size * 2;
                                    top: $border-size * 2;

                                    font-size: 1.5em;
                                }

                                .attributes {
                                    position: absolute;
                                    left: $border-size * 2;
                                    bottom: $border-size * 2;

                                    font-size: 0.8em;
                                    line-height: 1.1em;
                                    text-align: left;
                                }

                                a.add-block-button {
                                    position: absolute;
                                    right: $border-size * 2;
                                    bottom: $border-size * 2;
                                    padding-left: 0.5em;
                                    padding-top: 0.5em;

                                    font-size: 2em;

                                    z-index: 1;
                                }

                                a.remove-button {
                                    position: absolute;
                                    right: $border-size * 2;
                                    top: $border-size * 2;
                                    padding-left: 0.5em;
                                    padding-bottom: 0.5em;

                                    z-index: 1;
                                }
                            }

                            a.character {
                                position: relative;
                                overflow: hidden;
                                display: table-cell;
                                text-align: center;
                                vertical-align: middle;

                                width: $character-size - $border-size * 2;
                                height: $character-size - $border-size * 2;

                                border: $border-size solid white;

                                img, div {
                                    margin: -$border-size;
                                }

                                img {
                                  max-width: $character-size;
                                  max-height: $character-size;
                                }
                            }

                            a.character:hover {
                                border: $border-size solid $border-color;
                            }

                            a#add-character-button.character {
                                text-align: center;
                                vertical-align: middle;
                                font-size: 1em;

                                border: $border-size dashed lightgray;

                                i {
                                    font-size: 2em;
                                }
                            }

                            a#add-character-button.character:hover {
                                border: $border-size dashed $border-color;
                            }
                        }
                    }
                }
            }
        }

        #block-tab-right-pane {
            #blockly-div {
                margin-left: $left-pane-width;
                position: absolute;
                left: 0;
                top: 0;
                right: $margin;
                bottom: 0;

                -ms-touch-action: none;

                svg.blocklySvg {
                    overflow: hidden;
                }
            }
        }

        #text-editor {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;

            font-size: 16pt;
        }
    }
}

#character-modal {
    $modal-frame-size: 1px;
    $modal-body-margin: 15px;

    $modal-margin: $modal-frame-size + $modal-body-margin;

    $preview-width: 320px;
    $preview-height: 240px;

    $attributes-height: 160px;

    $left-pane-width: $preview-width + 2px;
    $right-pane-width: $character-size * 3 + $modal-body-margin;

    $modal-width: $left-pane-width + $right-pane-width + $modal-margin * 2;
    $modal-height: $preview-height + 2px + $attributes-height + $modal-margin * 2;

    width: $modal-width;
    height: $modal-height;
    margin-left: -($modal-width / 2);

    .modal-body {
        position: relative;
        height: 100%;
        max-height: $modal-height - $modal-body-margin * 2;

        #character-modal-left-pane {
            width: $left-pane-width;
            height: $modal-height - $modal-body-margin * 2;
            overflow: hidden;

            #character-modal-preview {
                position: relative;

                width: $preview-width;
                height: $preview-height;
                background-color: white;
                border: 1px solid gray;
                overflow: hidden;

                #character-modal-character {
                    position: absolute;

                    -ms-touch-action: none;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }

            #character-modal-attributes {
                position: absolute;
                width: $preview-width;
                top: $preview-height + $modal-body-margin;
                left: 0;
                right: 0;
                bottom: 0;

                #character-modal-form {
                    margin-bottom: 0;

                    .control-group {
                        margin-bottom: 8px;

                        .control-label {
                            width: 40px;
                        }

                        .controls {
                            margin-left: 40px + 5px;

                            input[type=range] {
                                padding: 0;
                            }

                            span#character_angle_vector {
                                display: inline-block;
                            }
                        }
                    }
                }
            }
        }

        #character-modal-right-pane {
            height: $modal-height - $modal-body-margin * 2;

            overflow: hidden;

            #character-modal-costume-selector {
                margin-left: $left-pane-width;
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                width: $right-pane-width + $modal-body-margin * 2;
                overflow-y: scroll;

                ul.thumbnails {
                    margin: 0 0 10px 0;

                    li {
                        margin-left: $modal-body-margin;
                        margin-bottom: $modal-body-margin;

                        a.active {
                            background-color: #0088cc;
                        }
                    }
                }
            }
        }
    }
}