// --------------------------------------------------------------------------------------------------------------------
// <copyright file="_overlays.scss" company="Devbridge Group LLC">
// 
// Copyright (C) 2015,2016 Devbridge Group LLC
// 
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU Lesser General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
// 
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
// 
// You should have received a copy of the GNU Lesser General Public License
// along with this program.  If not, see http://www.gnu.org/licenses/. 
// </copyright>
// 
// <summary>
// Better CMS is a publishing focused and developer friendly .NET open source CMS.
// 
// Website: https://www.bettercms.com 
// GitHub: https://github.com/devbridge/bettercms
// Email: info@bettercms.com
// </summary>
// --------------------------------------------------------------------------------------------------------------------
$ol-red: #d82636;

$border-button-separator: 1px solid #44a0f8;

$overlay-mange-controls: (
                ('addcontent', $bcms-content-add),
                ('sortcontent' $bcms-content-manage)
);

$overlay-control-buttons: (
                ('history', $bcms-overlay-history),
                ('edit', $bcms-overlay-edit),
                ('configure', $bcms-overlay-options),
                ('delete', $bcms-overlay-delete),
                ('edit-child', $bcms-overlay-edit-child)
);

//module content region
.bcms-on {
    .bcms-region-overlay {
        display: block;
    }
}

.bcms-region {
    &-overlay {
        @include position(absolute, null);
        border: $border-thin-blue-dashed;
        box-sizing: border-box;
        display: none;
        min-height: 35px;
        z-index: 100;

        &.bcms-show-overlay {
            background-color: $white;
            box-sizing: border-box;
            min-height: 93px;
            padding: 36px 0 10px;
        }
    }

    &-actions {
        @include position(absolute, -1px -1px null null);
        cursor: default;
        height: 26px;
        z-index: 10;
    }

    &-button {
        @include transition(all 200ms);
        background-color: $bg-blue;
        border-left: $border-button-separator;
        box-sizing: border-box;
        color: $white;
        cursor: pointer;
        float: left;
        font: {
            size: 12px;
            weight: 600;
        }
        height: 26px;
        line-height: 25px;
        padding: 0 10px;

        &:hover {
            background-color: darken($bg-blue, 5%);
            cursor: pointer;
        }
    }

    &-addcontent {
        border-left: 0;
        position: relative;

        &.bcms-active {
            background-color: darken($bg-blue, 10%);
        }
    }

    &-sortdone {
        background-color: $bg-blue;
        border-left: 0;

        &:hover {
            background-color: darken($bg-blue, 10%);
        }
    }

    &-sortcancel {
        background-color: $cp-gray;

        &:hover {
            background-color: darken($cp-gray, 10%);
        }
    }

    &-options-block {
        @include position(absolute, 100% 0 null null);
        display: none;
        white-space: nowrap;

        .bcms-active & {
            display: block;
        }
    }

    &-pick-editor {
        @include transition(all 200ms);
        background-color: darken($bg-blue, 10%);
        line-height: 18px;
        padding: 5px 20px;

        &:hover {
            background-color: $bg-dark;
        }
    }

    @each $name, $icon in $overlay-mange-controls {
        &-#{$name} {
            @include size(26px);
            background: $bg-blue url($icon) no-repeat center;
        }
    }
}

.bcms-content-overlay {
    display: none;
    position: relative;
    width: 100%;
    z-index: 5;

    @include virtual(before) {
        @include position(absolute, 0);
        background-color: rgba($bg-light, .2);
    }
}

.bcms-show {
    &-overlay {
        .bcms-sort-block {
            display: block;
        }
    }

    &-controls {
        .bcms-content-overlay {
            @include size(100%);
            display: block;
        }
    }
}

//module content sorting
.bcms-sort {
    &-block {
        display: none;
        height: 100%;
        position: relative;
        z-index: 5;
    }

    &-wrapper {
        background: $white url($bcms-overlay-drag) no-repeat 10px center;
        border: $border-form-element;
        box-sizing: border-box;
        color: $text-dark;
        cursor: move;
        height: 46px;
        margin: 5px 10px;
        overflow: hidden;
        padding: 0 10px 0 25px;

        &:first-of-type {
            margin-top: 0;
        }

        &.ui-sortable-helper {
            background: $sky-blue url($bcms-overlay-drag-active) no-repeat 10px center;
            border-color: $border-blue;
            box-shadow: 0 0 4px rgba($blue-main, .24);
            color: $text-blue;
        }
    }

    &-wrapper-placeholder {
        border: $border-form-element-dashed;
        box-sizing: border-box;
        height: 46px;
        margin: 0 10px 5px;
        position: relative;
        z-index: 10;
    }

    &-content {
        font: {
            size: 14px;
            weight: 600;
        }
        line-height: 44px;
        text-transform: capitalize;
    }
}

//module content action controls
.bcms-content {
    &-actions {
        @include position(absolute, -1px null null -1px);
        height: 42px;
    }

    &-button {
        @include transition(all 200ms);
        @include size(42px);
        background-color: $bg-blue;
        border-left: $border-button-separator;
        cursor: pointer;
        display: block;
        float: left;
        position: relative;

        &:first-child {
            border-left: 0;
        }

        &:hover {
            background-color: darken($bg-blue, 5%);
        }
    }

    @each $name, $icon in $overlay-control-buttons {
        &-#{$name} {
            @include virtual(after) {
                @include positioning($center: true);
                @include size(100%);
                background: url($icon) no-repeat center;
            }
        }
    }

    &-edit {
        &.bcms-active-draft {
            background-color: $ol-red;

            &:hover {
                background-color: darken($ol-red, 5%);
            }
        }
    }
}

.bcms-draggable-region {
    background-color: $white;
    border: $border-thin-blue-dashed;
    color: $text-blue;
    font: {
        family: $font-base-family;
        size: 14px;
        weight: 600;
    }
    line-height: 19px;
    margin: 10px;
    padding: 13px 15px 12px;
}
