@import '~@angular/material/_theming.scss';

@mixin ai-button-toggle-theme($theme) {
  $primary: map-get($theme, primary);
  $foreground: map-get($theme, foreground);
  $background: map-get($theme, background);
  $border-radius: 20px;

  .mat-button-toggle-group {
    border: 1px solid mat-color($foreground, hint-text);
    border-radius: $border-radius !important;
    box-shadow: none !important;
  }

  .mat-button-toggle {
    color: mat-color($foreground, text);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .mat-button-toggle-checked {
    background-color: mat-color($primary);
    color: mat-color($primary, default-contrast);
  }

  .mat-button-toggle-checked:last-of-type {
    border-bottom-right-radius: $border-radius;
    border-top-right-radius: $border-radius;
  }

  .mat-button-toggle-checked:first-of-type {
    border-bottom-left-radius: $border-radius;
    border-top-left-radius: $border-radius;
  }
}