@import "../vendor/bootstrap/variables.less";
@import "../vendor/bootstrap/mixins.less";
@import "../vendor/bootstrap-editable/bootstrap3-editable.less";

@import "include/variables.less";
@import "include/mixins.less";

div[data-container=editable-fields] {

    div[data-editable-field-inline-commands] {
        position: relative;
        a {
            cursor: pointer;
        }

        ul.ccm-edit-mode-inline-commands {
            right: 10px;
            top: -2px;
        }
    }
    div[data-editable-field-inline-commands]:hover,
    div[data-editable-field-inline-commands]:active {
        > .ccm-edit-mode-inline-commands {

        float: none;
        list-style-type: none;
        margin: 0px !important;
        .opacity(1);

        }
    }

    /*
     * Editable attribute hover background
     */
    .editable-attribute-wrapper {
        .editable-attribute-display-name {
            padding: 8px 0 8px 0;
            margin-bottom: 2px;
        }

        div[data-editable-field-inline-commands] {
            .editable-attribute-field-inline {
                padding: 8px;
                margin-bottom: 2px;

                &:hover {
                    background: #e7e7e7;
                    border-radius: 4px;
                    transition: background-color .1s linear;

                    .editable-empty {
                        color: #666;
                    }

                    ul.ccm-edit-mode-inline-commands {
                        opacity: 1;
                        background-color: transparent;
                        right: 15px;
                        top: 4px;
                        font-size: 16px;

                        li a {
                            width: 30px !important;
                            height: 30px !important;

                            &:hover {
                                color: #0088cc !important;
                                transition: background-color .1s linear;
                            }

                            i {
                                font-size: 16px !important;
                                top: 8px;
                                left: 9px;
                            }
                        }
                    }
                }
            }
        }
    }

    /**
     * Editable images
     */
    .editable-image-wrapper {
        position: relative;
        overflow: hidden;

        img {
            .border-radius(4px);
            border: 1px solid #08c;
            z-index: @index-level-editable-field;
        }

        input {
            .opacity(0);
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: @index-level-editable-field-proxy;
            cursor: pointer;
            width: 0px;
            height: 0px; // set in javascript automagically
        }
    }

}