@use "../variables" as vars;
@use "../functions" as func;
@use "../mixins" as mixins;

// Date Picker
.date-picker{
  max-width: 25rem;
}

.date-picker__wrapper {
  display: block; 
  position: relative;

  &:focus {
    outline: 0;
  }
}
.date-picker--active, .date-picker--initialized {
  .date-picker__calendar {
    z-index: vars.$zindex-datepicker-1;
  }
}

.date-picker__external-input{
  max-width: none;
  width: calc(100% - 16px - 16px);
}
.date-picker__button {
  border: 0;
  border-radius: 0;
  font-weight: func.font-weight("normal");
  margin: 0;
  padding: 0;
  text-align: left;
  color: inherit;
  min-height: auto;
  @include mixins.add-background-svg(vars.$datepicker-button-icon);
  align-self: stretch;
  background-color: func.color('transparent');
  background-position: center;
  margin-top: func.units(3);
  width: 3em;
  display: block;
  cursor: pointer;

  &:disabled,
  &.disabled {
    opacity: vars.$button-disabled-opacity;
    cursor: vars.$button-disabled-cursor;
  }
}

.date-picker--initialized {
  .date-picker__wrapper {
    display: flex;
  }
}

// Date Picker - Calendar View

.date-picker__calendar {
  border: func.border(vars.$datepicker-border);
  background-color: func.color(vars.$datepicker-background-color);
  box-shadow: func.shadow('light');
  left: 0;
  position: absolute;
  width: 100%;
  z-index: vars.$zindex-datepicker-2;
  margin-top: func.units(2);
  border-radius: func.border-radius('medium');
  @include mixins.media-breakpoint-up(md) {
    width: 344px;
  }
}

// Date Picker - Table

.date-picker__calendar__table {
  border-spacing: 0;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: center;
  width: 100%;

  thead{
    border-bottom: func.border(vars.$datepicker-table-border);
  }

  th {
    font-weight: func.font-weight("normal");
  }

  td {
    padding: 0;

    &:first-of-type .date-picker__calendar__date::after{
      border-left-width: 0;
    }
    &:last-of-type .date-picker__calendar__date::after{
      border-right-width: 0;
    }
  }

  tr:last-child {
    td:first-child button.date-picker__calendar__date {
      border-bottom-left-radius: func.border-radius('medium');
      &::after, &::before {
        border-bottom-left-radius: func.border-radius('medium');
      }
    }

    td:last-child button.date-picker__calendar__date {
      border-bottom-right-radius: func.border-radius('medium');
      &::after, &::before {
        border-bottom-right-radius: func.border-radius('medium');
      }
    }
  }
}

.date-picker__calendar__month-picker .date-picker__calendar__table, .date-picker__calendar__year-picker .date-picker__calendar__table{
  thead, tr{
    border: 0;
  }
}

// Date Picker - Grid

.date-picker__calendar__row {
  display: flex;
  text-align: center;
  width: 100%;
  background-color: func.color(vars.$datepicker-header-background-color);
  border-bottom: func.border(vars.$datepicker-table-border);
  border-top-left-radius: func.border-radius('medium');
  border-top-right-radius: func.border-radius('medium');

  button:focus{
    z-index: vars.$zindex-datepicker-3;
    position: relative;
  }

  & > div:first-child {
    border-top-left-radius: func.border-radius('medium');
  }

  & > div:last-child {
    border-top-right-radius: func.border-radius('medium');
  }
}

.date-picker__calendar__cell {
  background-color: func.color(vars.$datepicker-header-background-color);
  color: func.color(vars.$datepicker-header-text-color);
  flex: 1;
}

.date-picker__calendar__cell--center-items {
  display: flex;
  justify-content: center;
  align-items: center;
}

// Date Picker - Date Selection View

.date-picker__calendar__previous-year,
.date-picker__calendar__previous-month,
.date-picker__calendar__next-year,
.date-picker__calendar__next-month {
  background-color: func.color('transparent');
  border: 0;
  border-radius: 0;
  font-weight: func.font-weight("normal");
  margin: 0;
  text-align: left;
  color: inherit;
  min-height: auto;
  background-position: center;
  height: 30px;
  padding: 20px 10px;
  cursor: pointer;

  &:hover,
  &:focus {
      background-color: func.color('transparent');
      color: inherit;
  }

  &[disabled] {
    cursor: default;
  }
}

.date-picker__calendar__previous-year:not([disabled]) {
  @include mixins.add-background-svg('chevron-double-left');
}

.date-picker__calendar__previous-month:not([disabled]) {
  @include mixins.add-background-svg('chevron-left');
}

.date-picker__calendar__next-year:not([disabled]) {
  @include mixins.add-background-svg('chevron-double-right');
}

.date-picker__calendar__next-month:not([disabled]) {
  @include mixins.add-background-svg('chevron-right');
}

.date-picker__calendar__day-of-week {
  padding: 6px 0;
}

