@use 'sass:map';
@use '../base/colors';
@use '../base/opacity' as op;
@use '../base/elevation' as elv;

@mixin el-3($is-dark: false) {
  @extend .gl-el-3;
  @if ($is-dark) {
    @extend .gl-dark-el-3;
  }
}

@mixin el-4($is-dark: false) {
  @extend .gl-el-4;
  @if ($is-dark) {
    @extend .gl-dark-el-4;
  }
}

@mixin mx-drag-drop-theme($theme) {
  $is-dark: map.get($theme, is-dark);
  $themecolors: colors.$mx-light;

  @if $is-dark {
    $themecolors: colors.$mx-dark;
  }
  .cdk-drag-placeholder {
    border: 1px dashed map.get($themecolors, outlineVariant);
  }

  .cdk-drag-preview:not(.disabled) {
    @include el-4($is-dark);

    .mx-list-item {
      border-color: rgba(map.get($themecolors, onSurface), op.$opacity-16);
      background-color: map.get($themecolors, surface);
      .mx-list-item--ripple {
        background-color: map.get($themecolors, onSurface);
        opacity: op.$opacity-16;
      }
    }
  }
  .mx-elevated-card {
    &.mx-card--action {
      &.cdk-drag-preview:not(.disabled),
      &.cdk-drag-dragging:not(.disabled) {
        @include el-4($is-dark);
        background-color: map.get($themecolors, surfaceContainerLow);
      }
    }
  }

  .mx-outlined-card {
    &.mx-card--action {
      &.cdk-drag-preview:not(.disabled),
      &.cdk-drag-dragging:not(.disabled) {
        @include el-3($is-dark);
        background-color: map.get($themecolors, surface);
      }
    }
  }
  .mx-filled-card {
    &.mx-card--action {
      &.cdk-drag-preview:not(.disabled),
      &.cdk-drag-dragging:not(.disabled) {
        @include el-3($is-dark);
        background-color: map.get($themecolors, surfaceContainerHighest);
      }
    }
  }

  .mx-elevated-card,
  .mx-outlined-card,
  .mx-filled-card {
    &.mx-card--action {
      &.cdk-drag-preview:not(.disabled),
      &.cdk-drag-dragging:not(.disabled) {
        .mx-card--ripple {
          background-color: map.get($themecolors, onSurface);
          opacity: op.$opacity-16;
        }
      }
    }
  }
}

.cdk-drag-placeholder {
  min-height: 60px;
  opacity: 0.6;
}