@use '@angular/material' as mat;
@use 'colors.scss';
@use 'typography.scss';
@include mat.elevation-classes();
@include mat.app-background();

::-webkit-scrollbar {
  width: 8px;
  padding: 1px;
  background: none;
}
::-webkit-scrollbar-thumb {
  border-radius: 0px;
  opacity: 0.15;
}

//custom color theme
$light-theme: mat.m2-define-light-theme(
  (
    color: (
      primary: mat.m2-define-palette(
          colors.to-material-map(primary),
          50,
          100,
          200
        ),
      accent: mat.m2-define-palette(
          colors.to-material-map(secondary),
          50,
          100,
          200
        ),
      foreground: mat.m2-define-palette(
          colors.to-material-map(dark),
          50,
          100,
          200
        ),
      background: mat.m2-define-palette(
          colors.to-material-map(light),
          50,
          100,
          200
        ),
      warn: mat.m2-define-palette(colors.to-material-map(warn)),
    ),
    // only include 'typography' and 'density' in default theme
    typography: typography.$custom-typography,
    density: 0,
  )
);

$dark-theme: mat.m2-define-dark-theme(
  (
    color: (
      primary: mat.m2-define-palette(
          colors.to-material-map(primary),
          50,
          100,
          200
        ),
      accent: mat.m2-define-palette(
          colors.to-material-map(secondary),
          50,
          100,
          200
        ),
      foreground: mat.m2-define-palette(
          colors.to-material-map(light),
          50,
          100,
          200
        ),
      background: mat.m2-define-palette(
          colors.to-material-map(dark),
          50,
          100,
          200
        ),
      warn: mat.m2-define-palette(colors.to-material-map(warn)),
    ),
  )
);

// apply light theme by default
@include mat.elevation-classes();
@include mat.app-background();
@include mat.button-theme($light-theme);

@include mat.all-component-themes($light-theme);
.light {
  background: colors.color(light);
  color: colors.on-color(light);
  scrollbar-color: rgba(colors.on-color(light), 0.15) transparent; //firefox scrollbar styles
  ::-webkit-scrollbar-thumb {
    background: rgba(colors.on-color(light), 0.15);
    &:hover {
      background: rgba(colors.on-color(light), 0.25);
    }
  }
  hr {
    border: none;
    border-bottom: 1px solid colors.border-color(light);
  }
  .matrix {
    tr.tactic {
      border-color: colors.on-color-deemphasis(light);
      color: white;
      background-color: colors.color(engenuity-purple);
    }
    .tactic td.technique {
      border: 1px solid colors.on-color-deemphasis(light);
    }
    .supertechnique,
    .regularTechnique,
    .subtechniques {
      background-color: white;
      color: black;
    }
    .subtechnique {
      border: 1px solid colors.on-color-deemphasis(light);
    }
    td.angle-top {
      background-color: colors.color(engenuity-gray);
    }
    .sidebar.expanded .angle svg {
      fill: colors.color(engenuity-gray);
    }
  }
  .matrix-container {
    border-color: colors.on-color-deemphasis(light);
  }
}
.dark {
  background: colors.color(dark);
  color: colors.on-color(dark);
  scrollbar-color: rgba(colors.on-color(dark), 0.15) transparent; //firefox scrollbar styles
  @include mat.all-component-colors($dark-theme);
  ::-webkit-scrollbar-thumb {
    background: rgba(colors.on-color(dark), 0.15);
    &:hover {
      background: rgba(colors.on-color(dark), 0.25);
    }
  }
  hr {
    border: none;
    border-bottom: 1px solid colors.border-color(dark);
  }
  .matrix {
    tr.tactic {
      border-color: colors.border-color(dark);
      background-color: colors.color(engenuity-gray);
      color: colors.color(engenuity-black);
    }
    .tactic td.technique {
      border: 1px solid colors.on-color-deemphasis(dark);
    }
    .supertechnique,
    .regularTechnique,
    .subtechniques {
      background-color: colors.color(engenuity-black);
      color: white;
    }
    .subtechnique {
      border: 1px solid colors.on-color-deemphasis(dark);
    }
    td.angle-top {
      background-color: colors.color(engenuity-black);
    }
    .sidebar.expanded .angle svg {
      fill: colors.color(engenuity-black);
    }
  }
  .matrix-container {
    border-color: colors.on-color-deemphasis(dark);
  }
}

