@use '@angular/material' as mat;

.acp-primary {
  @include mat.button-overrides(
    (
      filled-container-color: var(--acp-theme-primary-color),
      filled-label-text-color: #ffffff,
      outlined-label-text-color: var(--acp-theme-primary-color),
      protected-label-text-color: var(--acp-theme-primary-color),
      text-label-text-color: var(--acp-theme-primary-color),
      text-state-layer-color: var(--acp-theme-primary-color),
    )
  );
}

.acp-secondary {
  @include mat.button-overrides(
    (
      filled-container-color: var(--mat-sys-secondary),
      filled-label-text-color: var(--mat-sys-on-secondary),
      outlined-label-text-color: var(--mat-sys-secondary),
      protected-label-text-color: var(--mat-sys-secondary),
      text-label-text-color: var(--mat-sys-secondary),
      text-state-layer-color: var(--mat-sys-secondary),
    )
  );
}

.acp-accent {
  @include mat.button-overrides(
    (
      filled-container-color: var(--mat-sys-tertiary),
      filled-label-text-color: var(--mat-sys-on-tertiary),
      outlined-label-text-color: var(--mat-sys-tertiary),
      protected-label-text-color: var(--mat-sys-tertiary),
      text-label-text-color: var(--mat-sys-tertiary),
      text-state-layer-color: var(--mat-sys-tertiary),
    )
  );
}

.acp-error {
  @include mat.button-overrides(
    (
      filled-container-color: var(--mat-sys-error),
      filled-label-text-color: var(--mat-sys-on-error),
      outlined-label-text-color: var(--mat-sys-error),
      protected-label-text-color: var(--mat-sys-error),
      text-label-text-color: var(--mat-sys-error),
      text-state-layer-color: var(--mat-sys-error),
    )
  );
}

.acp-success {
  @include mat.button-overrides(
    (
      filled-container-color: #4caf50,
      filled-label-text-color: #ffffff,
      outlined-label-text-color: #4caf50,
      protected-label-text-color: #4caf50,
      text-label-text-color: #4caf50,
      text-state-layer-color: #4caf50,
    )
  );
}

.acp-warning {
  @include mat.button-overrides(
    (
      filled-container-color: #f59e0b,
      filled-label-text-color: #ffffff,
      outlined-label-text-color: #f59e0b,
      protected-label-text-color: #f59e0b,
      text-label-text-color: #f59e0b,
      text-state-layer-color: #f59e0b,
    )
  );
}

.acp-info {
  @include mat.button-overrides(
    (
      filled-container-color: #3b82f6,
      filled-label-text-color: #ffffff,
      outlined-label-text-color: #3b82f6,
      protected-label-text-color: #3b82f6,
      text-label-text-color: #3b82f6,
      text-state-layer-color: #3b82f6,
    )
  );
}

