/*!
 * 
 * Copyright (c) 2019-2023 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
 * and/or its subsidiaries and/or its affiliates and/or their licensors.
 * 
 */

@import "../variables";
@import "../variables/forms_vars";
@import "../variables/datepickers_vars";
@import "../mixins";


.datepicker-icon {
  position: absolute;
  border: none;
  outline: none;
  font-size: $date-pickers-icon-font-size;
  color: $forms-color-icon-interactive-secondary;
  background-color: transparent;
  padding: 0;
  margin: 0;
  width: auto !important;
  height: auto !important;
  //line-height: $forms-icon-line-height;
  cursor: unset;
  &.large {
    right: $date-pickers-icon-margin-large !important;
  }
  &.default {
    right: $date-pickers-icon-margin-default !important;
  }
}

.dlt-date-picker {
  width: 100%;
  line-height: $forms-input-line-height;
  border: $forms-border-width $forms-border-style $forms-color-input-border;
  border-radius: $forms-border-radii;
  background: $forms-color-input-background;
  font-size: $forms-input-font-size;
  font-family: $forms-font-family;
  font-weight: $forms-input-font-weight;
  color: $forms-color-text;
  padding: $forms-input-padding-y $forms-input-padding-x;

  &::-webkit-inner-spin-button {
    @include x-appearance(none);
    display: none;
  }

  &::-webkit-calendar-picker-indicator {
    opacity: 0;
  }

  // &:hover,
  &:focus,
  &:active {
    border: $forms-border-width $forms-border-style $forms-color-primary;
    outline: $forms-border-width-hover $forms-border-style-hover $forms-color-primary;
    outline-offset: $forms-outline-offset;
  }

  &::placeholder {
    font-style: $forms-input-placeholder-font-style;
    color: $forms-color-text-interactive-muted;
  }
}

/* Date Picker - End -*/


/*!
 * Datepicker v1.0.9
 * https://fengyuanchen.github.io/datepicker
 *
 * Copyright 2014-present Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2019-01-06T02:42:32.803Z

 * CUSTOMIZED FOR DELITE - SOFTWARE AG
 */


.datepicker-container {
  border-radius: $forms-border-radii;
  background-color: $forms-color-background;
  direction: ltr;
  font-size: $date-pickers-font-size-sm;
  left: 0;
  line-height: $date-pickers-line-height;
  position: fixed;
  -webkit-tap-highlight-color: transparent;
  top: 0;
  @include no-action;
  @include no-select;
  width: 296px;
  z-index: -1;
  border: none;

  &::before,
  &::after {
    border: none;
    content: " ";
    display: block;
    height: 0;
    position: absolute;
    width: 0;
  }

  .datepicker-inner-container {
    padding: $date-pickers-padding;
  }

}


.datepicker-dropdown {
  @include box-shadow($date-pickers-elevation);
  @include x-box-sizing(content-box);
  position: absolute;
  z-index: 1;
}

.datepicker-inline {
  position: static;
}


.datepicker-top-left::before,
.datepicker-top-left::after,
.datepicker-top-right::before,
.datepicker-top-right::after {
  border-top: 0;
  left: 10px;
  top: -5px;
}


.datepicker-top-left::after,
.datepicker-top-right::after {
  border-bottom-color: $forms-color-background;
  top: -4px;
}


.datepicker-bottom-left::before,
.datepicker-bottom-left::after,
.datepicker-bottom-right::before,
.datepicker-bottom-right::after {
  border-bottom: 0;
  bottom: -5px;
  left: 10px;
}


.datepicker-bottom-left::after,
.datepicker-bottom-right::after {
  border-top-color: $forms-color-background;
  bottom: -4px;
}

.datepicker-top-right::before,
.datepicker-top-right::after,
.datepicker-bottom-right::before,
.datepicker-bottom-right::after {
  left: auto;
  right: 10px;
}

