@use "sass:map";
@use '~@angular/material' as mat;

@mixin base-size-style($map: ()) {
  width: var(--width);
  height: var(--height);
}

@mixin base-color-style($theme) {
  $config: mat.get-color-config($theme);
  $primary: map-get($config, primary);
  $ascent: map-get($config, accent);
  $warn: map-get($config, warn);

  &.primary {
    background-color: mat.get-color-from-palette($primary, 700);
    color: mat.get-contrast-color-from-palette($primary, 700);

    &.disabled {
      color: mat.get-color-from-palette($primary, 700);
    }

    .ql-button-spinner {
      fill: mat.get-color-from-palette($primary, 700);
    }
  }

  &.ascent {
    background-color: mat.get-color-from-palette($ascent, 700);
    color: mat.get-contrast-color-from-palette($ascent, 700);

    &.disabled {
      color: mat.get-color-from-palette($ascent, 700);
    }

    .ql-button-spinner {
      fill: mat.get-color-from-palette($ascent, 700);
    }
  }

  &.warn {
    background-color: mat.get-color-from-palette($warn, 700);
    color: mat.get-contrast-color-from-palette($warn, 700);
    border: .1rem solid mat.get-color-from-palette($warn, 400, .7);

    &.disabled {
      color: mat.get-color-from-palette($warn, 700);
    }

    .ql-button-spinner {
      fill: mat.get-color-from-palette($warn, 700);
    }
  }
}

@mixin extract-style-map($map: ()) {
  @each $style-name, $style in $map {
    --#{$style-name}: #{$style}
  }
}

@function ql-get-value($var-name, $map) {
  @return var(--#{$var-name}, map.get($map, $var-name));
}