// Import library functions for theme creation.
@use 'sass:map';
@use '@angular/material' as mat;

@mixin svm-theme-color-styles($config-or-theme) {
  // Extract the color configuration in case a theme has been passed.
  // This allows consumers to either pass a theme object or a color configuration.
  $config: mat.m2-get-color-config($config-or-theme);
  // Extract the palettes you need from the theme definition.
  $primary: map.get($config, primary);
  $accent: map.get($config, accent);
  $warn: map.get($config, warn);

  $foreground: map.get($config, foreground);
  $background: map.get($config, background);

  // rename to svm-toolbar to shrink toolbar
  UNUSED-svm-toolbar {
    $toolbar-button-size: 1.725rem;

    .mat-button-toggle-checked.mat-button-toggle-appearance-standard.toggle-blue {
      background: mat.m2-get-color-from-palette($accent, lighter);
      // Get a contrast color for a hue by adding `-contrast` to any other key.
      color: mat.m2-get-color-from-palette($accent, '100-contrast');
    }

    mat-button-toggle {
      width: $toolbar-button-size;
      height: $toolbar-button-size;
    }

    .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
      line-height: $toolbar-button-size;
      padding: 0;
    }
  }

  .mat-disabled-text {
    // @debug "disabled-text: #{mat-color($foreground, disabled-text)}";
    color: mat.m2-get-color-from-palette($foreground, disabled-text);
  }

  .label-text {
    color: mat.m2-get-color-from-palette($foreground, text);
  }

  svm-ext-zoom-slider {
    // see: https://github.com/angular/components/blob/master/src/material/slider/_slider-theme.scss
    // make slider background less transparent
    // take the same value as the slider-thumb and adjust/decrease the alpha
    // value by 0.7 to 0.3
    $mat-slider-off-color: mat.m2-get-color-from-palette($background, raised-button);
    $mat-slider-off-color: adjust-color($mat-slider-off-color, $alpha: -0.7);
    $mat-slider-off-focused-color: mat.m2-get-color-from-palette(
      $foreground,
      slider-off-active
    );
    $divider-color: mat.m2-get-color-from-palette($foreground, divider);

    .ext-zoom-slider-border {
      border-radius: 4px;
      border: solid 1px $divider-color;
    }

    .mat-mdc-slider .mdc-slider__thumb-knob {
      background-color: mat.m2-get-color-from-palette($background, raised-button);
      border: 1px solid mat.m2-get-color-from-palette($foreground, text);
    }

    .mat-mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb-knob {
      background-color: mat.m2-get-color-from-palette($background, raised-button);
      border: 1px solid mat.m2-get-color-from-palette($foreground, text);
    }

    .mat-mdc-slider .mdc-slider__track--inactive {
      background-color: $mat-slider-off-color;
    }

    .mat-mdc-slider .mdc-slider__track--active  {
      background-color: $mat-slider-off-color;
    }



    // .mat-accent .mat-slider-thumb {
    //   background-color: mat.get-color-from-palette($background, raised-button);
    //   border: 1px solid mat.get-color-from-palette($foreground, text);
    //   // @include mat-elevation(2);
    // }

    // .mat-slider-min-value:not(.mat-slider-thumb-label-showing)
    //   .mat-slider-thumb {
    //   background-color: mat.get-color-from-palette($background, raised-button);
    //   border: 1px solid mat.get-color-from-palette($foreground, text);
    //   // @include mat-elevation(2);
    // }

    // // force zoom slider color to bg color overwriting default accent color
    // .mat-slider.mat-accent .mat-slider-track-fill,
    // .mat-slider.mat-accent .mat-slider-thumb,
    // .mat-slider.mat-accent .mat-slider-thumb-label {
    //   background-color: mat.get-color-from-palette($background, raised-button);
    // }

    // // overwrite slider track background
    // .mat-slider.mat-slider-horizontal .mat-slider-track-background,
    // .mat-slider.mat-slider-horizontal .mat-slider-track-fill {
    //   background-color: $mat-slider-off-color;

    //   &:hover,
    //   &:focus {
    //     background-color: $mat-slider-off-color;
    //   }
    // }

    // // overwrite slider track background
    // .mat-slider-track-wrapper {
    //   // background-color: $mat-slider-off-color;
    //   background-color: transparent;
    // }

    // // overwrite slider track background
    // .mat-slider {
    //   // background-color: $mat-slider-off-color;
    //   background-color: transparent;

    //   &:hover,
    //   &:focus {
    //     //background-color: $mat-slider-off-color;
    //     background-color: transparent;
    //   }
    // }
  }

  // overwrite openlayers scale line colors
  .ol-scale-line {
    display: flex;
    background: mat.m2-get-color-from-palette($background, raised-button, 0.6);

    //text color
    .ol-scale-line-inner {
      color: mat.m2-get-color-from-palette($foreground, text);
      border-color: mat.m2-get-color-from-palette($foreground, text);
      font-size: 12px;
    }
  }
}