@title-color: #cc3366;
@line-image: "./line.png";

.translation-element-margin {
    margin: 0 0.3em;
    padding: 0;
}

.translation-button {
    width: 1.5em;
    height: 1.5em;
    border: 1px solid #ccc;
}

.elm-div {
    clear: both;
    overflow: auto;
    margin-bottom: 1em;
}

#entry {
    #entry-header {
        display: block;
        margin-bottom: 1em;

        #headword {
            font-size: 1.2em; 
            color: @title-color;
            font-weight: bold;
        }

        #grammar {
            color: #666666; 
            font-style: italic;
            margin-left: 1em;
        }

        #comment {
            background-color: #e9d76d;
            padding: 0.5em;
            float: right;
            cursor: pointer;

            &:before {
                content: "Opomba: "
            }
        }
    }

    #sense-container {
        border-top: 1px dotted #999999; 
        padding-top: 0.5em; 
        margin-top: 0.5em;

        .sense-num {
            float: left;
        }

        .sense {
            margin-left: 2em;

            .sense-definition {
                display: inline;
                cursor: pointer;
                margin: 0 0.2em;

                &:hover {
                    background-color: #CCCCCC;
                }
                &:after {
                    content: ")";
                }
                &:before {
                    content: "(";
                }

            }

            .sense-label {
                display: inline;
                cursor: pointer;
                margin: 0 0.2em;
                color: lightgreen;
                font-size: 0.8em;

                &:hover {
                    background-color: #CCCCCC;
                }
            }

            .translation-div {
                display: inline;

                .translation-tags {
                    display: inline;
                    color: green;
                    font-size: 0.6em;
                }

                .translation-text {
                    cursor: pointer;
                    display: inline;
                    color: blue;
                    .translation-element-margin();

                }

                select {
                    .translation-element-margin();
                    .translation-button();

                    border: 1px solid #ccc;
                    -webkit-appearance: none;
                    -moz-appearance: none;
                    appearance: none;

                    background-size: 100%;
                    background-repeat: repeat-y;
                    color: rgba(0,0,0,0);
                    background-image: data-uri(@line-image); //url(line.png);
                }

                &:hover {
                    background-color: #CCCCCC;
                }
            }

            .translation-add {
                .translation-element-margin();
                .translation-button();
            }
        }
        
        .example {
            .example-dot, .example-rest {
                float: left;
            }

            .example-arrow, .example-dot {
                margin-right: 1em;
            }
        }
    }
}

#xml-status {
    margin-left: 3em;
    height: 1em;
    margin-bottom: -1em;
    font-size: 1em;
}

.xml-status-bad { color: red; }
.xml-status-good { color: green; }
.xml-status-wait { color: yellow; }


#log  {
    overflow: scroll;
    border: 2px solid red;
    height: 10em;

    :nth-last-child(odd) {
        background-color: lightgray;
    }
}

// sweet modal edit entry

.tag-div {
    .tag-key {
        width: 10em;
        display: inline-block
    }

    .tag-input {
        margin-left: 1em;
        width: 9em;
    }

    select {
        width: 9em;
    }
}

#cluster-group-div {
    margin-top: 1em;
    span {
        width: 10em;
        display: inline-block
    }
}