$lrBorderWidth: 1px; // this mirrors the visualGuides.borderWidth JS variable
$lrMaskBg: whiten($pluginBorder, .95);
$lrMaskBgTransparent: rgba($lrMaskBg, 0.8);

.line-reader-mask {
    box-sizing: border-box;
    border: 0 solid $pluginBorder;
    background-color: $lrMaskBg;

    &.hidden {
        display: none;
    }

    &.resizing {
        background-color: $lrMaskBgTransparent;
        border-color: $pluginBorderTransparent;
    }

    &.resizer {
        z-index: 99999 !important;

        &.se {
            .resize-control {
                border-right: 2px solid $pluginLink;
                border-bottom: 2px solid $pluginLink;
                width: 40px;
                height: 40px;
            }
        }
    }

    &.border-top     { border-top-width: $lrBorderWidth; }
    &.border-right   { border-right-width: $lrBorderWidth; }
    &.border-bottom  { border-bottom-width: $lrBorderWidth; }
    &.border-left    { border-left-width: $lrBorderWidth; }

    &.ne { @include border-radius-top-right(5); }
    &.se { @include border-radius-bottom-right(5); }
    &.sw { @include border-radius-bottom-left(5); }
    &.nw { @include border-radius-top-left(5); }

    &.se {
        .resize-control {
            width: 20px;
            height: 20px;
            margin-bottom: 10px;
            margin-right: 10px;
            border-right: 1px solid $pluginLink;
            border-bottom: 1px solid $pluginLink;
            position: absolute;
            right: 0;
            bottom: 0;
            cursor: nwse-resize;
        }
    }

    &.e {
        .resize-control {
            position: absolute;
            width: 20px;
            height: 20px;
            bottom: -10px;
            left: -10px;
            border-right: 1px solid $pluginLink;
            border-bottom: 1px solid $pluginLink;
            cursor: nesw-resize;
        }
    }

    &.s {
        .resize-control {
            position: absolute;
            width: 20px;
            height: 10px;
            right: -10px;
            border-bottom: 1px solid $pluginLink;
        }
    }
}

// When moving the compound mask, this is the actual element being dragged (and only this one)
// It has some visual guides inside to simulate the actual inner window
.line-reader-overlay {
    box-sizing: border-box;
    opacity: 0;

    &.hidden {
        display: none;
    }

    &.moving {
        @include border-radius(5);
        &.n {
            max-height: none;
        }
    }

    &.moving, .inner-window {
        overflow: hidden;
        position: absolute;
        opacity: 1;
        background-color: transparent;
        border: $lrBorderWidth solid $pluginBorderTransparent;
    }

    .inner-window {
        box-sizing: content-box;
    }

    // the mask transparent background is actually the border of this element
    .mask-bg {
        box-sizing: border-box;
        border: 0 solid $lrMaskBgTransparent;
        background-color: transparent;
        position: absolute;

    }

    &.n {
        max-height: 30px;
        opacity: 1;

        .icon-mobile-menu {
            @include font-size(22);
            @include flex-container();
            @include vendor-prefix(justify-content, center, property);

            border-bottom: 1px solid $pluginLink;
            color: $pluginLink;
            position: absolute;
            left: 0;
            top: 0;
            height: 30px;
            width: 100%;
            z-index: 1;

            &:hover {
                color: $pluginLinkHover;
            }

            &:before {
                position: relative;
                top: 3px;
            }
        }
    }

    .icon-mobile-menu {
        display: none;
    }
}

// This drag handle allows to move the inner window
.line-reader-inner-drag {
    @include border-radius(3);
    @include flex-container();
    @include vendor-prefix(justify-content, center, property);
    text-align: center;
    padding-top: 3px;
    color: $pluginLink;

    &.hidden {
        display: none;
    }

    &:hover {
        background-color: whiten($pluginLink, .5);
        color: $pluginLinkHover;
    }

    &.moving {
        background-color: transparent;
        color: whiten($pluginLink, 0.6);
    }

    .icon {
        text-shadow: none !important;
        border-bottom-left-radius: 110px;
        border-bottom-right-radius: 110px;
        border: 1px solid $pluginLink;
        border-top: 0;
        width: 50px;
        height: 25px;
        position: relative;
        bottom: 10px;

        &:before {
            position: relative;
            top: 5px;
            left: 1px;
        }
    }
}

// The button to close the line reader
.line-reader-closer {
    @include font-size(22);
    cursor: pointer;
    color: $pluginLink;
    width: 12px;
    height: 12px;

    &:hover {
        color: $pluginLinkHover;
    }

    .icon {
        text-shadow: none !important;
    }
}