// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '../../../../../../node_modules/@angular/material/index' as mat;
// Plus imports for other components in your app.
$neon-yellow: #d3ff00;
$purple: #4d66ff;
$white-primary-text: rgba(white, 0.87);
$dark-primary-text: rgba(black, 0.87);
$sm-purple: (
  50: lighten(#c3cdf0, 20%),
  100: lighten(#c3cdf0, 15%),
  200: lighten(#c3cdf0, 10%),
  300: lighten(#c3cdf0, 5%),
  400: #c3cdf0,
  500: #c3cdf0,
  600: #c3cdf0,
  700: darken(#c3cdf0, 15%),
  800: darken(#c3cdf0, 20%),
  900: darken(#c3cdf0, 55%),
  A100: $purple,
  A200: darken($purple, 5%),
  A400: darken($purple, 10%),
  A700: darken($purple, 15%),
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: white,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: white,
    A200: white,
    A400: white,
    A700: white,
  )
);

$sm-neon: (
  50: lighten($neon-yellow, 30%),
  100: lighten($neon-yellow, 25%),
  200: lighten($neon-yellow, 20%),
  300: lighten($neon-yellow, 15%),
  400: lighten($neon-yellow, 10%),
  500: $neon-yellow,
  600: darken($neon-yellow, 10%),
  700: darken($neon-yellow, 15%),
  800: darken($neon-yellow, 20%),
  900: darken($neon-yellow, 25%),
  A100: $neon-yellow,
  A200: darken($neon-yellow, 5%),
  A400: darken($neon-yellow, 10%),
  A700: darken($neon-yellow, 15%),
  contrast: (
    50: $white-primary-text,
    100: $white-primary-text,
    200: $white-primary-text,
    300: $white-primary-text,
    400: white,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: white,
    A200: white,
    A400: white,
    A700: white,
  )
);
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat.core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$theme-primary: mat.define-palette(mat.$indigo-palette);
$theme-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

$sm-dark-palette-primary: mat.define-palette($sm-purple);
$sm-dark-palette-accent: mat.define-palette($sm-purple, A200, A100, A400);

$sm-neon-palette-primary: mat.define-palette($sm-neon);
$sm-neon-palette-accent: mat.define-palette($sm-neon, A200, A100, A400);
// The warn palette is optional (defaults to red).
$theme-warn: mat.define-palette(mat.$red-palette);
$font-family-base: 'Heebo', sans-serif; // Assumes the browser default, typically `16px`
$custom-typography: mat.define-typography-config(
  $font-family: $font-family-base
);
// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$theme: mat.define-light-theme((
  color: (
    primary: $theme-primary,
    accent: $theme-accent,
    warn: $theme-warn,
  ),
  typography: $custom-typography,
  density: -2
));

$sm-neon-theme: mat.define-dark-theme((
  color: (
    primary: $sm-neon-palette-primary,
    accent: $sm-neon-palette-accent,
  ),
  typography: $custom-typography,
  density: -2
));

$sm-dark-theme: mat.define-dark-theme((
  color: (
    primary: $sm-dark-palette-primary,
    accent: $sm-dark-palette-accent,
  ),
  typography: $custom-typography,
  density: -2
));
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include mat.dialog-theme($theme);
@include mat.slider-theme($sm-neon-theme);
@include mat.form-field-theme($theme);
@include mat.tooltip-theme($theme);

@include mat.select-theme($sm-dark-theme);

@import "variables";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
  --mat-select-trigger-text-size: 14px;
}

body {
  font-family: sans-serif;
  border: 1px solid $dark-border;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pointer {
  cursor: pointer;
}

.d-flex-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  &.gap {
    gap: 12px !important;
  }
}

.ellipsis {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mat-mdc-dialog-container {
  padding: 0 !important;
}

.d-flex {
  display: flex;
}

.align-items-center {
  align-items: center;
}

.h-100 {
  height: 100%;
}

.w-100 {
  width: 100% !important;
}

.dark-theme .plot-container .hoverlayer {
  line[stroke-width="1"] {
    stroke: $blue-300;
  }

  line[stroke-width="3"] {
    stroke: $blue-900;
  }

  .hovertext {
    rect {
      fill: #000 !important;
    }
    path {
      stroke: #000  !important;
    }
  }
}

.al-icon, .icon {
  width: 24px;
  height: 24px;
  font-size: 24px;

  &.xs {
    width: 10px;
    height: 10px;
    font-size: 10px;
  }

  &.msm {
    width: 13px;
    height: 13px;
    font-size: 13px;
  }

  &.sm {
    width: 16px;
    min-width: 16px;
    height: 16px;
    font-size: 16px;
  }

  &.sm-md {
    width: 20px;
    height: 20px;
    font-size: 20px;
  }

  &.md {
    width: 28px;
    height: 28px;
    font-size: 28px;
  }

  &.lg {
    width: 32px;
    height: 32px;
    font-size: 32px;
  }

  &.l-40 {
    width: 40px;
    height: 40px;
    font-size: 40px;
  }

  &.xl {
    width: 48px;
    height: 48px;
    font-size: 48px;
  }

  &.xxl {
    width: 64px;
    height: 64px;
    font-size: 64px;
  }
}

.al-icon {
  text-align: center;
  display: inline-block;
}

.modebar-btn[data-attr="plotly-disabled-maximize"] {
  cursor: default !important;

  path {
    fill: $blue-600 !important;
  }
}

.legendlines path,
.legendpoints path {
  cursor: default !important;
}

sm-debug-image-snippet {
  .image-var {
    top: 8px;
    bottom: unset;
    line-height: 20px;
  }
}


.dark-theme .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
  color: rgba(255, 255, 255, 0.87);
}
  .dark-theme {
    .mdc-text-field--outlined:not(.mdc-text-field--disabled) {
      .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
        border-color: $blue-500;
        border-width: 1px;
      }

      &:not(.mdc-text-field--focused):hover .mdc-notched-outline {
        .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
          border-color: $blue-450;
        }
      }

      &.mdc-text-field--focused {
        .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
          border-color: $blue-400;
        }
      }
    }
  }