$tooltip-color: colors.color-alternate(dark, 4);
//patch overlays for theme compatibility
.cdk-overlay-container,
.cdk-overlay-container {
  //ensure that overlay doesn't visually cover everything
  background: transparent;
  .mat-mdc-tooltip {
    // tooltip styling
    background: $tooltip-color;
  }
  &.dark .mat-mdc-menu-panel {
    background: colors.color(dark);
    color: colors.on-color(dark);
    .mat-mdc-menu-item:hover {
      background: colors.color-alternate(dark);
    }
    .mat-mdc-menu-item:disabled {
      color: colors.on-color-deemphasis(dark);
    }
  }
  &.light .mat-mdc-menu-panel {
    background: colors.color(light);
    color: colors.on-color(light);
    .mat-mdc-menu-item:hover {
      background: colors.color-alternate(light);
    }
    .mat-mdc-menu-item:disabled {
      color: colors.on-color-deemphasis(light);
    }
  }
  &.dark .mat-mdc-dialog-surface {
    background: colors.color(dark);
    color: colors.on-color(dark);
  }
  &.light .mat-mdc-dialog-surface {
    background: colors.color(light);
    color: colors.on-color(light);
  }

  &.light .mat-mdc-snack-bar-container {
    background: colors.color(light);
    color: colors.on-color(light);
  }
  &.dark .mat-mdc-snack-bar-container {
    background: colors.color(dark);
    color: colors.on-color(dark);
  }
  .mat-mdc-snack-bar-container.success {
    background: colors.color(success);
    color: colors.on-color(success);
    button {
      color: colors.on-color(success);
    }
  }
  .mat-mdc-snack-bar-container.warn {
    background: colors.color(warn);
    color: colors.on-color(warn);
    button {
      color: colors.on-color(warn);
    }
  }

  &.light .mat-mdc-select-panel .mat-mdc-option.mat-active {
    background: colors.color-alternate(light, 2.5);
  }
  &.dark .mat-mdc-select-panel .mat-mdc-option.mat-active {
    background: colors.color-alternate(dark, 2.5);
  }

  &.light .mat-datepicker-popup {
    background: colors.color-alternate(light);
  }
  &.dark .mat-datepicker-popup {
    background: colors.color-alternate(dark);
  }
}

