@use '@angular/material' as mat;
@mixin sc-slide-button-toggle-group-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $success: map-get($theme, success);
  $warning: map-get($theme, warning);
  $danger: map-get($theme, danger);
  $foreground: map-get($theme, foreground);
  $background: map-get($theme, background);
  $is-dark-theme: map-get($theme, is-dark);

  $default-button-color: if($is-dark-theme, rgba(0, 0, 0, 0.87), rgba(255, 255, 255, 1));
  $default-button-background-color: if($is-dark-theme, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0.87));

  .disabled .slide-button-toggle-group__bg-wrapper .background {
    color: mat.get-color-from-palette($foreground, disabled-button) !important;
    background-color: mat.get-color-from-palette($background, disabled-button) !important;
  }

  .slide-button-toggle-group {
    background-color: mat.get-color-from-palette($background, hover) !important;

    .mat-button:hover .mat-button-focus-overlay {
      background-color: transparent;
    }

    //* transitions
    &,
    &.--primary,
    &.--accent,
    &.--danger,
    &.--warning,
    &.--success {
      .mat-button,
      .mat-icon-button {
        transition: color $sc-sbtg-transition-duration linear;

        &.active {
          transition: color $sc-sbtg-transition-duration linear;
        }
      }
    }

    &__bg-wrapper {
      .background {
        background-color: $default-button-background-color;
      }
    }

    .mat-button,
    .mat-icon-button {
      background-color: transparent !important;

      &.active {
        color: $default-button-color;
        background-color: transparent;

        &:before {
          background-color: transparent;
        }
      }
    }

    &.--primary {
      .slide-button-toggle-group__bg-wrapper .background {
        background-color: mat.get-color-from-palette($primary, 500);
      }

      .mat-button.active,
      .mat-icon-button.active {
        color: mat.get-contrast-color-from-palette($primary, 500);
      }
    }

    &.--accent {
      .slide-button-toggle-group__bg-wrapper .background {
        background-color: mat.get-color-from-palette($accent, 500);
      }

      .mat-button.active,
      .mat-icon-button.active {
        color: mat.get-contrast-color-from-palette($accent, 500);
      }
    }

    &.--danger {
      .slide-button-toggle-group__bg-wrapper .background {
        background-color: mat.get-color-from-palette($danger, 500);
      }

      .mat-button.active,
      .mat-icon-button.active {
        color: mat.get-contrast-color-from-palette($danger, 500);
      }
    }

    &.--warning {
      .slide-button-toggle-group__bg-wrapper .background {
        background-color: mat.get-color-from-palette($warning, 500);
      }

      .mat-button.active,
      .mat-icon-button.active {
        color: mat.get-contrast-color-from-palette($warning, 500);
      }
    }

    &.--success {
      .slide-button-toggle-group__bg-wrapper .background {
        background-color: mat.get-color-from-palette($success, 500);
      }

      .mat-button.active,
      .mat-icon-button.active {
        color: mat.get-contrast-color-from-palette($success, 500);
      }
    }
  }
}