@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins';

.widget-container {
  position: relative;
  border-radius: $border-radius;
  transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.18);
  cursor: move;

  .btn-close {
    position: absolute;
    top: 0.55rem;
    right: 1.3rem;
    font-size: 0.7rem;
    z-index: 2;

    &.extra-down {
      top: 3rem;
    }
  }

  &.no-shadow:not(:active):not(.cdk-drag-preview) {
    border: none;
    box-shadow: none;
  }

  &:active {
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);

    &.no-shadow {
      border: solid 1px transparent;
    }
  }
}

.widget-container-placeholder {
  background: #cccccc7a;
  border: dashed 1px #999;
  min-height: 200px;
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.cdk-drag-preview {
  background: var(--bs-body-bg);
  box-sizing: border-box;
  border-radius: $border-radius;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.cdk-drag-animating {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.cdk-drop-list-dragging .widget-container:not(.cdk-drag-placeholder) {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

@include media-breakpoint-down(lg) {
  .widget-container .btn-close.extra-down {
    top: 4.9rem;
  }
}
