@use '@angular/material' as mat;
@use 'sass:map';
@use './amixin' as *;
@mixin branding($colors, $suffix) {
  .text-#{$suffix} {
    color: map.get($colors, text) !important;
  }
}

@mixin base-colors() {
  .loading {
    background-color: var(--mat-sys-primary);
  }

  blockquote {
    color: var(--mat-sys-inverse-surface);
    border-left: 3px solid var(--mat-sys-surface-dim);
  }

  body,
  .mat-drawer-container {
    .mat-drawer-inner-container {
      @include scrollbar(var(--mat-sys-primary));
    }
  }

  .text-light {
    color: var(--mat-sys-on-primary);
  }

  .text-primary {
    color: var(--mat-sys-primary);
  }

  .text-accent {
    color: var(--mat-sys-primary);
  }

  .text-warn {
    color: var(--mat-sys-error);
  }

  .border-primary {
    border: 1px solid var(--mat-sys-primary) !important;
  }

  .border-warn {
    border: 1px solid var(--mat-sys-error) !important;
  }

  .border-accent {
    border: 1px solid var(--mat-sys-primary) !important;
  }

  .bg-primary {
    background-color: var(--mat-sys-primary);
    color: var(--mat-sys-onprimary);
  }

  .bg-accent {
    background-color: var(--mat-sys-primary);
    color: var(--mat-sys-on-primary);
  }

  .bg-warn {
    background-color: var(--mat-sys-error);
    color: var(--mat-sys-on-error);
  }

  .ngx-bar {
    background-color: var(--mat-sys-primary) !important;
  }

  hr {
    background: var(--mat-sys-surface-dim);
  }
}

@mixin custom-overide() {
  .mat-mdc-tooltip {
    font-size: 12px;
  }
}
