@use '@angular/material' as mat;
@import "variables";

.dark-theme, .light-theme {

  --mat-form-field-outlined-label-text-populated-size: 12px;
  --mat-form-field-subscript-text-tracking: 0;

  /* mat select */
  --mat-select-trigger-text-size: 14px;
  --mat-select-trigger-text-tracking: 0;
  --mat-option-label-text-size: 14px;
  --mat-option-label-text-tracking: 0;
  --mat-option-label-text-line-height: 32px;


  mat-error {
    font-size: 12px;
  }

  .entity-context-menu .cdk-program-focused {
    background-color: transparent !important;
  }

  .mat-mdc-form-field {

    --mat-menu-item-label-text-size: 14px;
    --mat-menu-item-label-text-line-height: 16px;

    &.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: 36px;
            padding: 5px 0;
          }
        }
      }


    }

    &.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%;
        }
      }
    }

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

    .mat-mdc-form-field-hint-wrapper,
    .mat-mdc-form-field-error-wrapper {
      padding: 0;
      --mdc-typography-caption-letter-spacing: 0;
    }

  }
}

.mat-mdc-form-field.notched {
  .mat-mdc-text-field-wrapper.mdc-text-field--outlined {
    margin-top: 20px;
    padding-left: max(12px, var(--mdc-outlined-text-field-container-shape));
    padding-right: max(12px, var(--mdc-outlined-text-field-container-shape));

    .mdc-notched-outline--upgraded {
      .mdc-floating-label--float-above {
        --mat-mdc-form-field-label-transform: translate(0, -44px) scale(1);
        margin-left: -16px;
        font-size: 12px;
      }
    }

    .mdc-notched-outline__notch {
      border-top: 1px solid;
      border-left: none !important;
    }
  }
}

.mat-mdc-autocomplete-panel {
  padding: 0;

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

  &.dark, &.black {
    --mat-autocomplete-background-color: #000;

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

  .mat-mdc-option {
    min-height: 36px;
  }
}

.dark-theme.mat-mdc-select-panel {
  --mdc-theme-primary: #{$blue-200};
  --mdc-list-list-item-label-text-color: #{$blue-200};
  --mdc-theme-text-primary-on-background: #{$blue-200};
  --mat-menu-item-label-text-size: 14px;
}

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

    &: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 {
    --mat-select-enabled-trigger-text-color: #{$blue-200};
  }
  .mat-mdc-option {
    --mat-option-label-text-color: #{$blue-200};
    &.mdc-list-item--selected:not(.mdc-list-item--disabled) .mat-mdc-menu-item-text {
      --mat-option-selected-state-label-text-color: #{$blue-100};
    }
  }
  .mat-mdc-select-arrow {
    --mat-select-enabled-arrow-color: #{$blue-300};
  }
  .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow {
    --mat-select-focused-arrow-color: #{$blue-100};
  }
  /* placeholder */
  .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input::placeholder {
    color: $blue-300;
  }
  .mat-mdc-menu-item .mat-mdc-menu-submenu-icon {
    --mat-menu-item-icon-color: #{$blue-300};
  }
  .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
    color: $blue-200;
  }
}

.light-theme {

  --mdc-filled-text-field-label-text-color: #{$blue-400};
  --mdc-outlined-text-field-label-text-color: #{$blue-400};
  --mat-select-placeholder-text-color: #{$blue-300};

  mat-option {
    --mat-option-hover-state-layer-color: #{$blue-50};
    --mat-option-focus-state-layer-color: #{$blue-100};
    --mat-option-selected-state-layer-color: #{$blue-50};
    margin: 0 4px;
  }

  .mat-mdc-select {
    --mat-select-enabled-trigger-text-color: #{$blue-500};
  }
  .mat-mdc-option {
    --mat-option-label-text-color: #{$blue-500};
    &.mdc-list-item--selected:not(.mdc-list-item--disabled) .mat-mdc-menu-item-text {
      --mat-option-selected-state-label-text-color: #{$blue-600};
    }
  }
  .mat-mdc-select-arrow {
    --mat-select-enabled-arrow-color: #{$blue-400};
  }
  .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow {
    --mat-select-focused-arrow-color: #{$blue-500};
  }
  /* placeholder */
  .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input::placeholder {
    color: $blue-300;
  }
  .mat-mdc-menu-item .mat-mdc-menu-submenu-icon {
    --mat-menu-item-icon-color: #{$blue-400};
  }
  .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
    color: $blue-500;
  }


  .mat-mdc-form-field, .mat-mdc-form-field.notched {

    mat-label {
      color: $blue-400;
    }

    .mdc-notched-outline__notch {
      clip-path: unset;
    }

    .mdc-text-field--outlined.mdc-text-field--disabled .mdc-notched-outline__notch {
      border-color: rgba(0, 0, 0, 0.06);
    }

    .mdc-text-field--outlined:not(.mdc-text-field--disabled) {
      .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
        --mdc-outlined-text-field-focus-outline-width: 1px;
        border-color: $cloudy-blue;
        //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-250;
        }
      }

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

  .mat-mdc-select, &.mat-mdc-select-panel {
    --mat-menu-item-label-text-size: 14px;

    .mat-mdc-option {
      border-radius: 4px;
      //height: 40px;
      min-height: 40px;
      line-height: 40px;
      margin-bottom: 2px;

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

      .mat-mdc-menu-item-text {
        display: inline-block;
        flex-grow: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    &.wider-options {
      min-width: 250px;
    }
  }
}

body.dark-theme .mat-mdc-select-panel.dark-outline,
body.dark-theme .mat-mdc-autocomplete-panel.dark-outline {
  --mdc-theme-primary: #{$blue-200};
  --mat-menu-item-label-text-size: 14px;
  --mat-option-selected-state-label-text-color: $blue-200;
  background-color: #000;
  border: 1px solid $blue-500;
  padding: 4px;
  max-height: 280px;

  .mat-mdc-option:hover:not(.mat-option-disabled), .mat-option:focus:not(.mat-option-disabled) {
    background: $blue-700;
  }

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

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

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

  .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;
  }

  .mdc-menu-surface.mat-mdc-autocomplete-panel {
    border: 1px solid $blue-500;
    padding: 4px;
  }

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

  &.mat-primary .mat-mdc-option.mat-selected:not(.mat-option-disabled) .mat-mdc-menu-item-text {
    color: $blue-200;
  }

  &.unset-option-height .mat-mdc-option {
    // show all options text inside
    height: unset;
    line-height: normal;
  }
}

