/*
  Cell Gradient Border Styles
  ------------------------------------------------------
*/

$gradient-border--start: $c-pool;
$gradient-border--stop: $c-comet;
$gradient-border--mid: mix($gradient-border--start, $gradient-border--stop);

.gradient-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: $z--cell-gradient-border;
  transition: opacity 0.25s ease;
  opacity: 0;
}

.gradient-border--top-left,
.gradient-border--top-right,
.gradient-border--bottom-left,
.gradient-border--bottom-right {
  position: absolute;
  width: 50%;
  height: 50%;
  z-index: 1;

  &:before,
  &:after {
    content: '';
    position: absolute;
  }
}

.gradient-border--top-left {
  z-index: 2;
  top: 0;
  left: 0;
  border-top-left-radius: $ix-radius;
  border-top: $ix-border solid $gradient-border--start;
  border-left: $ix-border solid $gradient-border--start;

  &:before {
    top: -$ix-border;
    height: $ix-border;
    left: $ix-radius;
    width: calc(200% - #{$ix-radius * 2});
    @include gradient-h($gradient-border--start, $gradient-border--mid);
  }

  &:after {
    top: $ix-radius;
    height: calc(200% - #{$ix-radius * 2});
    left: -$ix-border;
    width: $ix-border;
    @include gradient-v($gradient-border--start, $gradient-border--mid);
  }
}

.gradient-border--top-right {
  top: 0;
  right: 0;
  border-top-right-radius: $ix-radius;
  border-top: $ix-border solid $gradient-border--mid;
  border-right: $ix-border solid $gradient-border--mid;
}

.gradient-border--bottom-left {
  bottom: 0;
  left: 0;
  border-bottom-left-radius: $ix-radius;
  border-bottom: $ix-border solid $gradient-border--mid;
  border-left: $ix-border solid $gradient-border--mid;
}

.gradient-border--bottom-right {
  z-index: 2;
  bottom: 0;
  right: 0;
  border-bottom-right-radius: $ix-radius;
  border-bottom: $ix-border solid $gradient-border--stop;
  border-right: $ix-border solid $gradient-border--stop;

  &:before {
    bottom: -$ix-border;
    height: $ix-border;
    right: $ix-radius;
    width: calc(200% - #{$ix-radius * 2});
    @include gradient-h($gradient-border--mid, $gradient-border--stop);
  }

  &:after {
    bottom: $ix-radius;
    height: calc(200% - #{$ix-radius * 2});
    right: -$ix-border;
    width: $ix-border;
    @include gradient-v($gradient-border--mid, $gradient-border--stop);
  }
}

/* Drag & Resize State */
.react-grid-item.resizing,
.react-grid-item.react-draggable-dragging {
  .gradient-border {
    opacity: 1;
  }
}