@function fixed($float) {
  @return calc(round($float * 1000) / 1000); // total 4-5 digits being %
}

@function random-color() {
  $r: random(256); // Random value between 0 and 255 for red
  $g: random(256); // Random value between 0 and 255 for green
  $b: random(256); // Random value between 0 and 255 for blue
  @return rgb($r, $g, $b); // Return the random color
}

$columns: 24 !default;
$w: fixed(calc(100% / $columns));

@mixin pseudo-grid-background($w) {
  content: ''; // Required to display the pseudo-element
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1; // Place it behind the content
  background: repeating-linear-gradient(
    to right,
    rgba(0, 0, 0, 0.1) 0,
    rgba(0, 0, 0, 0.1) 1px,
    transparent 1px,
    transparent $w
  );
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.grid-background {
  position: relative !important;
  z-index: 1 !important;

  &::before {
    @include pseudo-grid-background($w);
  }
}

.indicator-div {
  position: absolute;
  height: 20px;
  margin-top: -20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #408fff;
  color: #fff;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  cursor: pointer;
}

.indicator-hovered {
  border: 1px dashed #408fff !important;
}

.indicator-selected {
  border: 1px solid #408fff !important;
}

.indicator-resizing {
  position: relative; // Ensure the parent is positioned

  &::before {
    content: ''; // Required for pseudo-elements
    position: absolute; // Position relative to .indicator-resizing
    top: 0;
    left: 0;
    width: 100%; // Cover the full width of the parent
    height: 100%; // Cover the full height of the parent
    background-color: rgba(64, 143, 255, 0.5); // Set background to black
    pointer-events: none; // Prevent the layer from blocking interactions
    z-index: 1; // Ensure it appears above the children
    border-top: 2px solid #408fff;
  }

  // This ensures child elements are on a lower layer
  > * {
    visibility: hidden;
  }
}