@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-block-end: 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;
          width: auto;
        }
      }
      > .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-inline-start: 0;
    border-spacing: 0;
    td {
      padding: 0;
    }
    .pkt-btn {
      padding: 0;
      --pkt-color-button-background-hover: var(--pkt-color-surface-default-pale-blue);
      --pkt-color-button-border-hover: var(--pkt-color-surface-default-pale-blue);
      --pkt-color-button-text-hover: var(--pkt-color-text-body-dark);
    }
    button,
    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-days [data-disabled] {
    cursor: not-allowed;
    color: var(--pkt-color-brand-neutrals-300);
    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);
      color: var(--pkt-color-brand-dark-blue-1000);
    }
    .pkt-btn {
      --pkt-color-button-background-hover: var(--pkt-color-surface-strong-blue);
      --pkt-color-button-border-hover: var(--pkt-color-surface-strong-blue);
    }
    .pkt-btn__text {
      font-weight: map.get(variables.$font-weight, 'medium');
    }
  }
  .pkt-cal-in-range {
    .pkt-btn,
    .pkt-btn:focus,
    .pkt-btn:hover {
      color: var(--pkt-color-brand-dark-blue-1000);
    }
    :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);
      color: var(--pkt-color-brand-dark-blue-1000);
    }
    ::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-50);
    :before,
    :after {
      background-color: transparent;
    }
  }
}