@use '@angular/material' as mat;
@use 'sass:color';

$ndtrp-primary: (
50: #e6f0fa,
100: #c1d8f3,
200: #97bfec,
300: #6da5e4,
400: #4e91de,
500: #2f7ed8,
600: #2a76d4,
700: #236bce,
800: #1d61c8,
900: #124ebf,
A100: #eef3ff,
A200: #bbd0ff,
A400: #88adff,
A700: #6e9bff,
contrast: (
  50: #000000,
  100: #000000,
  200: #000000,
  300: #000000,
  400: #000000,
  500: #ffffff,
  600: #ffffff,
  700: #ffffff,
  800: #ffffff,
  900: #ffffff,
  A100: #000000,
  A200: #000000,
  A400: #000000,
  A700: #000000
)
);

// Plus imports for other components in your app.

// Define a custom typography config that overrides the font-family as well as the
// `headlines` and `body-1` levels.
// $ndtrp-app-typography: mat.define-typography-config(
//   $font-family: "HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica, Arial,Lucida Grande,sans-serif"
// );

// 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($ndtrp-app-typography);

// 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/
$ndtrp-app-primary: mat.m2-define-palette($ndtrp-primary); //colors most widely used across all screens and components
$ndtrp-app-accent: mat.m2-define-palette(
$ndtrp-primary,
A200,
A100,
A400
); //colors used for the floating action button and interactive elements

// The warn palette is optional (defaults to red).
$ndtrp-app-warn: mat.m2-define-palette(mat.$m2-red-palette); //colors used to convey error state

// Create the theme object (a Sass map containing all of the palettes).
$ndtrp-app-theme: mat.m2-define-light-theme(
(
  color: (
    primary: $ndtrp-app-primary,
    accent: $ndtrp-app-accent,
    warn: $ndtrp-app-warn
  )
)
);

