@use "sass:math";

/*
  Gridstack layout CSS
*/
.grid-stack {
    margin-left: -$spacing-base;
    margin-right: -$spacing-base;

    // but pages that haven't been converted need to have to reverted background
    > .clearfix {
      margin-left: $spacing-base;
      margin-right: $spacing-base;
    }

    .grid-stack-placeholder > .placeholder-content {
        inset: 0px !important;
        background-color: $gray-100;
        border-color: $draggable-border-color !important;
    }
}

.gridstackblock.card {
    margin-bottom: unset;
    overflow: hidden;
}

.grid-stack > .grid-stack-item > .grid-stack-item-content {
    overflow: hidden !important;
    touch-action: auto !important;
    margin-right: 10px !important;
    margin-left: 10px !important;
}

// take away the move cursor when page in display mode
#view .ui-draggable {
    cursor: default;
}

.block,
.grid-stack-item-content {
    &.draft {
        background-color: $state-warning-bg !important;
        > div.blockinstructions fieldset.pieform-fieldset {
            legend a.linkinstructions,
            div.fieldset-body {
              background-color: $state-warning-bg !important;
              color: $theme-text-color;
            }
        }
    }
}

.blockinstructions legend a {
   outline: 0;
}

.gridedit {
    min-height: 3rem;
}

.grid-stack.gridedit .ui-draggable-handle {
    border: 1px dashed $draggable-border-color;
}

// fixing the draggable arrow position
.grid-stack > .grid-stack-item.ui-resizable > .ui-icon-gripsmall-diagonal-se {
  right: 12px;
}

// fixing the changes from Bootstrap 4 to 5
[class*="col-"] {
    @include adjust-col();
}
