@use 'sass:map';
@use '../base/colors';
@use '../base/elevation';

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

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

  .mat-mdc-dialog-container {
    @extend .gl-el-3;

    .mdc-dialog__surface {
      background-color: map.get($color-theme, surface) !important;
    }

    mat-dialog-title.mdc-dialog__title,
    [mat-dialog-title].mdc-dialog__title {
      @extend .gl-headline-sm;
      color: map.get($color-theme, onSurface);
      padding: 24px 24px 20px 24px;

      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background-color: map.get($color-theme, primary);
      }
    }

    mat-dialog-content.mdc-dialog__content,
    [mat-dialog-content].mdc-dialog__content {
      @extend .gl-body-md;
      color: map.get($color-theme, onSurfaceVariant);
      padding: 0 24px;
    }

    mat-dialog-actions.mdc-dialog__actions,
    [mat-dialog-actions].mdc-dialog__actions {
      @extend .gl-label-md;
      padding: 16px 24px;
      min-height: 0;
    }
  }

  .cdk-overlay-pane {
    &.mx-dialog-sm {
      width: 320px;
    }
    &.mx-dialog-md {
      width: 560px;
    }
    &.mx-dialog-lg {
      width: 80vw;
    }
  }
}