.datepicker-panel>ul {
  margin: 0;
  padding: 0;
  width: 100%;

  &::before,
  &::after {
    content: " ";
    display: table;
  }

  &::after {
    clear: both;
  }

  &>li {
    background-color: $forms-color-background;
    cursor: pointer;
    float: left;
    height: $date-pickers-cell-size;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    width: $date-pickers-cell-size;
    border-radius: $forms-border-radii;

    &:hover {
      background-color: $forms-color-background;
    }

    &.disabled {
      cursor: not-allowed;
    }

    &.muted {
      color: $gray-60;

      &:hover {
        outline: $forms-border-width-hover $forms-border-style-hover $forms-color-primary;
        outline-offset: $forms-outline-offset;
        background-color: $forms-color-background;
      }
    }

    &.highlighted,
    &.highlighted:hover {
      outline-offset: $forms-outline-offset;
      color: $forms-color-text;
      background: $forms-color-background;
      font-weight: $font-weight-bold;
      display: inline-block;
      position: relative;
    }
    &.highlighted:hover {
      outline: $forms-border-width-hover $forms-border-style-hover $forms-color-primary;
      outline-offset: $forms-outline-offset;
      background-color: $forms-color-background;
    }

    &.highlighted[data-view="day"]::before,
    &.highlighted[data-view="month"]::before,
    &.highlighted[data-view="year"]::before {
      content: "•";
      /* Insert content that looks like bullets */
      display: inline-block;
      position: absolute;
      font-size: 1rem;
      bottom: -0.65em;
      left: 0;
      text-align: center;
      width: 100%;
      color: $forms-color-text;
    }

    &.picked,
    &.picked:hover {
      background: $forms-color-primary;
      color: $forms-color-text-inverse;
      font-weight: $font-weight-bold;
    }
    &.picked::before {
      content: "•";
      /* Insert content that looks like bullets */
      display: inline-block;
      position: absolute;
      font-size: 1rem;
      bottom: -0.65em;
      left: 0;
      text-align: center;
      width: 100%;
      color: $forms-color-text-inverse;
    }

    &.disabled,
    &.disabled:hover {
      background-color: $forms-color-background;
      color: $gray-80;
      cursor: default;
    }


    &[data-view="years prev"],
    &[data-view="year prev"],
    &[data-view="month prev"] {
      width: 32px;
      height: 32px;
      // margin-top: $date-picker-arrow-margin;
      // border-top: $date-pickers-arrow-icon-size $forms-border-style-hover transparent;
      // border-right: $date-pickers-arrow-icon-size $forms-border-style-hover $forms-color-primary;
      // border-bottom: $date-pickers-arrow-icon-size $forms-border-style-hover transparent;
      background-color: $forms-color-background;
      border: $buttons-border-width $buttons-border-style transparent;
      outline: $buttons-border-width-hover $buttons-border-style-hover transparent;
      outline-offset: $buttons-outline-offset;
      padding: 0;
      margin: 0;
      // padding-left: 10px;

      &:after{
        margin-left:-1px;
        color: $forms-color-icon-interactive-secondary;
        width: 30px;
        height: 30px;
        font-family: 'dlt-icons' !important;
        font-size: 24px;
        content: "\e964";
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 30px;
        -webkit-font-smoothing: antialiased;
      }

      &:hover{
        border: $buttons-border-width $buttons-border-style $buttons-color-primary;
        outline: $buttons-border-width-hover $buttons-border-style-hover $buttons-color-primary;
        outline-offset: $buttons-outline-offset;
      }

      &:active {
        color: $buttons-color-text-primary !important;
        background-color: $buttons-color-secondary-active !important;
        border-color: $buttons-color-primary !important;
      }
    }

    &[data-view="years next"],
    &[data-view="year next"],
    &[data-view="month next"],
    &[data-view="next"] {
      width: 32px;
      height: 32px;
      // margin-top: $date-picker-arrow-margin;
      // border-top: $date-pickers-arrow-icon-size $forms-border-style-hover transparent;
      // border-left: $date-pickers-arrow-icon-size $forms-border-style-hover $forms-color-primary;
      // border-bottom: $date-pickers-arrow-icon-size $forms-border-style-hover transparent;
      border: $buttons-border-width $buttons-border-style transparent;
      outline: $buttons-border-width-hover $buttons-border-style-hover transparent;
      outline-offset: $buttons-outline-offset;
      background-color: $forms-color-background;
      padding: 0;
      margin: 0;

      &:after{
        margin-right:-1px;
        color: $forms-color-icon-interactive-secondary;
        width: 30px;
        height: 30px;
        font-family: 'dlt-icons' !important;
        font-size: 24px;
        content: "\e965";
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 30px;
        -webkit-font-smoothing: antialiased;
      }

      &:hover{
        border: $buttons-border-width $buttons-border-style $buttons-color-primary;
        outline: $buttons-border-width-hover $buttons-border-style-hover $buttons-color-primary;
        outline-offset: $buttons-outline-offset;
      }

      &:active {
        color: $buttons-color-text-primary !important;
        background-color: $buttons-color-secondary-active !important;
        border-color: $buttons-color-primary !important;
      }

    }

    &[data-view="years current"],
    &[data-view="year current"],
    &[data-view="month current"] {
      width: 184px;
      font-size: $date-pickers-data-font-size;
      font-family: $forms-font-family;
      font-weight: $date-pickers-title-font-weight;
      color: $forms-color-text;
    }

    &[data-view="month current"]:hover,
    &[data-view="year current"]:hover {
      outline: none;
      background-color: $forms-color-background;

    }

    &[data-view="years current"]:hover {
      color: $forms-color-text;
    }


    &[data-view="day"],
    &[data-view="day prev"],
    &[data-view="day picked"],
    &[data-view="day next"] {
      margin: 0 $date-picker-value-margin;
    }

    &[data-view="day"]:nth-of-type(1),
    &[data-view="day prev"]:nth-of-type(1),
    &[data-view="day picked"]:nth-of-type(1),
    &[data-view="day next"]:nth-of-type(1) {
      margin: 0 $date-picker-value-margin 0 0;
    }

    &[data-view="day"]:nth-of-type(7n+0),
    &[data-view="day prev"]:nth-of-type(7n+0),
    &[data-view="day picked"]:nth-of-type(7n+0),
    &[data-view="day next"]:nth-of-type(7n+0) {
      margin: 0 0 0 $date-picker-value-margin;
    }

    &[data-view="day"]:nth-of-type(7n+8),
    &[data-view="day prev"]:nth-of-type(7n+8),
    &[data-view="day picked"]:nth-of-type(7n+8),
    &[data-view="day next"]:nth-of-type(7n+8) {
      margin: 0 $date-picker-value-margin 0 0;
    }

    &[data-view="day"]:not(.highlighted):hover,
    &[data-view="month"]:not(.highlighted):hover,
    &[data-view="year"]:not(.highlighted):hover {
      outline: $forms-border-width-hover $forms-border-style-hover $forms-color-primary;
      outline-offset: $forms-outline-offset;
      color: $forms-color-text;
      background: $forms-color-background;
    }

    &[data-view="day"]:not(.highlighted):active,
    &[data-view="month"]:not(.highlighted):active,
    &[data-view="year"]:not(.highlighted):active {
      outline: $forms-border-width-hover $forms-border-style-hover $forms-color-primary;
      outline-offset: $forms-outline-offset;
      color: $forms-color-text;
      background: $forms-color-primary-light;
    }

  }

  &[data-view="years"]>li,
  &[data-view="months"]>li {
    height: $date-pickers-cell-size;
    line-height: $date-pickers-cell-size;
    width: $date-pickers-cell-size;
    margin: 0 $date-picker-value-margin;
  }

  
  &[data-view="years"]>li:nth-of-type(1),
  &[data-view="months"]>li:nth-of-type(1) {
    height: $date-pickers-cell-size;
    line-height: $date-pickers-cell-size;
    width: $date-pickers-cell-size;
    margin: 0 $date-picker-value-margin 0 0;
  }

  &[data-view="years"]>li:nth-of-type(7n+8),
  &[data-view="months"]>li:nth-of-type(7n+8) {
    height: $date-pickers-cell-size;
    line-height: $date-pickers-cell-size;
    width: $date-pickers-cell-size;
    margin: 0 $date-picker-value-margin 0 0;
  }

  &[data-view="years"]>li:nth-of-type(7n+0),
  &[data-view="months"]>li:nth-of-type(7n+0) {
    height: $date-pickers-cell-size;
    line-height: $date-pickers-cell-size;
    width: $date-pickers-cell-size;
    margin: 0 0 0 $date-picker-value-margin;
  }

  &[data-view="week"] {
    font-size: $date-pickers-font-size;
    font-family: $forms-font-family;
    font-weight: $date-pickers-title-font-weight;
    margin-top: $date-picker-value-wrapper-margin-top;
  }

  &[data-view="week"]>li,
  &[data-view="week"]>li:hover {
    background-color: $forms-color-background;
    cursor: default;
    margin: 0 $date-picker-value-margin;
  }

  &[data-view="week"]>li:nth-of-type(1),
  &[data-view="week"]>li:nth-of-type(1):hover {
    background-color: $forms-color-background;
    cursor: default;
    margin: 0 $date-picker-value-margin 0 0;
  }


  &[data-view="week"]>li:nth-of-type(7n+0),
  &[data-view="week"]>li:nth-of-type(7n+0):hover {
    background-color: $forms-color-background;
    cursor: default;
    margin: 0 0 0 $date-picker-value-margin;
  }

  &[data-view="days"],
  &[data-view="months"],
  &[data-view="years"] {
    font-size: $date-pickers-font-size-sm;
    font-family: $forms-font-family;
    font-weight: $date-pickers-font-weight;
  }

  &[data-view="months"],
  &[data-view="years"] {
    margin-top: $date-picker-value-wrapper-margin-top;
  }
}

.datepicker-hide {
  display: none;
}