.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;
  }
}

.light-theme .mat-mdc-slide-toggle.mat-primary {
  --mdc-switch-selected-hover-handle-color: #{$purple};
  --mdc-switch-selected-focus-handle-color: #{$purple};
  --mdc-switch-selected-pressed-handle-color: #{$purple};
  --mdc-switch-unselected-focus-handle-color: #616161;
  --mdc-switch-selected-track-color: #{rgba($purple, 0.3)};
  --mdc-switch-selected-focus-track-color: #{rgba($purple, 0.3)};
  --mdc-switch-selected-pressed-track-color: #{rgba($purple, 0.4)};
  --mdc-switch-selected-hover-track-color: #{rgba($purple, 0.4)};
}

.mat-mdc-slide-toggle .mdc-switch {
    margin-right: 8px;
    --mdc-switch-selected-icon-size: 8px;
    --mdc-switch-unselected-icon-size: 8px;
    --mdc-switch-handle-width: 14px;
    --mdc-switch-handle-height: 14px;
    --mat-switch-with-icon-handle-size: 14px;
    --mdc-switch-track-width: 30px;
    --mdc-switch-state-layer-size: 32px;
}

.light-theme .mat-mdc-slider.mat-primary {
  --mdc-slider-inactive-track-height: 2px;
  --mdc-slider-inactive-track-color: #{$cloudy-blue-two};
  --mdc-slider-active-track-height: 2px;
  --mdc-slider-active-track-color: #{$blue-280};
  --mdc-slider-handle-width: 14px;
  --mdc-slider-handle-height: 14px;
  --mdc-slider-handle-color: #{$blue-300};
  --mdc-slider-label-container-color: #{$purple};
  --mat-mdc-slider-value-indicator-opacity: 1;

}

.indicator-position-bottom.mdc-slider {
  .mdc-slider__value-indicator-container {
    bottom: auto;
    top: 40px;
  }

  .mdc-slider__value-indicator {
    transform-origin: top;

    &:before {
      transform: rotate(180deg);
      top: -6px;
      margin-left: -6px;
    }
  }
}

.mat-mdc-menu-panel.dark {
  border-radius: 6px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  border: solid 1px $blue-500;
  background-color: $black;

  --mdc-theme-text-primary-on-background: $blue-200;

  .mat-mdc-menu-item {
    color: $blue-200;

    &:disabled {
      opacity: 0.5;
    }

    &:hover {
      background-color: $dark-grey-blue;
    }
  }
}

.dark-theme .mat-mdc-button.mat-unthemed {
  --mdc-text-button-label-text-color: #000;
}

.mat-calendar-hidden-label {
  display: none !important;
}

.mat-calendar-body-selected {
  background-color: $blue-200;
}

.mat-mdc-input-element {
  font-size: var(--input-font-size, 14px) !important;
}

.mat-mdc-tab-header {
  //border-bottom: 1px solid #efefef;

  .mat-mdc-tab-header-pagination {
    color: $blue-400;
  }
}

.mat-mdc-tab-link-container {
  --mat-tab-header-divider-height: 0;
}

.mat-mdc-tab-link.mdc-tab {
  height: 38px !important;
  padding: 0 16px;
  color: $blue-300;
  min-width: 40px;

  &.mdc-tab-indicator--active {
    color: $purple;
  }
}

.dark-theme, .light-theme {
  .mat-primary .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-minimal::after,
  .mat-primary .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-full::after,
  .mat-primary .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-full::after {
    color: $blue-200;
  }
}
