/* ======================================================================== *
 * Copyright 2025 HCL America Inc.                                          *
 * Licensed under the Apache License, Version 2.0 (the "License");          *
 * you may not use this file except in compliance with the License.         *
 * You may obtain a copy of the License at                                  *
 *                                                                          *
 * http://www.apache.org/licenses/LICENSE-2.0                               *
 *                                                                          *
 * Unless required by applicable law or agreed to in writing, software      *
 * distributed under the License is distributed on an "AS IS" BASIS,        *
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. *
 * See the License for the specific language governing permissions and      *
 * limitations under the License.                                           *
 * ======================================================================== */

@use "sass:map";
@use "../../common/palette";
@use "../../common/themeMap.module";
@use "../../common/typography";

@mixin enchanted-datepicker-base-styles(
  $part-datepicker-root: 'datepicker-root',
  $part-datepicker-div-label-and-action: 'datepicker-div-label-and-action',
  $part-datepicker-div-label: 'datepicker-div-label',
  $part-datepicker-label-icon: 'datepicker-label-icon',
  $part-datepicker-label-required: 'datepicker-label-required',
  $part-datepicker-remove-label: 'datepicker-remove-label',
  $part-datepicker-remove-label-disabled: 'datepicker-remove-label-disabled',
  $part-datepicker-label-text: 'datepicker-label-text',
  $part-datepicker-label-text-disabled: 'datepicker-label-text-disabled',
  $part-datepicker-label-text-invalid: 'datepicker-label-text-invalid',
  $part-datepicker-div-form: 'datepicker-div-form',
  $part-datepicker-div-input: 'datepicker-div-input',
  $part-datepicker-div-input-disabled: 'datepicker-div-input-disabled',
  $part-datepicker-div-input-invalid: 'datepicker-div-input-invalid',
  $part-datepicker-input: 'datepicker-input',
  $part-datepicker-input-rtl: 'datepicker-input-rtl',
  $part-datepicker-help-text: 'datepicker-help-text',
  $part-datepicker-help-text-rtl: 'datepicker-help-text-rtl',
  $part-datepicker-invalid-text: 'datepicker-invalid-text',
  $part-datepicker-invalid-text-rtl: 'datepicker-invalid-text-rtl',
  $part-datepicker-div-icon: 'datepicker-div-icon',
  $part-datepicker-div-calendar-button: 'datepicker-div-calendar-button',
  $part-datepicker-calendar: 'datepicker-calendar',
  $part-datepicker-calendar-header: 'datepicker-calendar-header',
  $part-datepicker-calendar-days: 'datepicker-calendar-days',
  $part-datepicker-calendar-day-label: 'datepicker-calendar-day-label',
  $part-datepicker-calendar-dates: 'datepicker-calendar-dates',
  $part-datepicker-calendar-date-span: 'datepicker-calendar-date-span',
  $part-datepicker-calendar-dates-empty-div: 'datepicker-calendar-dates-empty-div',
  $part-datepicker-calendar-dates-button: 'datepicker-calendar-dates-button',
  $part-datepicker-calendar-dates-button-selected: 'datepicker-calendar-dates-button-selected',
  $part-datepicker-calendar-dates-today-span: 'datepicker-calendar-dates-today-span',
  $part-datepicker-calendar-dates-today-span-rtl: 'datepicker-calendar-dates-today-span-rtl',
  $part-datepicker-calendar-div-year: 'datepicker-calendar-div-year',
  $part-datepicker-calendar-div-year-span: 'datepicker-calendar-div-year-span',
  $part-datepicker-calendar-year-view-button: 'datepicker-calendar-year-view-button',
  $part-datepicker-calendar-year-view-button-rtl: 'datepicker-calendar-year-view-button-rtl',
  $part-datepicker-calendar-div-month: 'datepicker-calendar-div-month',
  $part-datepicker-calendar-month-prev: 'datepicker-calendar-month-prev',
  $part-datepicker-calendar-month-next: 'datepicker-calendar-month-next',
  $part-datepicker-calendar-month-prev-rtl: 'datepicker-calendar-month-prev-rtl',
  $part-datepicker-calendar-month-next-rtl: 'datepicker-calendar-month-next-rtl',
  $part-datepicker-calendar-footer: 'datepicker-calendar-footer',
  $part-datepicker-calendar-footer-button: 'datepicker-calendar-footer-button',
  $part-datepicker-calendar-year-selection: 'datepicker-calendar-year-selection',
  $part-datepicker-calendar-year-selection-years: 'datepicker-calendar-year-selection-years',
  $part-datepicker-calendar-year-selection-year-div: 'datepicker-calendar-year-selection-year-div',
  $part-datepicker-calendar-year-selection-year-button: 'datepicker-calendar-year-selection-year-button',
  $part-datepicker-calendar-year-selection-year-button-selected: 'datepicker-calendar-year-selection-year-button-selected'
) {
  &::part(#{$part-datepicker-root}) {
    display: inline-flex;
    flex-direction: column;
    position: relative;
    min-width: 0px;
    padding: 0px;
    margin: 0px;
    border: 0px;
    vertical-align: top;
    width: 100%;
    top: -2px;
  }

  &::part(#{$part-datepicker-div-label-and-action}) {
    margin: 0px 0px 4px;
    width: 100%;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
  }

  &::part(#{$part-datepicker-div-label}) {
    padding: 0px;
    flex-basis: auto;
    max-width: unset;
  }

  &::part(#{$part-datepicker-label-icon}) {
    user-select: none;
    width: 1em;
    height: 1em;
    display: inline-block;
    fill: currentcolor;
    flex-shrink: 0;
    color: palette.clr(light, text, secondary);
    @include typography.font-default;
    font-weight: 600;
    margin-left: 8px;
    margin-bottom: -4px;
    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --icon-theme-size: 16px;
  }

  &::part(#{$part-datepicker-label-required}) {
    @include typography.subtitle2;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
  }

  &::part(#{$part-datepicker-label-text}) {
    transform-origin: left top;
    text-overflow: ellipsis;
    left: 0px;
    top: 0px;
    z-index: 1;
    @include typography.subtitle2;
    color: palette.clr(light, text, secondary);
    pointer-events: inherit;
    position: relative;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    transform: none;
    word-break: break-word;
    max-width: 120px;
    padding: 0px;
    overflow: hidden;
    transition: color 200ms cubic-bezier(0, 0, 0.2, 1), transform 200ms cubic-bezier(0, 0, 0.2, 1), max-width 200ms cubic-bezier(0, 0, 0.2, 1);
    margin: 0px;
    white-space: pre-wrap;
  }

  &::part(#{$part-datepicker-label-text-disabled}) {
    color: palette.clr(light, text, disabled);
  }

  &::part(#{$part-datepicker-label-text-invalid}) {
    color: palette.clr(light, error, main);
  }

  &::part(#{$part-datepicker-remove-label}) {
    @include typography.caption;
    color: palette.clr(light, primary, main);
    cursor: pointer;
  }

  &::part(#{$part-datepicker-remove-label-disabled}) {
    color: palette.clr(light, text, disabled);
    cursor: unset;
  }

  &::part(#{$part-datepicker-div-form}) {
    display: inline-flex;
    flex-direction: column;
    position: relative;
    min-width: 0px;
    padding: 0px;
    margin: 0px;
    border: 0px;
    vertical-align: top;
  }

  &::part(#{$part-datepicker-div-input}) {
    background: palette.clr(light, background, paper);
    @include typography.body1;
    color: palette.clr(light, text, primary);
    border: 1px solid palette.clr(light, action, active);
    box-sizing: border-box;
    cursor: text;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    position: relative;
    border-radius: 2px;
    width: 100%;
    margin: 0px;
    padding: 5px 8px;
  }
  &::part(#{$part-datepicker-div-input-disabled}) {
    background-color: palette.clr(light, action, disabledBackground);
  }
  &::part(#{$part-datepicker-div-input-invalid}) {
    border: 1px solid palette.clr(light, error, main);
  }

  &::part(#{$part-datepicker-input}) {
    @include typography.body2;
    color: palette.clr(light, text, primary);
    padding: 0px;
    height: 22px;
    border: none;
    box-sizing: content-box;
    background: none;
    margin: 0px;
    -webkit-tap-highlight-color: transparent;
    display: block;
    min-width: 0px;
    width: 100%;
    text-align: left;
  }

  &::part(#{$part-datepicker-input-rtl}) {
    text-align: right;
  }

  &::part(#{$part-datepicker-input}):focus-visible {
    outline: none;
  }

  &::part(#{$part-datepicker-help-text}) {
    margin: 4px 0px 0px;
    @include typography.caption;
    color: palette.clr(light, text, secondary);
    cursor: default;
    text-align: left;
  }

  &::part(#{$part-datepicker-help-text-rtl}) {
    text-align: right;
  }

  &::part(#{$part-datepicker-invalid-text}) {
    margin: 4px 0px 0px;
    @include typography.caption;
    color: palette.clr(light, error, main);
    cursor: default;
    text-align: left;
  }

  &::part(#{$part-datepicker-invalid-text-rtl}) {
    text-align: right;
  }

  // Parent div of the calendar icon
  &::part(#{$part-datepicker-div-icon}) {
    margin: 0px;
    display: flex;
    max-height: 2em;
    -webkit-box-align: center;
    align-items: center;
    white-space: nowrap;
    color: palette.clr(light, text, secondary);
    --icon-theme-size: 16px;
  }
  
  &::part(#{$part-datepicker-calendar}) {
    background: palette.clr(light, background, paper);
    z-index: 2147483646; // High z-index to ensure it appears above other elements
    opacity: 1;
    transform: none;
    transition: opacity 318ms cubic-bezier(0.4, 0, 0.2, 1), transform 212ms cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    background-color: palette.clr(light, background, paper);
    color: palette.clr(light, text, primary);
    transform-origin: center top;
    @include typography.body2;
    height: auto;
    box-shadow: palette.clr(light, action, activeOpacity) 0px 4px 10px 0px;
    border-radius: 4px;
    outline: none;
    padding: 0px;
    position: absolute;
    transform: translate3d(0px, -4px, 0);
    min-width: 240px;
  }

  &::part(#{$part-datepicker-calendar-header}) {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    -webkit-box-align: center;
    align-items: center;
    max-height: 30px;
    min-height: 30px;
  }

  &::part(#{$part-datepicker-calendar-days}) {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    text-align: center;
    @include typography.body1;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    padding: 4px 16px;
  }

  &::part(#{$part-datepicker-calendar-day-label}) {
    @include typography.body2;
    color: palette.clr(light, text, secondary);
    margin: 0 auto;
    width: 24px;
    padding: 0px;
    height: 16px;
  }

  &::part(#{$part-datepicker-calendar-dates}) {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    text-align: center;
    height: auto;
    min-height: 140px;
    -webkit-box-pack: center;
    justify-content: center;
    position: relative;
    padding: 8px 16px;
  }

  &::part(#{$part-datepicker-calendar-dates-empty-div}) {
    border: none;
    height: 24px;
    width: 24px;
    margin: 4px 2px;
    @include typography.body2;
    border-radius: 50%;
    padding: 0px;
    background-color: palette.clr(light, background, paper);
    color: palette.clr(light, text, primary);
    opacity: 0;
  }

  &::part(#{$part-datepicker-calendar-date-span}) {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    flex-shrink: 0;
    margin: 0 auto;
  }

  &::part(#{$part-datepicker-calendar-dates-button}) {
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
    appearance: none;
    text-decoration: none;
    outline: none;
    border: none;
    padding: 0px;
    flex-shrink: 0;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    margin: 4px 2px;
    @include typography.body2;
    background-color: palette.clr(light, background, paper);
    color: palette.clr(light, text, primary);
  }

  &::part(#{$part-datepicker-calendar-dates-button}):hover {
    background-color: palette.clr(light, action, hover);
    border-radius: 50%;
  }

  &::part(#{$part-datepicker-calendar-dates-button}):focus-visible {
    background-color: palette.clr(light, background, paper);
    border: none;
    outline: map.get(themeMap.$enchantedPalette, HCLSOFTWAREBLUE06) solid 1px;
    outline-offset: 3px;
  }

  &::part(#{$part-datepicker-calendar-dates-button-selected}) {
    background-color: map.get(themeMap.$enchantedPalette, HCLSOFTWAREBLUE06);
    color: palette.clr(light, text, tertiary1);
    font-weight: 500;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  &::part(#{$part-datepicker-calendar-dates-button-selected}):hover {
    background-color: palette.clr(light, primary, dark);
  }

  &::part(#{$part-datepicker-calendar-dates-button-selected}):focus-visible {
    background-color: map.get(themeMap.$enchantedPalette, HCLSOFTWAREBLUE06);
    border: none;
    outline: map.get(themeMap.$enchantedPalette, HCLSOFTWAREBLUE06) solid 1px;
    outline-offset: 3px;
  }

  &::part(#{$part-datepicker-calendar-div-year}) {
    margin-right: 0px;
    @include typography.subtitle2;
    --icon-theme-size: 16px;
  }

  &::part(#{$part-datepicker-calendar-div-year-span}) {
    margin: 0;
  }

  &::part(#{$part-datepicker-div-calendar-button}),
  &::part(#{$part-datepicker-calendar-year-view-button}),
  &::part(#{$part-datepicker-calendar-month-prev}),
  &::part(#{$part-datepicker-calendar-month-next}) {
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
    appearance: none;
    text-align: center;
    height: 20px;
    width: 20px;
    color: palette.clr(light, text, secondary);
    background-color: transparent;
    outline: none;
    border-width: 0px;
    border-style: initial;
    border-color: initial;
    border-image: initial;
    margin: 0 0 0 4px;
    text-decoration: none;
    flex: 0 0 auto;
    overflow: visible;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
    padding: 0px;
  }

  &::part(#{$part-datepicker-div-calendar-button}) {
    height: 16px;
    width: 16px;
    margin: 0;
  }

  &::part(#{$part-datepicker-calendar-year-view-button-rtl}),
  &::part(#{$part-datepicker-calendar-month-prev-rtl}),
  &::part(#{$part-datepicker-calendar-month-next-rtl}) {
    margin: 0 4px 0 0;
  }

  &::part(#{$part-datepicker-div-calendar-button}):hover,
  &::part(#{$part-datepicker-calendar-year-view-button}):hover,
  &::part(#{$part-datepicker-calendar-month-prev}):hover,
  &::part(#{$part-datepicker-calendar-month-next}):hover {
    border-radius: 2px;
    background-color: palette.clr(light, action, hover);
  }

  &::part(#{$part-datepicker-div-calendar-button}):focus,
  &::part(#{$part-datepicker-calendar-year-view-button}):focus,
  &::part(#{$part-datepicker-calendar-month-prev}):focus,
  &::part(#{$part-datepicker-calendar-month-next}):focus {
    outline: map.get(themeMap.$enchantedPalette, HCLSOFTWAREBLUE06) solid 1px;
    border-radius: 3px;
    outline-offset: -2px;
  }

  &::part(#{$part-datepicker-div-calendar-button}):focus {
    outline: map.get(themeMap.$enchantedPalette, HCLSOFTWAREBLUE06) solid 1px;
    outline-offset: -1px;
  }

  &::part(#{$part-datepicker-calendar-month-prev}):disabled,
  &::part(#{$part-datepicker-calendar-month-next}):disabled,
  &::part(#{$part-datepicker-calendar-month-prev-rtl}):disabled,
  &::part(#{$part-datepicker-calendar-month-next-rtl}):disabled {
    background-color: transparent;
    color: palette.clr(light, text, disabled);
    pointer-events: none;
    cursor: default;
  }

  &::part(#{$part-datepicker-calendar-div-month}) {
    opacity: 1;
    transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    --icon-theme-size: 16px;
  }

  &::part(#{$part-datepicker-calendar-footer}) {
    display: -webkit-box;
    padding: 12px 0px;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    align-items: center;
    flex: 0 0 auto;
  }

  &::part(#{$part-datepicker-calendar-footer-button}) {
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
    appearance: none;
    min-width: 64px;
    color: map.get(themeMap.$enchantedPalette, HCLSOFTWAREBLUE06);
    @include typography.subtitle2;
    text-transform: none;
    box-sizing: border-box;
    background-color: palette.clr(light, background, paper);
    outline: none;
    border-width: 0px;
    border-style: initial;
    border-color: initial;
    border-image: initial;
    margin: 0px;
    text-decoration: none;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
    padding: 6px 12px;
  }  

  &::part(#{$part-datepicker-calendar-footer-button}):hover {
    text-decoration: none;
    background-color: palette.clr(light, action, hover);
  }

  &::part(#{$part-datepicker-calendar-footer-button}):focus {
    outline: palette.clr(light, action, focus) solid 1px;
    outline-offset: -2px;
    border-radius: 3px;
  }

  &::part(#{$part-datepicker-calendar-dates-today-span}) {
    padding: 1px;
    width: 4px;
    height: 1px;
    border-radius: unset;
    min-width: 0px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    justify-content: center;
    align-content: center;
    -webkit-box-align: center;
    align-items: center;
    box-sizing: border-box;
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 0.75rem;
    z-index: 2147483647; // Highest z-index to ensure it appears above other elements
    background-color: map.get(themeMap.$enchantedPalette, HCLSOFTWAREBLUE06);
    color: map.get(themeMap.$enchantedPalette, HCLSOFTWAREBLUE06);
    transform: scale(1) translate(50%, 50%);
    transform-origin: 100% 100%;
    transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1);
    position: absolute;
    right: 50%;
    top: 70%;
    bottom: 14%;
  }

  &::part(#{$part-datepicker-calendar-dates-today-span-rtl}) {
    right: 48%;
  }

  &::part(#{$part-datepicker-calendar-year-selection-years}) {
    display: flex;
    flex-flow: wrap;
    overflow-y: auto;
    height: 100%;
    padding: 0 4px;
    max-height: 304px;
    text-align: center;
  }

  &::part(#{$part-datepicker-calendar-year-selection-year-div}) {
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
  }

  &::part(#{$part-datepicker-calendar-year-selection-year-button}) {
    color: unset;
    background-color: transparent;
    border: 0px;
    outline: none;
    @include typography.subtitle1;
    margin: 8px 0px;
    height: 36px;
    width: 72px;
    border-radius: 18px;
    cursor: pointer;
  }

  &::part(#{$part-datepicker-calendar-year-selection-year-button}):hover {
    background-color: palette.clr(light, action, hover);
  }

  &::part(#{$part-datepicker-calendar-year-selection-year-button}):focus-visible {
    background-color: palette.clr(light, action, hover);
  }

  &::part(#{$part-datepicker-calendar-year-selection-year-button-selected}) {
    color: palette.clr(light, background, paper);
    background-color: map.get(themeMap.$enchantedPalette, HCLSOFTWAREBLUE06);
  }

  &::part(#{$part-datepicker-calendar-year-selection-year-button-selected}):hover {
    background-color: palette.clr(light, primary, dark);
  }

  &::part(#{$part-datepicker-calendar-year-selection-year-button-selected}):focus-visible {
    background-color: palette.clr(light, primary, dark);
  }
}