@use 'sass:map';
@use '../abstracts/variables';
@use '../abstracts/functions';
@use '../abstracts/mixins/typography';

.pkt-calendar,
pkt-calendar {
  z-index: 2;
  display: block;
  position: relative;
  max-width: 25rem;
  .pkt-cal-month-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    .pkt-cal-month-picker {
      display: flex;
      gap: 0.5rem;
      .pkt-input {
        @include typography.get-text('pkt-txt-16-medium');
        &:is(select) {
          text-align: right;
        }
      }
      > .pkt-cal-input-year {
        max-width: 4.5rem;
      }
    }
  }

  .pkt-cal-month-nav,
  .pkt-cal-days {
    td {
      border: 0;
    }
    .pkt-btn,
    td > div,
    th > div {
      font: inherit;
      aspect-ratio: 1 / 1;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 0;
    }
    .pkt-btn {
      margin: 0;
      border-radius: 50%;
    }
  }

  .pkt-cal-days {
    margin: 0;
    padding-left: 0;
    border-spacing: 0;
    td {
      padding: 0;
    }
    div {
      aspect-ratio: 1 / 1;
      justify-content: center;
      align-items: center;
      position: relative;
      text-align: center;
      &:before,
      &:after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: -1;
      }
      &:before {
        left: 0;
        right: 50%;
      }
      &:after {
        left: 50%;
        right: 0;
      }
    }
  }
  &.pkt-cal-weeknumbers .pkt-cal-day-names,
  &.pkt-cal-weeknumbers .pkt-cal-days {
    grid-template-columns: repeat(8, 12.5%);
  }

  .pkt-cal-other,
  .pkt-cal-days [data-disabled] {
    cursor: not-allowed;
    color: var(--pkt-color-grays-gray-200);
    background: transparent;
    border: none;
  }
  .pkt-cal-today {
    .pkt-btn {
      text-decoration: underline;
      outline: 1px solid var(--pkt-color-border-default);
      outline-offset: -1px;
    }
  }
  .pkt-cal-selected {
    .pkt-btn,
    .pkt-btn:focus,
    .pkt-btn:hover {
      background-color: var(--pkt-color-surface-strong-blue);
    }
  }
  .pkt-cal-in-range {
    :before,
    :after,
    &-first :after,
    &-last :before {
      background-color: var(--pkt-color-surface-default-light-blue);
    }
    &-first :before,
    &-last :after {
      background-color: transparent;
    }
  }
  .pkt-cal-range-hover {
    :before,
    .pkt-btn {
      background-color: var(--pkt-color-surface-default-light-blue);
    }
    ::after {
      background-color: transparent;
    }
    .pkt-btn {
      border-color: var(--pkt-color-surface-default-light-blue);
    }
  }
  .pkt-cal-excluded {
    background-color: var(--pkt-color-brand-neutrals-100);
    :before,
    :after {
      background-color: transparent;
    }
  }
}

pkt-datepicker {
  display: block;
  position: relative;
  .pkt-datepicker {
    position: relative;
    &__tags {
      .pkt-tag {
        margin: 0 0.25rem 0.5rem 0;
      }
    }
  }
}
.pkt-datepicker__inputs {
  width: 100%;
  position: relative;
  .pkt-input__container {
    width: fit-content;
  }
  button.pkt-input-icon {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    &:hover {
      background-color: inherit !important;
      border-color: inherit !important;
      --fg-color: var(--pkt-color-button-text-hover);
    }
  }
  .pkt-datepicker__input {
    padding-right: 0;
    background-image: none;
  }
  .pkt-input-separator ~ .pkt-datepicker--range {
    padding-left: 0.25rem;
  }
}
.pkt-calendar-popup {
  top: 100%;
  left: 0;
  z-index: 2;
  margin: 0;
  padding: 0.5rem;
  position: absolute;
  width: max-content;
  background: var(--pkt-color-background-default);
  box-shadow:
    0px 2px 4px -2px rgba(0, 0, 0, 0.1),
    0px 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.pkt-datepicker__input:not(.pkt-datepicker--multiple) {
  width: 8.3rem;
}
.pkt-datepicker__input::-webkit-inner-spin-button,
.pkt-datepicker__input::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

// Firefox specific styles :(
@-moz-document url-prefix() {
  .pkt-datepicker__input:not(.pkt-datepicker--multiple) {
    width: 10.5rem;
  }
  .pkt-datepicker__inputs button.pkt-input-icon {
    display: none;
  }
  .pkt-datepicker__inputs
    input.pkt-datepicker__input:has(~ button):not(:has(~ .pkt-input-separator)):not(:has(~ .pkt-input-prefix)) {
    border-right-width: 2px !important;
  }
}