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

// Dropzone mixin
// Use theme to manage colors on Dropzone component
@mixin mic-upload-dropzone-override($theme) {
  $primary: map.get($theme, primary);
  $accent: map.get($theme, accent);
  $warn: map.get($theme, warn);
  $is-dark: map.get($theme, is-dark);

  .mic-dropzone {
    @if $is-dark {
      border: dotted 2px colors.$mic-text-colors-normal-light;
    } @else {
      border: dotted 2px colors.$mic-brand-colors-grey;
    }
    &:has(input:focus) {
      outline: map.get($primary, A400) solid 2px;
      outline-offset: 2px;
    }

    &.fileover {
      border-color: map.get($accent, A400);

      .mat-icon {
        color: map.get($accent, A400);
      }
    }

    label {
      color: mat.m2-get-contrast-color-from-palette($primary, A400);
      background-color: map.get($primary, A400);
    }
  }
}
