@use 'sass:map';
@use 'sass:color';

@mixin ngrid-drag-plugin-theme($theme) {
  $primary: map.get($theme, primary);
  $accent: map.get($theme, accent);
  $warn: map.get($theme, warn);
  $background: map.get($theme, background);
  $foreground: map.get($theme, foreground);

  $border-color: map.get($foreground, ngrid-border-color);

  .pbl-ngrid-header-cell.pbl-ngrid-column-resize {
    &:after {
      transition: all 250ms ease-in;
      content: ' ';
      display: block;
      position: absolute;
      top: calc(50% - 8px);
      height: 16px;
      right: 0;
      border-right: 0px solid color.scale($border-color, $lightness: -25%);

      [dir='rtl'] & {
        right: unset;
        left: 0;
        border-right: none;
        border-left: 0px solid color.scale($border-color, $lightness: -25%);
      }
    }
}

  pbl-ngrid:not(.pbl-ngrid-column-list-dragging) .pbl-ngrid-header-row-main:hover .pbl-ngrid-header-cell.pbl-ngrid-column-resize {
    &:after {
      right: 2px;
      border-right-width: 2px;

      [dir='rtl'] & {
        right: unset;
        left: 2px;
        border-right-width: 0;
        border-left-width: 2px;
      }
    }
    &:last-child {
      &:after {
        right: 0px;
        width: 3px;
        border-left: 2px solid color.scale($border-color, $lightness: -25%);

        [dir='rtl'] & {
          right: unset;
          left: 0px;
          border-right: 2px solid color.scale($border-color, $lightness: -25%);
        }
      }
    }

    & + .pbl-ngrid-header-cell {
      box-shadow: none;
      &:before {
        top: calc(50% - 8px);
        height: 16px;
        border-right: 2px solid color.scale($border-color, $lightness: -25%);

        [dir='rtl'] & {
          border-right: none;
          border-left: 2px solid color.scale($border-color, $lightness: -25%);
        }
      }
    }
  }

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

  .cdk-drag-preview {
    box-sizing: border-box;
    border-radius: 4px;
    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);
  }

  .pbl-ngrid-column-list-dragging {
    .pbl-ngrid-cell, .pbl-ngrid-header-cell {
      transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
    }
    .cdk-drag-placeholder {
      position: relative;
      &:before, [dir='rtl'] &:before {
        content: ' ';
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: auto;
        border-color: $border-color;
        border-width: 2px;
        border-style: dashed;
      }

    }
  }
}