@mixin ngx-datetime-range-picker-component-theme($theme) {
  $ndtrp-primary-color: mat.get-theme-color($theme, primary);
  $ndtrp-typography-config: mat.m2-get-typography-config($theme, primary);
  // $ndtrp-primary-color: mat-color($ndtrp-primary-color-map);
  $ndtrp-primary-hover-color: color.adjust($ndtrp-primary-color, $blackness: 25%) !default;
  $ndtrp-primary-text-color: #333 !default;
  $ndtrp-secondary-text-color: color.adjust($ndtrp-primary-text-color, $lightness: 50%) !default;
  $ndtrp-icon-color: color.adjust($ndtrp-primary-text-color, $lightness: 40%) !default;
  $ndtrp-disabled-color: color.adjust($ndtrp-primary-text-color, $lightness: 70%) !default;
  $ndtrp-weekdays-color: #ffc266 !default;
  $ndtrp-range-button-background-color: color.adjust($ndtrp-primary-text-color, $lightness: 75%) !default;
  $ndtrp-range-button-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08) !default;
  $ndtrp-font-family: mat.m2-font-family($ndtrp-typography-config);
  $ndtrp-font-size: mat.m2-font-size($ndtrp-typography-config, body-1);
  $ndtrp-border-color: #74777f !default;
  // @include mat.form-field-colors($theme);
  // @include mat.icon-colors($theme);
  // @include mat.button-colors($theme);
  // @include mat.select-colors($theme);

  .ngx-datetime-range-picker {
    position: relative;
    border-radius: 0;
    width: 100% !important;
    font-size: $ndtrp-font-size;
    font-family: $ndtrp-font-family;

    .full-width {
      width: 100%;
    }

    .date-input-icon-container {
      margin-left: 8px;
    }

    .fa {
      font-size: 100%;
      color: $ndtrp-icon-color;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .fa-calendar {
      color: $ndtrp-icon-color;
    }

    .retail-dateSelect {
      padding: 0 0 0 30px !important;
    }

    .retail-calendar:before {
      content: "\F073";
    }

    .timezone-info {
      font-size: 95%;
      opacity: 0.8;
      font-weight: bolder;
    }

    .calendar-loading {
      min-width: 240px;
      min-height: 240px;
      padding: 54% 48% 46%;
    }

    .calendar-view {
      position: absolute;
      z-index: 1;
      width: fit-content;
      background-color: #fff;
      padding: 8px;
      margin-top: 2px;
      border-radius: 8px;
      box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14),
      0px 1px 10px 0px rgba(0, 0, 0, 0.12);

      .date-select {
        .date-view {
          margin: 0;
        }
      }
    }

    .calendar-view:before,
    .calendar-view:after {
      position: absolute;
      display: inline-block;
      content: "";
    }

    .timezone-select {
      font-size: 90%;
      display: flex;

      .timezones,
      .currentTime {
        display: inline-block;
      }

      .timezones {
        margin-right: auto;
        white-space: nowrap;
        left: 8px;
      }

      .currentTime {
        margin-left: auto;
        white-space: nowrap;
        right: 8px;
      }

      .border-separator {
        border-right: 2px solid #ccc;
        padding-right: 8px;
        margin-right: 8px;
      }

      .timezone {
        display: inline-block;
        cursor: pointer;
      }
    }

    .active-timezone.code {
      font-weight: bolder;
    }

    .dateTitleInput,
    .date-dropdown-container,
    .time-item-container {
      .mdc-text-field--filled:not(.mdc-text-field--disabled),
      .mat-mdc-form-field-focus-overlay {
        background-color: transparent;
      }

      .mdc-text-field--outlined .mat-mdc-form-field-infix,
      .mdc-text-field--no-label .mat-mdc-form-field-infix {
        padding: 0;
        min-height: 36px;
        display: flex;
        align-items: center;
      }
    }

    .date-dropdown-container,
    .time-item-container {
      display: flex;
      justify-content: center;
      width: 100%;

      .mat-mdc-form-field {
        width: 100%;
      }

      .mat-mdc-text-field-wrapper {
        padding: 0;

        .mat-mdc-form-field-infix {
          border-top: 0;
          width: auto;

          .mat-mdc-select-arrow-wrapper {
            width: 24px;
            justify-content: center;
          }
        }

        .mdc-line-ripple::before,
        .mdc-line-ripple::after {
          border-bottom-width: 0px;
        }
      }

      .date-dropdown {
        margin: 0 4px;
        width: 50%;
      }
    }

    .date-select {
      display: inline-flex;
      gap: 4px;

      .date-pick-container {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
    }

    .ranges {
      min-width: 160px;
      padding: 0 2px;
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 4px;

      .calendar-range {
        width: 100%;
        white-space: nowrap;
        border-radius: 9999px;
        color: $ndtrp-primary-color;
        line-height: 30px;
        cursor: pointer;
        border: 1px solid $ndtrp-border-color;
      }

      .active-range {
        background-color: $ndtrp-primary-color;
        border: 1px solid $ndtrp-primary-color;
        color: #fff;
      }

      .active-range:hover {
        color: #fff;
        background-color: $ndtrp-primary-hover-color;
        border-color: $ndtrp-primary-hover-color;
      }

      .range-select-button-container {
        white-space: nowrap;
        width: 96%;
      }

      .range-select-button {
        width: 50%;
        border-radius: 0px;
        line-height: 30px;
        border-radius: 9999px;
      }

      .range-select-button:first-child {
        margin-right: 3px;
      }

      .range-select-button:last-child {
        margin-left: 3px;
      }

      .range-select-apply-button {
        color: #fff;
        background-color: $ndtrp-primary-color;
        border: 1px solid $ndtrp-primary-color;
      }

      .range-select-cancel-button {
        color: $ndtrp-primary-color;
        border: 1px solid $ndtrp-border-color;
      }

      .range-select-button-bottom {
        position: absolute;
        bottom: 4px;
      }
    }

    .calendar-container {
      display: flex;
      padding: 0;
      gap: 8px;
      margin: 0;
    }

    .calendar {
      float: left;
      width: auto;
      display: flex;
      flex-direction: column;
    }

    .calendar-label {
      text-align: center;
      position: relative;
      width: 100%;
    }

    .prev,
    .next {
      .available,
      .disabled {
        display: flex;
        justify-content: center;
      }
      height: 100%;
    }

    .calendar-week-day {
      color: $ndtrp-weekdays-color;
      font-weight: normal;
      font-size: 95%;
    }

    .capitalize {
      text-transform: capitalize;
    }

    .dateTitleInput {
      position: relative;
      border: none;
      width: 100%;
      float: left;
      display: block;
      margin-bottom: 4px;

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

      .dateSelect {
        text-align: center;
      }

      .dateSelect:hover {
        pointer-events: none;
        background: transparent;
        cursor: default;
      }

      i {
        position: absolute !important;
        top: 11px !important;
        left: 10px !important;
        color: $ndtrp-icon-color !important;
      }

      .mat-mdc-text-field-wrapper {
        .mdc-line-ripple::before,
        .mdc-line-ripple::after {
          border-bottom-width: 1px;
        }
      }
    }

    .calendar-table {
      flex-grow: 1;

      .calendar-side-container {
        .calendar-label-container {
          display: flex;
          align-items: center;
          width: 100%;
          align-items: center;
          min-height: 36px;
        }

        table {
          table-layout: fixed;
          min-width: 100%;
          border-collapse: collapse;

          th,
          td {
            white-space: nowrap;
            text-align: center;
          }

          td {
            button {
              border: none;
              background: transparent;
              cursor: pointer;
              padding: 8px;
              width: 100%;
              color: inherit;

              &:disabled {
                cursor: default;
                color: $ndtrp-secondary-text-color;
              }
            }
          }

          td.rowNumber {
            color: color.adjust($ndtrp-primary-text-color, $lightness: 40%);
            border-right: 1px solid color.adjust($ndtrp-primary-text-color, $lightness: 60%);
            font-size: 70%;
            padding: 8px;
          }

          td.rowNumberPlaceholder {
            padding: 0 !important;
            min-width: 0px !important;
          }

          td.valid {
            cursor: pointer;
          }

          td.available:hover,
          th.available:hover {
            background-color: color.adjust($ndtrp-primary-text-color, $lightness: 70%);
            border-radius: 8px;
          }

          td.in-range {
            background-color: color.adjust($ndtrp-primary-text-color, $lightness: 76%);
            color: $ndtrp-primary-color;
          }

          :nth-child(1 of .in-range) {
            &.active {
              &.singleDatePicker {
                border-radius: 8px;
              }

              &.left:not(.singleDatePicker) {
                border-radius: 8px 0 0 8px;
              }

              &.right:not(.singleDatePicker) {
                border-radius: 0 8px 8px 0;
              }
            }
          }

          :nth-last-child(1 of .in-range) {
            &.active {
              &.singleDatePicker {
                border-radius: 8px;
              }

              &.left:not(.singleDatePicker) {
                border-radius: 8px 0 0 8px;
              }

              &.right:not(.singleDatePicker) {
                border-radius: 0 8px 8px 0;
              }
            }
          }

          td.today {
            &.active {
              div {
                border-bottom: 2px solid #fff;
              }
            }

            &:not(.active) {
              div {
                border-bottom: 2px solid $ndtrp-primary-color;
              }
            }
          }
        }
      }
    }

    td.active,
    .fa.active {
      background-color: $ndtrp-primary-color !important;
      color: #fff !important;
    }

    .disabled {
      color: $ndtrp-disabled-color;
      pointer-events: none;
    }

    .month-select,
    .year-select,
    .timeItem-select {
      background: #fff;
      padding: 0;
      box-shadow: none;
      text-align: center;
    }

    .dropdown-menu {
      position: absolute;
      min-width: unset !important;
      font-size: 95%;
      border-radius: 0px;
      max-height: 100px;
      overflow: auto;
    }

    .hide {
      display: none;
    }

    .show {
      display: block;
    }

    .time-picker-container {
      display: flex;
      padding: 0;
      gap: 8px;

      .time-select {
        position: relative;
        padding: 0 4px;
        text-align: center;
        width: 50%;
        margin: 4px 0;
        border: 1px solid $ndtrp-border-color;
        border-radius: 8px;
        display: flex;
        align-items: center;
        width: 100%;

        .clock-icon-container {
          display: flex;
          align-items: center;
        }

        .time-item-container {
          width: 50%;
          margin: 0 4px;
        }
      }
    }
  }
}

@mixin ngx-datetime-range-picker-theme($app-theme: $ndtrp-app-theme) {
  @include ngx-datetime-range-picker-component-theme($app-theme);

  //Setting the overlay very high so it always appears on top
  $cdk-z-index-overlay-container: 999999;
  @import "@angular/cdk/overlay-prebuilt.css";

  //Custom
  .mat-form-field-placeholder {
    font-size: 115% !important;
  }

  .mat-form-field {
    .mat-form-field-wrapper {
      padding-bottom: 0;
    }

    .mat-form-field-underline {
      bottom: 0;
    }
  }
}