//patch popover style
// https://ng-matero.github.io/extensions/components/popover/overview
.mtx-popover-panel {
  padding: 0 !important;
  .mtx-popover-direction-arrow::after,
  .mtx-popover-direction-arrow::before {
    color: $tooltip-color !important;
  }
}
.mtx-popover-content {
  border-radius: 4px !important;
  padding: 1.5em;
  color: colors.color(light);
  background-color: $tooltip-color !important;

  .c-align-popover {
    text-transform: lowercase;
    text-align: center;
  }
  .history-peek {
    .labelled-box {
      margin-bottom: 8px;
    }
  }
  .help-content {
    width: 100% !important;
    display: block !important;
    text-align: justify !important;
    line-height: 1.25 !important;
    font-size: 17px !important;
    word-spacing: 0.25px !important;
  }

  // override child labelled-box borders for visibility
  .labelled-box .content {
    border-top-color: transparent !important;
    ul {
      margin: 0.5em 0 !important;
    }
    &,
    & + .labelled-box-label,
    .suffix {
      border-right-color: colors.on-color-deemphasis(dark) !important;
      border-left-color: colors.on-color-deemphasis(dark) !important;
      border-bottom-color: colors.on-color-deemphasis(dark) !important;
    }
    & + .labelled-box-label::before,
    & + .labelled-box-label::after {
      border-top-color: colors.on-color-deemphasis(dark) !important;
    }
  }

  // override mat-chip styles
  .mat-mdc-chip.mat-mdc-standard-chip {
    background: colors.color-alternate(dark) !important;
    .v-align {
      color: colors.on-color(dark) !important;
    }
  }

  // override styles for object status popover
  .workflow-status {
    .mat-mdc-form-field {
      display: flex;
    }
    .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(
        .mdc-text-field--invalid
      ),
    .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(
        .mdc-text-field--invalid
      ):hover {
      .mdc-notched-outline__leading,
      .mdc-notched-outline__notch,
      .mdc-notched-outline__trailing {
        border-color: colors.color(light);
      }
      .mat-mdc-floating-label {
        color: colors.color(light);
      }
    }
    .mdc-text-field--outlined:hover {
      .mdc-notched-outline__leading,
      .mdc-notched-outline__notch,
      .mdc-notched-outline__trailing {
        border-width: 2px;
      }
    }
    .mat-mdc-floating-label {
      text-transform: lowercase;
    }
    .mat-mdc-select,
    .mat-mdc-select-arrow {
      color: colors.color(light);
    }
    .status-options {
      .mat-mdc-checkbox:not(.mat-mdc-checkbox-checked) {
        &:not(.disabled) {
          .mdc-checkbox__background {
            border-color: colors.color(light) !important;
          }
        }
        &.disabled {
          .mdc-checkbox__background {
            border-color: colors.on-color-deemphasis(light) !important;
          }
        }
      }
      .mat-mdc-checkbox {
        &:not(.disabled) {
          .mdc-label {
            color: colors.color(light);
          }
        }
        &.disabled {
          .mdc-label {
            color: colors.on-color-deemphasis(light) !important;
          }
        }
      }
      .mat-mdc-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__checkmark {
        color: colors.color(light);
      }
      .mat-mdc-checkbox + .mat-mdc-checkbox {
        padding-left: 10px !important;
      }
    }
  }
}

button.mat-mdc-outlined-button:disabled {
  opacity: 0.5;
}

.mat-mdc-select-panel {
  .light & {
    color: colors.on-color(light);
    background: colors.color(light);
  }
  .dark & {
    color: on-color-alternate(dark);
    background: colors.color-alternate(dark);
  }
}

.mdc-text-field--filled:not(.mdc-text-field--disabled),
.mat-mdc-paginator,
.mat-expansion-panel,
.mat-stepper-vertical {
  .light & {
    background-color: colors.color(light) !important;
  }
  .dark & {
    background-color: colors.color(dark) !important;
  }
}
.mat-step-icon:not(.mat-step-icon-selected) {
  .light & {
    background-color: colors.border-color(light);
  }
  .dark & {
    background-color: colors.border-color(dark);
  }
}
// remove form field focus overlay
.mat-mdc-form-field-focus-overlay {
  background-color: transparent !important;
}

.mdc-text-field--filled:not(.mdc-text-field--disabled)
  .mdc-line-ripple::before {
  .light & {
    border-bottom-color: colors.border-color(light) !important;
  }
  .dark & {
    border-bottom-color: colors.border-color(dark) !important;
  }
}

.mat-mdc-card .mat-mdc-card-header {
  .light & {
    background: colors.color-alternate(light);
  }
  .dark & {
    background: colors.color-alternate(dark);
  }
}

.mat-mdc-chip.mat-mdc-standard-chip {
  height: auto !important;
  .light & {
    background: colors.color-alternate(light);
  }
  .dark & {
    background: colors.color-alternate(dark);
  }
}

.mat-step-icon:not(.mat-step-icon-selected):not(.mat-step-icon-state-edit) {
  .dark & {
    color: colors.on-color(dark);
  }
  .light & {
    color: colors.on-color(light);
  }
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  @extend %typography;
}
