// Gridstack dropdowns
.grid-stack {

    .dropdown-grid-item {
        z-index: 1 !important;

        .grid-stack-item-content.grid-stack-item-content {
            overflow: inherit;
        }
    }
}

// Drag ui
.grid-stack > .grid-stack-item.ui-resizable-autohide:not(.ui-resizable-disabled) {

    &:hover {

        > .ui-resizable-handle {
            display: block !important;
        }
    }
}

.grid-stack .tile-app-slider-component,
.grid-stack .transparent-tile,
.grid-stack .tile-buttons-component {

    .grid-stack-item-content.card {
        @include vendor-property(box-shadow, none);
    }

    .grid-stack-item-content  {
        background-color: transparent;
    }

    .js-tile-body-embed-code {
        background-color: #fff;
    }

    // empty slider and news panel
    .empty-component {

        &.grid-stack-item-content  {
            background-color: #fff;
        }
    }
}

.grid-stack .tile-no-scroll .js-tile-body-container {
    overflow: hidden;
}

.grid-stack.grid-stack > .grid-stack-item > .grid-stack-item-content {
    overflow: visible;
}

.grid-stack > .grid-stack-item {
    > .ui-resizable-handle.ui-resizable-se {
        background-color: $gray-800;
        color: #fff;
        box-shadow: -1px 1px 3px 0 rgba(0,0,0,.45);
        transform: rotate(90deg);
        background-image: none;
        padding: 5px;
        height: auto;
        width: auto;
        margin: 0;
        border-top-right-radius: var(--theme-rounded-corners);
    }

    .tile-settings {
        width: 188px;
        position: relative;
        margin: 0 auto;
        display: none;
        z-index: 98;

        .tile-settings-title {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            padding: 0 35px;
            text-align: center;
            height: 38px;
            line-height: 38px;
            cursor: move;
            overflow: hidden;
            background-color: $gray-800;
            color: #fff;
            box-shadow: 0 2px 3px rgba(0,0,0,.45);
            text-overflow: ellipsis;
            white-space: nowrap;
        }


        // universal tile button styling
        .tile-buttons {
            position: absolute;
            color: #fff;
            padding: 7px 6px 8px;
            cursor: pointer ;

            ion-icon {
                vertical-align: middle;
            }
        }

        // settings tile button styling
        .tile-buttons.settings {
            &:hover {
                background-color: $gray-900;
            }

            &.js-no-settings {
                display: none;
            }
        }

        // delete tile button styling
        .tile-buttons.delete {
            right:  0;

            &:hover, &.delete-open {
                background-color: $red-600;
            }
        }


        .input-with-string {
            width: 35%;
            display: inline-block;
        }
    }

    &:hover .tile-settings,
    .show-handles,
    .settings-open,
    .delete-open {
        display: block;
        opacity: 1;
    }

    .drag {
        cursor: move;
        right:  0;
    }

    .settings {
        cursor: pointer ;
        left:  0;
    }
}

// Styling of component placeholder which shows when dragging componenets around
.grid-stack .grid-stack-placeholder {
    .placeholder-content {
        background: $gray-300;
        border: 2px dashed $gray-500;
        border-radius: var(--theme-rounded-corners);
    }
}

// Component picker popover
.grid-stack .add-tile-popover {
    max-width: 100%;
    width: 606px;
    height: 412px;
    padding: 0;

    .popover-body {
        padding: 0;
    }
}

// Sets color and border radius of card header based on theme variables
.pages-grid-wrapper .card.grid-stack-item-content {
    border-radius: var(--theme-rounded-corners);
    > .card-header, .card-header-calendar {
        background: var(--theme-panel-header-bg);
        color: var(--theme-panel-header-color);
        border-bottom-color: var(--theme-panel-header-border);
        border-top-left-radius: var(--theme-rounded-corners);
        border-top-right-radius: var(--theme-rounded-corners);
        font-size: inherit;
        font-weight: var(--font-weight-normal);
        line-height: $line-height-base;
    }
    .card-footer-pages {
        border-bottom-left-radius: var(--theme-rounded-corners);
        border-bottom-right-radius: var(--theme-rounded-corners);
    }
}

// Prevent panels overflow with multi-line titles
.grid-stack-item-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    & > * {
        -ms-flex: 0 1 auto; //ie 10-11 fix
    }
}

// Panels without titles
.grid-stack-item {
    $gridstack-rows: 20;
    $row-height: 0;

    .content-block {
        overflow: auto;
    }

    @for $i from 1 through $gridstack-rows {
        &[data-gs-height='#{$i}'] {

            .card-header:not(.hide-header) + .content-block {
                height: $row-height;
                $row-height: $row-height + 47px;
            }

            .hide-header + .content-block {
                height: $row-height;
                $row-height: $row-height + 20px;
            }
        }
    }
}

.grid-stack-item:hover {
    .drag-overlay {
        border-color: rgba(0,0,0,0.2);
        background-color: rgba(0,0,0,0.1);
        box-shadow: 0 0 5px  rgba(0,0,0,0.2);
    }
}

// DO NOT REMOVE - this fixes z-index problems with modal windows display inside components
.grid-stack.grid-stack.grid-stack > .grid-stack-item > .grid-stack-item-content {
    z-index: inherit !important;
}
// main panel width quick fix

.main-panel {

    @include respond-to(min-width, 980px) {
        width: 100%;
    }
}

@include media-breakpoint-down(sm) {
    .pages-grid-wrapper .grid-stack > .grid-stack-item > .grid-stack-item-content {
        left: 0;
        right: 0;
    }
}

//2 column width
.grid-stack-item[data-gs-width="2"] .pages-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));

    @include media-breakpoint-down(md) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    @include media-breakpoint-only(xs) {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    //Wide variant
    &.pages-card-grid-large {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        @include media-breakpoint-down(md) {
            grid-template-columns: repeat(1, minmax(0, 1fr));
        }
    }
}

//1 & 2 column width 6 grid
.grid-stack-item[data-gs-width="1"][data-gs-max-width="6"] .pages-card-grid,
.grid-stack-item[data-gs-width="2"][data-gs-max-width="6"] .pages-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    @media only screen and (max-width: 980px) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

//3 column width
.grid-stack-item[data-gs-width="3"] .pages-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));

    //Wide variant
    &.pages-card-grid-large {
        @include media-breakpoint-down(md) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
}

//3 column width 6 grid
.grid-stack-item[data-gs-width="3"][data-gs-max-width="6"] .pages-card-grid {
    @include media-breakpoint-down(lg) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    @media only screen and (max-width: 980px) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

//4 column width
.grid-stack-item[data-gs-width="4"] .pages-card-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));

    @include media-breakpoint-down(lg) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    //Wide variant
    &.pages-card-grid-large {
        grid-template-columns: repeat(4, minmax(0, 1fr));

        @include media-breakpoint-down(md) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
}

//4 column width 6 grid
.grid-stack-item[data-gs-width="4"][data-gs-max-width="6"] .pages-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

//5 column width
.grid-stack-item[data-gs-width="5"] .pages-card-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));

    @include media-breakpoint-down(lg) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

//6 column width
.grid-stack-item[data-gs-width="6"] .pages-card-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));

    @include media-breakpoint-down(lg) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

// Set all component width's layout on tablet and mobile.
.grid-stack-item.grid-stack-item[data-gs-min-width="1"] .pages-card-grid,
.grid-stack-item.grid-stack-item[data-gs-min-width="2"] .pages-card-grid {
    position: relative;

    @media only screen and (max-width: 768px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    //below 576px
    @include media-breakpoint-only(xs) {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}