.acp-dark {
  @include mat.button-overrides(
    (
      filled-container-color: #1f2937,
      filled-label-text-color: #ffffff,
      outlined-label-text-color: light-dark(#1f2937, #ffffff),
      protected-label-text-color: light-dark(#1f2937, #ffffff),
      text-label-text-color: light-dark(#1f2937, #ffffff),
      text-state-layer-color: light-dark(#1f2937, #ffffff),
    )
  );
}

[matIconButton].acp-primary {
  @include mat.icon-overrides(
    (
      color: var(--acp-theme-primary-color),
    )
  );
}

[matIconButton].acp-secondary {
  @include mat.icon-overrides(
    (
      color: var(--mat-sys-secondary),
    )
  );
}

[matIconButton].acp-accent {
  @include mat.icon-overrides(
    (
      color: var(--mat-sys-tertiary),
    )
  );
}

[matIconButton].acp-error {
  @include mat.icon-overrides(
    (
      color: var(--mat-sys-error),
    )
  );
}

[matIconButton].acp-success {
  @include mat.icon-overrides(
    (
      color: #10b981,
    )
  );
}

[matIconButton].acp-warning {
  @include mat.icon-overrides(
    (
      color: #f59e0b,
    )
  );
}

[matIconButton].acp-info {
  @include mat.icon-overrides(
    (
      color: #3b82f6,
    )
  );
}

[matIconButton].acp-dark {
  @include mat.icon-overrides(());
}

[matIconButton].acp-light {
  @include mat.icon-overrides(
    (
      color: #ffffff,
    )
  );
}

[matFab].acp-primary {
  @include mat.fab-overrides(
    (
      container-color: var(--acp-theme-primary-color),
      foreground-color: #ffffff,
      state-layer-color: #ffffff,
    )
  );
}

[matFab].acp-secondary {
  @include mat.fab-overrides(
    (
      container-color: var(--mat-sys-secondary),
      foreground-color: var(--mat-sys-on-secondary),
      state-layer-color: var(--mat-sys-on-secondary),
    )
  );
}

[matFab].acp-accent {
  @include mat.fab-overrides(
    (
      container-color: var(--mat-sys-tertiary),
      foreground-color: var(--mat-sys-on-tertiary),
      state-layer-color: var(--mat-sys-on-tertiary),
    )
  );
}

[matFab].acp-error {
  @include mat.fab-overrides(
    (
      container-color: var(--mat-sys-error),
      foreground-color: var(--mat-sys-on-error),
      state-layer-color: var(--mat-sys-on-error),
    )
  );
}

[matFab].acp-success {
  @include mat.fab-overrides(
    (
      container-color: #4caf50,
      foreground-color: #ffffff,
      state-layer-color: #ffffff,
    )
  );
}

[matFab].acp-warning {
  @include mat.fab-overrides(
    (
      container-color: #f59e0b,
      foreground-color: #ffffff,
      state-layer-color: #ffffff,
    )
  );
}

[matFab].acp-info {
  @include mat.fab-overrides(
    (
      container-color: #3b82f6,
      foreground-color: #ffffff,
      state-layer-color: #ffffff,
    )
  );
}

[matFab].acp-dark {
  @include mat.fab-overrides(
    (
      container-color: #1f2937,
      foreground-color: #ffffff,
      state-layer-color: #ffffff,
    )
  );
}

[matMiniFab].acp-primary {
  @include mat.fab-overrides(
    (
      small-container-color: var(--acp-theme-primary-color),
      small-foreground-color: #ffffff,
      small-state-layer-color: #ffffff,
    )
  );
}

[matMiniFab].acp-secondary {
  @include mat.fab-overrides(
    (
      small-container-color: var(--mat-sys-secondary),
      small-foreground-color: var(--mat-sys-on-secondary),
      small-state-layer-color: var(--mat-sys-on-secondary),
    )
  );
}

[matMiniFab].acp-accent {
  @include mat.fab-overrides(
    (
      small-container-color: var(--mat-sys-tertiary),
      small-foreground-color: var(--mat-sys-on-tertiary),
      small-state-layer-color: var(--mat-sys-on-tertiary),
    )
  );
}

[matMiniFab].acp-error {
  @include mat.fab-overrides(
    (
      small-container-color: var(--mat-sys-error),
      small-foreground-color: var(--mat-sys-on-error),
      small-state-layer-color: var(--mat-sys-on-error),
    )
  );
}

[matMiniFab].acp-success {
  @include mat.fab-overrides(
    (
      small-container-color: #4caf50,
      small-foreground-color: #ffffff,
      small-state-layer-color: #ffffff,
    )
  );
}

[matMiniFab].acp-warning {
  @include mat.fab-overrides(
    (
      small-container-color: #f59e0b,
      small-foreground-color: #ffffff,
      small-state-layer-color: #ffffff,
    )
  );
}

[matMiniFab].acp-info {
  @include mat.fab-overrides(
    (
      small-container-color: #3b82f6,
      small-foreground-color: #ffffff,
      small-state-layer-color: #ffffff,
    )
  );
}

[matMiniFab].acp-dark {
  @include mat.fab-overrides(
    (
      small-container-color: #1f2937,
      small-foreground-color: #ffffff,
      small-state-layer-color: #ffffff,
    )
  );
}

.acp-square {
  @include mat.button-overrides(
    (
      filled-container-shape: 8px,
      outlined-container-shape: 8px,
      protected-container-shape: 8px,
      text-container-shape: 8px,
      tonal-container-shape: 8px,
    )
  );
  --mat-icon-button-container-shape: 8px;
}

.acp-block {
  width: 100%;
}

.acp-medium {
  @include mat.theme(
    (
      density: -1,
    )
  );
  @include mat.button-overrides(
    (
      filled-horizontal-padding: 20px,
      outlined-horizontal-padding: 20px,
      protected-horizontal-padding: 20px,
      text-horizontal-padding: 20px,
      tonal-horizontal-padding: 20px,
    )
  );

  @include mat.button-toggle-overrides(
    (
      height: 36px,
    )
  );
}
.acp-small {
  @include mat.theme(
    (
      density: -2,
    )
  );
  @include mat.button-overrides(
    (
      filled-horizontal-padding: 16px,
      outlined-horizontal-padding: 16px,
      protected-horizontal-padding: 16px,
      text-horizontal-padding: 16px,
      tonal-horizontal-padding: 16px,
    )
  );
}