@use "vars-svm";

@mixin overwritten-material-styles() {
  svm-ext-zoom-slider {
    $slider-width: vars-svm.$zoom-slider-overall-width;
    $slider-height: vars-svm.$zoom-slider-height;
    $slider-thumb-width: vars-svm.$zoom-slider-thumb-width;

    // .mat-slider.mat-slider-horizontal {
    //   width: 200px;
    //   height: $slider-height;
    // }

    // .mat-slider.mat-slider-horizontal .mat-slider-wrapper {
    //   position: unset;
    // }

    // .mat-slider.mat-slider-horizontal .mat-slider-track-wrapper {
    //   height: $slider-height;
    //   border-radius: 0px;
    //   // adjust left and width to compensate for added margins of slider (class="slider-margin")
    //   width: calc(100% + #{$slider-thumb-width});
    //   left: calc((#{$slider-thumb-width} / 2) * -1);
    // }

    // .mat-slider.mat-slider-horizontal .mat-slider-track-background,
    // .mat-slider.mat-slider-horizontal .mat-slider-track-fill {
    //   height: $slider-height;
    // }

    .mat-mdc-slider {
      width: 200px;
      height: $slider-height;
    }

    .mat-mdc-slider .mdc-slider__input {
      // make sure the input field for the slider fits in between the buttons
      // angular material uses style for setting width and left, so we have
      // to use !important
      width: calc(100% + #{$slider-thumb-width}) !important;
      left: calc((#{$slider-thumb-width} / 2) * -1) !important;
    }

    .mat-mdc-slider .mdc-slider__track {
      height: $slider-height;
      border-radius: 0px;
      // adjust left and width to compensate for added margins of slider (class="slider-margin")
      width: calc(100% + #{$slider-thumb-width});
      left: calc((#{$slider-thumb-width} / 2) * -1);
      top: 0;
      transform: none;
    }

    .mat-mdc-slider .mdc-slider__track--inactive {
      height: $slider-height;
      border-radius: 0px;
      top: 0;
    }

    .mat-mdc-slider .mdc-slider__track--active  {
      height: $slider-height;
      border-radius: 0px;
      top: 0;
    }

    .mat-mdc-slider .mdc-slider__track--inactive_fill {
      border-width: 0;
    }

    .mat-mdc-slider .mdc-slider__track--active_fill {
      border-width: 0;
    }

    .mat-mdc-slider:not(.disabled).cdk-mouse-focused .mat-mdc-slider .mdc-slider__thumb-knob {
      border-radius: 0px;
      border-width: 1px;
    }

    .mdc-slider .mdc-slider__thumb {
      height: $slider-height;
      width: $slider-thumb-width;
      left: calc(#{$slider-thumb-width / 2 * -1});
      top: 0;
    }

    .mat-mdc-slider .mdc-slider__thumb-knob {
      height: $slider-height;
      width: $slider-thumb-width;
      border-radius: 0px;
      border-width: 1px;
      top: 0;
      left: 0;
      transform: none;
      box-shadow: none;
      // transform: scale(1);
      // bottom: -18px; // TODO: calc this value - needs to be changed on height change
    }

    // .mat-slider-horizontal .mat-slider-track-background {
    //   height: $slider-height;
    // }

  }

  .cdk-overlay-container {
    z-index: 1000;
  }

  .mat-slider-horizontal .mat-slider-wrapper {
    top: 16px;
  }

  mat-button-toggle.toggle-annotation-classes-palettes-menu > button.mat-button-toggle-button > span.mat-button-toggle-label-content {
  padding-right: 4px;
  }

  // make sure that the slider for the annotation classes palettes doesn't
  // cause any overflow when sliding
  .cdk-overlay-pane {
    .mat-mdc-menu-panel.mat-mdc-menu-panel {
      overflow: hidden;
    }
  }

  .cdk-overlay-pane .annotationClassesPalettesMenu {
    .mat-mdc-menu-item {
      line-height: inherit;
      height: 36px;
      min-height: 36px;
    }

    .mat-mdc-slider .mdc-slider__input {
      // make sure the input field is not bigger than the slider
      // angular material uses style for setting width and left, so we have
      // to use !important
      width: 100% !important;
      left: 0 !important;
    }

    .mdc-slider .mdc-slider__thumb {
      width: 20px;
      height: 20px;
      top: 10px;
      left: -8px;
    }
  }

  .cdk-overlay-pane .pixelMapOpacityMenu {
    .mat-mdc-menu-content {
      padding: 0;
    }
  }
}