@use '@angular/material' as mat;
@use 'sass:map';

@mixin color($theme) {
  $resizable-hover-divider: mat.get-theme-color($theme, primary, 600);
  $resizable-active-divider: mat.get-theme-color($theme, primary, 600);

  // TODO: these styles don't really belong in the `color` part of the theme.
  // We should figure out a better place for them.
  // Required for resizing to work properly.
  .mat-column-resize-table.cdk-column-resize-with-resized-column {
    table-layout: fixed;
    // stylelint-disable-next-line material/no-prefixes -- Valid in all remotely recent browsers.
    width: fit-content;
  }

  .mat-column-resize-flex {
    .mat-header-cell,
    .mat-mdc-header-cell,
    .mat-cell,
    .mat-mdc-cell {
      box-sizing: border-box;
      min-width: 32px;
    }
  }

  .mat-header-cell,
  .mat-mdc-header-cell {
    position: relative;
  }

  .mat-resizable {
    box-sizing: border-box;
  }

  .mat-header-cell:not(.mat-resizable)::after,
  .mat-mdc-header-cell:not(.mat-resizable)::after,
  .mat-resizable-handle {
    background: transparent;
    bottom: 0;
    position: absolute;
    top: 0;
    transition: background mat.$private-swift-ease-in-duration
      mat.$private-swift-ease-in-timing-function;
    width: 1px;
  }

  .mat-header-cell:not(.mat-resizable)::after,
  .mat-mdc-header-cell:not(.mat-resizable)::after {
    content: '';
  }

  .mat-header-cell:not(.mat-resizable)::after,
  .mat-mdc-header-cell:not(.mat-resizable)::after,
  .mat-resizable-handle {
    right: 0;
  }

  .mat-header-row.cdk-column-resize-hover-or-active,
  .mat-mdc-header-row.cdk-column-resize-hover-or-active {
    .mat-header-cell,
    .mat-mdc-header-cell {
      border-right: none;
    }

    .mat-header-cell:not(.mat-resizable)::after,
    .mat-mdc-header-cell:not(.mat-resizable)::after {
      background: map.get($theme, _mat-system, outline);
    }

    .mat-resizable-handle {
      background: $resizable-hover-divider;
    }

    .cdk-resizable-resize-disabled > .mat-resizable-handle {
      background: map.get($theme, _mat-system, outline);
    }
  }

  [dir='rtl'] {
    .mat-header-cell:not(.mat-resizable)::after,
    .mat-mdc-header-cell:not(.mat-resizable)::after,
    .mat-resizable-handle {
      left: 0;
      right: auto;
    }

    .mat-header-row.cdk-column-resize-hover-or-active,
    .mat-mdc-header-row.cdk-column-resize-hover-or-active {
      .mat-header-cell,
      .mat-mdc-header-cell {
        border-left: none;
      }
    }
  }

  .mat-resizable.cdk-resizable-overlay-thumb-active > .mat-resizable-handle {
    opacity: 0;
    transition: none;
  }

  .mat-resizable-handle:focus,
  .mat-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle:focus,
  .mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle:focus {
    background: $resizable-active-divider;
    outline: none;
  }

  .mat-column-resize-overlay-thumb {
    background: transparent;
    cursor: col-resize;
    height: 100%;
    transition: background mat.$private-swift-ease-in-duration
      mat.$private-swift-ease-in-timing-function;
    @include mat.private-user-select(none);
    width: 100%;

    &:active {
      background: linear-gradient(90deg,
          transparent, transparent 7px,
          $resizable-active-divider 7px, $resizable-active-divider 9px,
          transparent 9px, transparent);
      will-change: transform;

      .mat-column-resize-overlay-thumb-top {
        background: linear-gradient(90deg,
            transparent, transparent 4px,
            $resizable-active-divider 4px, $resizable-active-divider 12px,
            transparent 12px, transparent);
      }
    }
  }

  .mat-column-resize-overlay-thumb-top {
    width: 100%;
  }
}

@mixin typography($theme) {}

@mixin density($theme) {}

@mixin theme($theme) {
  @if mat.theme-has($theme, color) {
    @include color($theme);
  }
  @if mat.theme-has($theme, density) {
    @include density($theme);
  }
  @if mat.theme-has($theme, typography) {
    @include typography($theme);
  }
}
