@import '../_vars.less';
@import '../bs/variables.less';
@import '../bs/mixins.less';
@import '../fonts/material-icons.less';

@toolColor: #677A8F;
@toolColorHover: @MainBlueColor;

.photo {
    position: relative;
    padding: 7px 0.2% 0 0.5%;

    .spanner {
        height: 80px;
    }

    .help {
        display: block;
        margin-bottom: 5px;
        opacity: 0.8;
        transition: opacity 0.2s linear;

        &:hover {
            opacity: 1;
        }
    }

    .topInfo {
        position: relative;
        padding-right: 24px;

        > .photoAction {
            display: inline-block;

            .btn {
                min-width: 110px;
                margin-bottom: 4px;
            }
        }
    }

    .photoMsg {
        display: inline-block;
        margin: 0 0 3px;
        font-size: @font-size-small;
        font-weight: normal;
        cursor: default;
        white-space: normal;
    }

    a.msgLink {
        color: inherit;
        font-style: italic;
        padding: 0 2px;
    }

    .photoPanel {
        padding-right: 2px;
        margin-bottom: 3px;
    }

    .imgRow {
        text-align: center;
    }

    .imgSuperWrap {
        position: relative;
        display: inline-block;
        max-width: 100%;
        padding-right: 24px;
    }

    .imgMiddleWrap {
        position: relative;
        max-width: 100%;

        .photoLoading {
            position: absolute;
            display: none;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: fade(@body-bg, 85) url(/img/misc/load.gif) 50% 50% no-repeat;
        }

        .fragsWrap {
            position: static;
        }

        .photoFrag {
            position: absolute;
            display: none;
            text-decoration: none;
            cursor: pointer;
            border: 1px solid transparent;
        }

        &.fragSensitive {
            .photoFrag {
                display: block;
            }

            &:hover .photoFrag,
            .photoFrag.hl {
                .box-shadow(0 0 0 1px #000);
            }

            &:hover .photoFrag {
                border-color: #fff;
                background-color: rgba(255, 255, 255, 10%);
            }

            &:hover .photoFrag.hl,
            .photoFrag.hl {
                border-color: #ffbe00;
                background-color: transparent;
            }
            //Такая отмена стилей требуется IE9
            &.fragHover {
                &:hover .photoFrag,
                .photoFrag.hl {
                    .box-shadow(none);
                }

                &:hover .photoFrag {
                    border-color: transparent;
                    background-color: transparent;
                }

                &:hover .photoFrag.hl,
                .photoFrag.hl {
                    border-color: transparent;
                    background-color: transparent;
                }
            }

            &:hover .photoFrag:hover,
            &:hover .photoFrag.hl:hover {
                border-color: #fff !important;
            }
        }

        .popover {
            z-index: 10010;

            .popover-content {
                max-height: 195px;
                text-overflow: ellipsis;
            }
        }

        &.loading {
            .photoLoading {
                display: block;
            }

            .photoFrag {
                display: none;
            }
        }
    }

    .imgWrap {
        max-width: 100%;
        overflow: hidden;
    }

    .photoImg {
        display: block;
        max-width: 100%;
    }

    .toolsRht {
        position: absolute;
        top: 0;
        right: 0;
        width: 24px;
        opacity: 0.95;
        .transition(opacity 0.1s linear);

        &:hover {
            opacity: 1;
        }

        > .tool {
            position: relative;
            display: inline-block;
            width: 100%;
            margin-bottom: -4px;
            font-size: 12px;
            color: #f5f5f5;
            cursor: default;
            white-space: nowrap;
            text-decoration: none;
            background-color: @toolColor;
            transition: all 0.25s ease-out;

            &:hover {
                color: #fff;
                background-color: @toolColorHover;
            }

            .tltp-wrap {
                cursor: help;
            }
        }

        .type {
            .glyphicon {
                padding-top: 3px;
                font-size: 15px;
            }
        }

        .watched {
            padding-top: 2px;

            > .watch,
            > .glyphicon {
                padding: 1px 0;

                &:hover {
                    color: #fff;
                }
            }
        }
    }

    .toolsBtm {
        margin-top: 0;
        height: 17px;
        line-height: 17px;
        text-align: right;

        .toolsTxt {
            margin: 0 1px;
            vertical-align: middle;
            font-size: @font-size-mini;
            line-height: 17px;
            cursor: default;
        }

        .tltp-wrap,
        .sizeThis,
        .sizeStandard,
        .sizeOrigin {
            display: inline-block;
            white-space: nowrap;
        }

        .btn {
            height: 15px;
            margin: 0 1px 0 4px;
        }
    }

    .downloadByRole {
        color: #29c729;
    }

    /*
    * imgAreaSelect animated border style
    */
    .photoFragAreaSelect {
        &.imgareaselect-border1 {
            background: url(/img/misc/border-anim-v.gif) repeat-y left top;
        }

        &.imgareaselect-border2 {
            background: url(/img/misc/border-anim-h.gif) repeat-x left top;
        }

        &.imgareaselect-border3 {
            background: url(/img/misc/border-anim-v.gif) repeat-y right top;
        }

        &.imgareaselect-border4 {
            background: url(/img/misc/border-anim-h.gif) repeat-x left bottom;
        }
    }

    .imgareaselect-border1,
    .imgareaselect-border2,
    .imgareaselect-border3,
    .imgareaselect-border4 {
        opacity: 0.6;
    }

    .imgareaselect-handle {
        background-color: #fff;
        border: solid 1px #000;
        opacity: 0.6;
    }

    .imgareaselect-outer {
        background-color: #000;
        opacity: 0.6;
    }

    .imgareaselect-selection {
    }

    //Правая панель
    .rightPanel {
        position: relative;
        float: right;
        z-index: 2; //Чтобы был "сверху" комментариев
    }

    .rightrow {
        margin: 0 0 5px;

        &:last-child {
            margin-bottom: 0;
        }

        .lineBehind {
            margin-bottom: 1px;
        }
    }

    .tableUser {
        width: 100%;
        margin-top: 0;
        border-width: 0;
    }

    .avatar {
        display: inline-block;
        vertical-align: top;
        cursor: pointer;

        > img {
            width: 75px;
            height: 75px;
            opacity: 0;
        }
    }

    .userInfo {
        white-space: nowrap;
        overflow: hidden;

        .rank {
            width: 57px;
            height: 14px;
            margin: 0 0 3px 5px;
        }
    }

    .photoMap {
        height: 500px;
        margin-bottom: 1px;
    }

    .userRibbon {
        height: 60px;
        overflow: hidden;
        white-space: nowrap;
    }

    .photoTiles {
        height: auto;
        overflow: hidden;
        white-space: nowrap;

        .photoPreview {
            &:last-child {
                margin-right: 0 !important;
            }

            .status {
                bottom: 2px;
                font-size: @font-size-small;
            }
        }
    }

    .nearesTiles {
        display: flex;
        height: auto;
        flex-flow: row wrap;
        align-items: center;
        align-content: space-around;
        justify-content: space-around;
        overflow: hidden;

        .photoPreview {
            margin: 0 auto 7px;

            .status {
                bottom: 2px;
                font-size: @font-size-small;
            }
        }
    }

    .infoBlock {
        margin-bottom: 6px;
        word-wrap: break-word;

        > .info {
            &.title {
                font-weight: bold;
                font-size: 18px;
                line-height: 22px;
                text-rendering: optimizeLegibility;
            }

            .infoName {
                margin-right: 5px;
                font-weight: bold;
            }

            .direction-icon {
                // We use material design icons for directions.
                &:extend(.material-icons-feature);

                font-family: 'Material Icons Directions';
                position: relative;
                top: 2px;
            }
        }
    }

    .changed {
        color: #da8300;
    }

    .region {
        display: inline-block;
        white-space: nowrap;

        &.err {
            color: #e49f0d;
        }

        .region-type-stat {
            display: inline-block;
            margin: 0 4px 1px;
            padding: 1px 1px 0;
            cursor: default;
            line-height: 13px;
            color: @MainLigthColor;
            border-bottom: 1px solid transparent;

            > a {
                cursor: inherit;
                color: @MainLigthColor;
                text-decoration: none;
            }
        }

        .region-type-stat-clickable {
            cursor: pointer;

            &:hover {
                color: #fff;
                border-bottom-color: #fff;

                > a {
                    color: #fff;
                }
            }
        }
    }

    .regionEdit {
        margin-left: 3px;
        font-size: @font-size-mini;
        font-weight: bold;
        line-height: 19px;
    }

    .yregion {
        white-space: nowrap;

        > a {
            color: inherit;
        }
    }

    .rytltp {
        margin-bottom: 5px;
        transform: translate(-50%, 2px);

        &.tltp-hotizontal-left {
            transform: translate(0, 2px);
        }

        &.tltp-animate-move {
            transform: translate(-50%, -5px);

            &.tltp-hotizontal-left {
                transform: translate(0, -5px);
            }
        }

        &::before {
            height: 5px;
            bottom: -5px;
        }
    }

    .rytltp-wrap:hover {
        > .rytltp.tltp-animate-move {
            transform: translate(-50%, 2px);

            &.tltp-hotizontal-left {
                transform: translate(0, 2px);
            }
        }
    }

    .ytltp {
        margin-left: -6px;
        padding-left: 6px;
        text-align: left;

        &::after {
            transform: translateX(14px);
        }
    }

    .ytltpBetween {
        margin-left: -35px;
        padding-left: 6px;
        text-align: left;

        &::after {
            transform: translateX(35px);
        }
    }

    .ytltp2 {
        margin-left: -9.5px;
        padding-left: 6px;
        text-align: left;

        &::after {
            transform: translateX(18px);
        }
    }

    .photoData {
        &.editMode {
            .fieldWrap {
                position: relative;
                margin-top: 5px;
                .transition(margin-top 0.15s ease-in-out);

                > label {
                    position: absolute;
                    top: -11px;
                    left: 0;
                    color: #888;
                    opacity: 0;
                    font-size: @font-size-mini;
                    .transition(all 0.15s ease-in-out);

                    &.on {
                        color: #64ace5;
                    }
                }

                &.hasContent {
                    margin-top: 18px;

                    > label {
                        top: -15px;
                        opacity: 1;
                    }

                    > .form-control {
                        .box-shadow(none);
                    }
                }

                &.asrow {
                    line-height: 19px;
                }
            }

            .form-control {
                position: relative;
                padding: 1px 2px;
                height: 22px;
                color: #333;
                background-color: #f0f0f0;

                &.title {
                    height: 24px;
                    font-weight: bold;
                    font-size: 18px;
                    line-height: 24px;
                }

                &.year {
                    display: inline-block;
                    width: 38px;
                    padding: 0;
                    text-align: center;
                    vertical-align: top;
                }

                &:focus {
                    background-color: #fdfdfd;
                }

                &.direction {
                    // We use material design icons for directions.
                    &:extend(.material-icons-feature);

                    font-family: 'Material Icons Directions', sans-serif;
                }
            }

            .infoName {
                display: inline-block;
                margin-right: 8px;
                font-weight: bold;
                line-height: 20px;
            }

            .yearsEdit,
            .regions {
                display: inline-block;
            }

            .yearsEdit {
                margin-right: 10px;
            }

            .regions {
                &.loading {
                    padding-right: 72px;
                    background: url(/img/misc/load.gif) 100% 50% no-repeat;
                }
            }

            textarea.hasFocus {
                min-height: 60px;
            }

            select {
                margin-bottom: 4px;
                border-radius: 0;
                -webkit-appearance: none;

                &.empty {
                    color: #999;
                }

                &:focus {
                    background-color: #fdfdfd;
                }
            }

            .descInput {
                min-height: 40px;
                .transition(all 0.2s);

                &::-webkit-scrollbar-button:decrement {
                    height: 0;
                }
            }
        }
    }

    .mandatory:not(.hasContent) {
        .form-control {
            border-color: #e49f0d;
        }
    }

    .panel-block {
        display: block;
        padding: 0 4px;
        margin: 0;
        background-color: #f5f5f5;
        border: 1px solid #e2e2e2;
    }

    .commentsContainer {
        position: relative;
        clear: left;
        z-index: 1;
    }

    .watersingcontrol {
        position: relative;
        margin-top: 10px;

        &.deny {
            opacity: 0.6;

            &::after {
                content: '';
                position: absolute;
                top: -1px;
                left: 0;
                right: 0;
                bottom: -1px;
                z-index: @zindex-popover;
            }
        }
    }

    .typeSelect {
        display: inline-block;
        margin-top: -1px;
        vertical-align: top;

        > select.form-control {
            height: 26px !important;
            margin: 0 0 0 8px;
            padding: 0 5px !important;
            font-weight: bold;
        }
    }
}

@media (max-width: @screen-xs-max) {
    .photo {
        padding: 5px 2px 0;

        .rightPanel {
            float: none;
        }

        .commentsContainer {
            clear: both;
        }
    }
}
