// widgets-article.scss
// Widget styling for article edit and packaging screen
// ----------------------------------------------------------------------------------------
@import "~variables.scss";
@import "~superdesk-ui-framework/app/styles/_mixins.scss";

.widget-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    &.active-left {
        .page-content-container {
            left: $tablist-width + $tabpane-width + $article-tabpane-padding;
        }
        &.left-extended {
            .page-content-container {
                left: $tablist-width + $tabpane-extended-width + $article-tabpane-padding;
            }
        }
    }
    &.active-right {
        .page-content-container {
            right: $tablist-width + $tabpane-width + $article-tabpane-padding;
        }
        &.right-extended {
            .page-content-container {
                right: $tablist-width + $tabpane-extended-width + $article-tabpane-padding;
            }
        }
    }
}

.workqueue .widget-wrapper .right-tabpane {
    bottom: 30px;
}

.tabpane, .pinned-tab__wrapper {
    .sd-widget {
        width: auto;
        height: 100%;
        position: relative;
        border: 0;
        .widget-line {
            display: none;
        }
        .widget-header {
            height: 48px;
            box-sizing: border-box;
            .widget-icon {
                display: none;
            }
            .widget-title {
                line-height: 100%;
                font-size: 1.4rem;
                padding: 0 1rem;
                font-weight: 400;
            }
        }
        .widget__sliding-toolbar {
            @include sliding-toolbar;
            padding: 0 40px 0 16px;
        }
        .widget-actions {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: auto;
        }
        .widget-settings {
            top: 8px;
            right: 35px;
        }
        .widget-content {
            background-color: $sd-background;
            margin-top: 0;
            overflow: auto;
            bottom: 0;
            display: grid;
            grid-template-rows: auto 1fr auto;
            grid-template-columns: 1fr;
            fieldset {
                padding: 10px;
                &.fieldset--no-padding {
                    padding: 0;
                }
                .btn-group.pull-left {
                    margin-left: 0;
                }
            }
            span.chevron {
                background-color: $sd-background;
                ~ h6 {
                    background-color: $sd-background;
                }
            }
            .nav-tabs {
                padding: 0 6px;
                background-color: $white;
                @include box-shadow(0, 1px, 0, 0, rgba(0, 0, 0, 0.1));
            }
            .widget-content-padding {
                padding: 10px;
            }
            .widget-header__action {
                position: fixed;
                top: 106px;
                right: 61px;
                z-index: 999;
            }
        }
        .widget-content__header {
            grid-row: 1/2;
            grid-column: 1/2;
            position: relative;
        }
        .widget-content__main {
            grid-row: 2/3;
            grid-column: 1/2;
            overflow-x: hidden;
            overflow-y: auto;
        }
        .widget-content__footer {
            grid-row: 3/4;
            grid-column: 1/2;
            position: relative;
        }
    }

    .tabcontent-actions {
        position: absolute;
        top: 8px;
        right: 0;
        z-index: 100;

        .icn-btn {
            margin-left: auto;
            margin-right: 5px;
            transition: all .2s ease-in-out;

            &.active {
                color: $sd-blue;
                transform: rotate(90deg);
            }

            &:hover {
                border: 0;
            }
        }
    }

    sd-widget-react > div {
        display: contents;
    }
}

/*
    Alternative styles for .tabcontent-actions
    that are not using absolute positioning
*/
.sd-widget-pin {
    transition: all .2s ease-in-out;

    &.sd-widget-pinned i {
        color: $sd-blue;
        transform: rotate(90deg);
    }
}

.sd-widget.macros {
    .macro-option {
        margin-bottom: 20px;
    }
    .link-list .btn {
        display: block;
        width: 100%;
        margin-bottom: 10px;
    }
}