@import '@angular/material';

// Material toggle mixin
@mixin mat-toggle-override($theme) {
  $primary: map-get($theme, primary);
  $warn: map-get($theme, warn);
  $is-dark: map-get($theme, is-dark);

  $focusBorderColor: black;

  @if $is-dark {
    $focusBorderColor: white;
  }

  .mic-button-toggle-group.mat-button-toggle-group {
    border-radius: 100px;
    border-style: none;
  }

  .mat-button-toggle-group-appearance-standard .mat-pseudo-checkbox {
    --mat-standard-button-toggle-selected-state-text-color: white;
  }

  .mic-button-toggle.mat-button-toggle {
    font-weight: bold;
    height: 42px;
    min-width: 65px;
    margin-top: -8px;
    background-color: map-get($mic-grey, 200);
  }

  .mat-button-toggle.mat-button-toggle-appearance-standard {
    @if $is-dark {
      background-color: map-get($mic-grey, 600);
    }

    &.mat-button-toggle-checked.mat-button-toggle-appearance-standard {
      color: map-get($mic-grey, A100);
    }

    &.cdk-focused {
      background-color: map-get($primary, 50);
      color: map-get($mic-blue, A400);
      @if $is-dark {
        background-color: #22292e;
        color: #77b3e1;
      }
    }

    &:not([disabled]) {
      &:hover {
        background-color: map-get($primary, 50);
        color: map-get($mic-blue, A400);
        @if $is-dark {
          background-color: #22292e;
          color: #77b3e1;
        }
      }

      &.mat-button-toggle-checked {
        @if $is-dark {
          background-color: map-get($mic-dark-blue, A400);
          color: #1a1a1a;

          .mat-pseudo-checkbox {
            --mat-standard-button-toggle-selected-state-text-color: map-get($mic-blue, A700);
          }
        } @else {
          background-color: map-get($primary, A400);
          color: $mic-brand-colors-white;
        }

        &.cdk-focused {
          background-color: map-get($mic-blue, A300);
          color: $mic-brand-colors-white;
          @if $is-dark {
            background-color: #6ba0c9;
            color: #1a1a1a;
          }
          .mat-pseudo-checkbox {
            --mat-standard-button-toggle-selected-state-text-color: map-get($mic-blue, A700);
          }
        }

        &.mat-button-toggle-button,
        &.mat-button-toggle-button:focus {
          outline: 2px solid grey;
          outline-offset: 2px;
        }
      }
    }

    &[disabled] {
      outline: 0px solid transparent;
      box-shadow: none;
    }

    &.mat-button-toggle-disabled:not(.mat-button-toggle-checked) mat-icon {
      @if $is-dark {
        color: map-get($mic-grey, 400);
      }
    }

    &.mat-button-toggle-checked.mat-button-toggle-disabled.mic-button-toggle-disabled {
      background-color: map-get($mic-grey, 400);
      color: map-get($mic-grey, 500);

      .mat-pseudo-checkbox {
        --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: map-get($mic-grey, 500);
      }
    }
  }

  .mat-button-toggle:has(.mat-button-toggle-button):not(.mic-button-toggle) {
    border: 2px solid transparent;
  }
  .mat-button-toggle:has(.mat-button-toggle-button:focus):not(.mic-button-toggle) {
    border: map-get($primary, A400) solid 2px !important;
  }
}
