@use 'sass:map';
@use '../../../mx-core/src/base/colors';
@use '../../../mx-core/src/base/typography';
@use '../../../mx-core/src/base/opacity';
@use '../../../mx-core/src/base/elevation';

@mixin mx-widget-theme($theme) {
  $is-dark: map.get($theme, is-dark);
  $color-theme: colors.$mx-light;

  @if $is-dark {
    $color-theme: colors.$mx-dark;
  }

  .mx-widget {
    background-color: map.get($color-theme, surface);
    border: 1px solid map.get($color-theme, outlineVariant);

    &:not(.mx-widget--disabled) {
      &:hover {
        @extend .gl-el-1;
        @if $is-dark {
          @extend .gl-dark-el-1;
        }
        background-color: rgba(map.get($color-theme, onSurface), opacity.$opacity-8);

        &.cdk-drag-dragging {
          @extend .gl-el-3;
          @if $is-dark {
            @extend .gl-dark-el-3;
          }
          background-color: rgba(map.get($color-theme, onSurface), opacity.$opacity-16);
        }
      }
      &:active {
        background-color: rgba(map.get($color-theme, onSurface), opacity.$opacity-12);
      }
    }

    &.cdk-drag-dragging {
      @extend .gl-el-3;
      @if $is-dark {
        @extend .gl-dark-el-3;
      }
      background-color: rgba(map.get($color-theme, onSurface), opacity.$opacity-16);
    }
  }

  .mx-widget-header {
    @extend .gl-title-md;
    color: map.get($color-theme, onSurface);
    border-bottom: 1px solid map.get($color-theme, outlineVariant);
  }
}

.mx-widget-header {
  .cdk-drag-handle {
    display: flex;
    position: relative;
    z-index: 0;
    pointer-events: auto;
    &:hover {
      cursor: grab;
    }
    &:active {
      cursor: grabbing;
    }
  }
}