.mat-mdc-select-panel {
  padding: 0;
  font-size: 14px;
  --mdc-typography-body1-font-size: 14px;
  --mdc-typography-body1-line-height: 16px;
  --mat-select-trigger-text-size: 14px;

  &.light-theme {
    --mdc-theme-surface: white;
    --mdc-theme-text-primary-on-background: #{$blue-500};
  }

  &.dark, &.black, &.dark-theme {
    --mdc-theme-surface: #000;
    border: 1px solid $blue-500;
    --mat-select-panel-background-color: #000;
    --mat-option-label-text-color: #{$blue-200};

    .mat-mdc-option {
      --mdc-theme-text-primary-on-background: #{$blue-200};
    }
  }

  .mat-mdc-option {
    --mdc-typography-body1-line-height: 36px;
    --mat-menu-item-label-text-size: 14px;
    min-height: 36px;
  }

  .mat-mdc-option {
    --mdc-theme-text-primary-on-background: #{$blue-200};
    border-radius: 4px;
    height: 40px;
    min-height: 40px;
    line-height: 40px;
    margin-bottom: 2px;

    &:last-child {
      margin-bottom: 0;
    }

    &.mat-mdc-selected:not(.mat-mdc-option-multiple), &.mat-active {
      background: $blue-800;
    }
  }

 .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-minimal::after {
   color: $blue-200;
 }

  .mat-mdc-option:hover:not(.mdc-list-item--disabled),
  .mat-mdc-option:focus:not(.mdc-list-item--disabled),
  .mat-mdc-option.mat-mdc-option-active,
  .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled) {
    background: $dark-grey-blue;
  }
}

.dark-theme, .light-theme {
  .mat-mdc-form-field {
    --mat-menu-item-label-text-line-height: 16;
    --mat-menu-item-label-text-size: 14px;

    &.mat-form-field-appearance-outline {
      &.black {
        background-color: #000;

        .mat-mdc-select-value, .mat-mdc-select-arrow {
          color: $blue-200;
        }
      }

      .mat-mdc-text-field-wrapper {
        .mat-mdc-form-field-flex {
          height: 100%;

          .mat-mdc-form-field-infix {
            min-height: 100%;
            padding: 5px 0;

            .mat-mdc-input-element {
              height: 26px;
            }
          }

          .mat-mdc-form-field-icon-suffix {
            line-height: 24px;
          }
        }
      }
    }
    &.mat-form-field-appearance-fill {
      .mdc-text-field--filled:not(.mdc-text-field--disabled) {
        background-color: transparent;

        .mat-mdc-input-element {
          background-color: transparent;
        }
      }

      &.mat-focused {
        .mat-mdc-form-field-focus-overlay {
          opacity: 5%;
        }
      }
    }
  }

  .label-text {
    color: $blue-250;
    font-size: 14px;
  }

  .mat-mdc-slider.mdc-slider {
    $size: 36px;
    height: $size;

    .mdc-slider__thumb {
      height: $size;
      width: $size;
      left: -$size * 0.5;
    }

    .mat-ripple-element.mat-mdc-slider-active-ripple,
    .mat-ripple-element.mat-mdc-slider-focus-ripple,
    .mat-ripple-element.mat-mdc-slider-hover-ripple {
      height: $size !important;
      width: $size !important;
      left: 0 !important;
      top: 0 !important;
    }
  }

  .mat-mdc-form-field {
    &.no-bottom {
      .mat-mdc-form-field-subscript-wrapper {
        display: none;
      }
    }
  }

}

.dark-theme .mdc-text-field--disabled .mdc-text-field__input {
  color: rgba(255, 255, 255, 0.38);
}

.mat-mdc-form-field.smooth-input {
  height: 36px;
}

.label-text.smoothing-text {
  color: $blue-200;
}
// hide arrows for number inputs
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

// hide arrows for number inputs (FireFox)
input[type=number] {
  -moz-appearance: textfield !important;
}

/* width */
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
  min-height: 32px;
  min-width: 32px;
  border-style: solid;
  border-color: transparent;
  border-width: 4px;
  border-radius: 14px;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb {
  background-color: lighten($blue-600, 10%);
}

::-webkit-scrollbar-thumb:hover {
  background-color: lighten($blue-600, 20%);
}

::-webkit-scrollbar-corner {
  background-color: transparent
}

.mat-mdc-tooltip {
  &.sm-tooltip {
    --mdc-plain-tooltip-container-color: #{$purple};

    .mdc-tooltip__surface {
      max-width: 400px;
      font-size: 11px;
      line-height: 1.55;
      letter-spacing: 0.3px;
    }

    &.break-line {
      .mdc-tooltip__surface {
        white-space: pre-line;
      }
    }
  }

  &.parameter-tooltip {
    margin: 6px auto 6px -74px;
  }
}
