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

@mixin color($theme: null) {
  // If a theme is provided, use the primary color defined by the system map. Otherwise, let it
  // fallback to the CSS variable system token. Wrap CSS variable definition in a root selector, if
  // the call was made at the top level without a selector.
  @if ($theme) {
    @include _current-selector-or-root() {
      --mat-column-resize-outline-color: #{map.get($theme, _mat-system, outline)};
      --mat-column-resize-outline-hover-color: #{map.get($theme, _mat-system, primary)};
      --mat-column-resize-outline-active-color: #{map.get($theme, _mat-system, primary)};
    }
  }

  // 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: var(--mat-column-resize-border-color, var(--mat-sys-outline));
    }

    .mat-resizable-handle {
      background: var(--mat-column-resize-outline-hover-color, var(--mat-sys-primary));
    }

    .cdk-resizable-resize-disabled > .mat-resizable-handle {
      background: var(--mat-column-resize-border-color, var(--mat-sys-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;
  }

  $resizable-active-divider: var(--mat-column-resize-outline-active-color, var(--mat-sys-primary));

  .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: null) {}

@mixin density($theme: null) {}

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

// Copy of Angular Material's `sass-utils.current-selector-or-root` function so
// that variables can be defined at a top-level safely.
// src/material/core/style/_sass-utils.scss
@mixin _current-selector-or-root($root: html) {
  @if & {
    @content;
  }
  @else {
    #{$root} {
      @content;
    }
  }
}