.date-picker__calendar__date {
  background-color: func.color('transparent');
  border: 0;
  border-radius: 0;
  font-weight: func.font-weight("normal");
  margin: 0;
  color: inherit;
  min-height: auto;
  text-align: right;
  width: 100%;
  padding: 10px 8px 10px 0;
  position: relative;
  cursor: pointer;

  &:hover,
  &:focus {
      background-color: func.color('transparent');
      color: inherit;
  }
  
  @include mixins.media-breakpoint-up(md) {
    padding: 10px 12px 10px 0;
  }

  &::after {
    position: absolute;
    inset: -1px 0 0 -1px;
    border: func.border('low-contrast');
    content: "";
    display: block;
    pointer-events:none;
  }

  &[disabled]{
    opacity: 0.3;
    cursor: not-allowed;
  }

  &--focused{
    position: relative;
    z-index: vars.$zindex-datepicker-2;
    
    &::after {
      border: func.border('high-contrast');
    }
  }

  &:focus {
    outline: none;
    &::before {
      @include mixins.focus;
      position: absolute;
      inset: -1px 0 0 -1px;
      content: "";
      display: block;
      pointer-events:none;
    }
  }


  &--next-month:not([disabled]),
  &--previous-month:not([disabled]) {
    color: func.color(vars.$datepicker-previous-next-month-text-color);
    text-indent: -99999px;
    background-color: func.color(vars.$datepicker-previous-next-month-background-color);

    &:hover {
      background-color: func.color(vars.$datepicker-previous-next-month-background-color-hover);
    }
  }

  &--selected,
  &--range-date {
    background-color: func.color(vars.$datepicker-date-selected-background-color);
    color: func.color(vars.$datepicker-date-selected-text-color);
    font-weight: func.font-weight("semibold");

    &:not([disabled]) {
      background-color: func.color(vars.$datepicker-date-selected-background-color);
      color: func.color(vars.$datepicker-date-selected-text-color);
    }
  }


  &--range-date-start {
    border-top-left-radius: 10%;
    border-bottom-left-radius: 10%;
  }

  &--range-date-end {
    border-top-right-radius: 10%;
    border-bottom-right-radius: 10%;
  }

  &--within-range {
    background-color: func.color(vars.$datepicker-date-within-range-background-color);
    color: func.color(vars.$datepicker-date-within-range-text-color);

    &:not([disabled]) {
      background-color: func.color(vars.$datepicker-date-within-range-background-color);
      color: func.color(vars.$datepicker-date-within-range-text-color);

      &:hover {
        background-color: func.color(vars.$datepicker-date-within-range-background-color);
      }

      &:focus {
        background-color: func.color(vars.$datepicker-date-within-range-background-color);
      }

      &:active {
        background-color: func.color(vars.$datepicker-date-within-range-background-color);
      }
    }
  }

}

.date-picker__calendar__month-label {
  flex: 4;
  text-align: center;
}

.date-picker__calendar__year-selection,
.date-picker__calendar__month-selection {
  background-color: func.color('transparent');
  border: 0;
  border-radius: 0;
  margin: 0;
  color: inherit;
  min-height: auto;
  display: inline-block;
  padding: 8px 4px;
  width: 100%;
  text-align: center;
  font-weight: func.font-weight("semibold");
  cursor: pointer;

  &:hover,
  &:focus {
      background-color: func.color('transparent');
      color: inherit;
  }

  @include mixins.media-breakpoint-up(md) {
    height: 100%;
    width: auto;
    text-align: left;
  }
}

// Date Picker - Month Selection View

.date-picker__calendar__month-picker {
  padding: 20px 5px;
}

.date-picker__calendar__month {
  background-color: func.color('transparent');
  border: 0;
  border-radius: 0;
  font-weight: func.font-weight("normal");
  margin: 0;
  color: inherit;
  min-height: auto;
  padding: 10px 0;
  width: 100%;
  display: block;
  text-align: center;
  cursor: pointer;
  &:hover,
  &:focus {
      background-color: func.color('transparent');
      color: inherit;
  }

  &--focused {
    @include mixins.focus-outline;
    outline-offset: 2px;
    position: relative;
    z-index: vars.$zindex-datepicker-2;
  }


  &[disabled]{
    opacity: 0.3;
    cursor: not-allowed;
  }

  &--selected {
    color: func.color(vars.$datepicker-month-selected-text-color);
    font-weight: func.font-weight("semibold");

    &:not([disabled]) {

      &:hover {
        color: func.color(vars.$datepicker-month-selected-text-color);
      }

      &:focus {
        color: func.color(vars.$datepicker-month-selected-text-color);
      }
    }
  }
}

// Date Picker - Year Selection View

.date-picker__calendar__year-picker {
  padding: 20px 5px;
}

.date-picker__calendar__previous-year-chunk,
.date-picker__calendar__next-year-chunk {
  background-color: func.color('transparent');
  border: 0;
  border-radius: 0;
  font-weight: func.font-weight("normal");
  text-align: left;
  color: inherit;
  min-height: auto;
  background-position: center;
  margin: auto;
  padding: 0 8px;
  cursor: pointer;

  &:hover,
  &:focus {
      background-color: func.color('transparent');
      color: inherit;
  }
}

.date-picker__calendar__previous-year-chunk:not([disabled]) {
  @include mixins.add-background-svg("chevron-left");
}

.date-picker__calendar__next-year-chunk:not([disabled]) {
  @include mixins.add-background-svg("chevron-right");
}

.date-picker__calendar__year {
  background-color: func.color('transparent');
  border: 0;
  border-radius: 0;
  font-weight: func.font-weight("normal");
  margin: 0;
  color: inherit;
  min-height: auto;
  padding: 10px 0;
  width: 100%;
  display: block;
  text-align: center;
  cursor: pointer;
  &:hover,
  &:focus {
      background-color: func.color('transparent');
      color: inherit;
  }

  &--focused {
    @include mixins.focus;
    position: relative;
    z-index: vars.$zindex-datepicker-2;
  }
  

  &[disabled]{
    opacity: 0.3;
    cursor: not-allowed;
  }

  &--selected {
    color: func.color(vars.$datepicker-year-selected-text-color);
    font-weight: func.font-weight("semibold");

    &:not([disabled]) {

      &:hover {
        color: func.color(vars.$datepicker-year-selected-text-color);
      }

      &:focus {
        color: func.color(vars.$datepicker-year-selected-text-color);
      }
    }
  }
}