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

@mixin action-dialog-theme($theme) {
  $color-config: mat.get-color-config($theme);
  $accent: mat.get-color-from-palette(map.get($color-config, accent));
  $warn: mat.get-color-from-palette(map.get($color-config, warn));
  $foreground: map.get($color-config, foreground);

  .action-dialog {
    [mat-dialog-title] {
      .dialog-title {
        &.warning {
          border-color: $warn;
        }

        &.success {
          border-color: $accent;
        }

        &.info {
          border-color: $accent;
        }
      }
    }

    [mat-dialog-content] {
      color: map.get($foreground, text) !important;
    }

    .dialog-error {
      color: $warn;
    }
  }
}

.action-dialog {
  .mdc-dialog__surface {
    --mdc-dialog-container-shape: 10px !important;
  }

  [mat-dialog-title],
  [mat-dialog-content],
  [mat-dialog-actions] {
    margin: 12px 22px;
    padding: 0 !important;
  }

  [mat-dialog-title] {
    .dialog-title {
      @include typography.text-lg;
      display: inline-block;
      border-bottom: 1px solid;
    }

    &::before {
      height: auto;
    }
  }

  [mat-dialog-content] {
    @include typography.text-sm;
  }

  [mat-dialog-actions] {
    gap: 12px;
    min-height: auto;
  }

  .dialog-error {
    @include typography.text-xs;
  }
}