.navds-date {
  padding: var(--ax-spacing-4) var(--ax-spacing-3);

  .rdp-day_range_middle {
    &.rdp-day_disabled {
      color: var(--ax-text-default);
      background: var(--ax-bg-neutral-moderateA);
    }

    &.rdp-day_selected {
      background-color: var(--ax-bg-accent-moderateA);
      box-shadow: inset 0 0 0 1px var(--ax-border-accent-subtleA);
      color: var(--ax-text-default);
    }
  }

  .rdp-month,
  &.rdp-month {
    display: grid;
    gap: var(--ax-spacing-5);
  }

  .navds-date__caption-label {
    text-transform: capitalize;
  }

  .rdp-head_cell {
    text-transform: capitalize;
    font-size: var(--ax-font-size-small);
  }

  .rdp-button {
    all: unset;
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    text-align: center;
    border-radius: var(--ax-border-radius-medium);
  }

  .rdp-day_range_start {
    border-radius: var(--ax-border-radius-xlarge) var(--ax-border-radius-medium) var(--ax-border-radius-medium)
      var(--ax-border-radius-xlarge);
  }

  .rdp-day_range_end:not(.rdp-day_range_start) {
    border-radius: var(--ax-border-radius-medium) var(--ax-border-radius-xlarge) var(--ax-border-radius-xlarge)
      var(--ax-border-radius-medium);
  }

  .rdp-day_range_start.rdp-day_range_end {
    border-radius: var(--ax-border-radius-xlarge);
  }

  .navds-date__field {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
  }

  .rdp-day_selected,
  .navds-monthpicker__month--selected {
    color: var(--ax-text-accent-contrast);
    background: var(--ax-bg-accent-strong-pressed);
    cursor: pointer;
  }

  .rdp-day_disabled {
    cursor: not-allowed;
    text-decoration: line-through;
    background-color: var(--ax-bg-neutral-moderateA);
    color: var(--ax-text-subtle);
  }

  .rdp-button:where(:not(.rdp-day_selected, [disabled])):hover,
  .navds-date__month-button:where(:not(.rdp-day_selected, [disabled])):hover {
    background: var(--ax-bg-accent-moderate-hoverA);
    cursor: pointer;
  }

  .rdp-day_today {
    position: relative;

    &::before {
      width: 6px;
      height: 6px;
      display: block;
      background-color: var(--ax-text-accent);
      border-radius: var(--ax-border-radius-full);
      content: "";
      position: absolute;
      bottom: 5px;
      left: 50%;
      transform: translateX(-50%);
    }

    &.rdp-day_selected:not(.rdp-day_range_middle),
    &:active {
      &::before {
        background-color: var(--ax-text-accent-contrast);
      }
    }
  }

  .rdp-day_outside {
    visibility: hidden;
    pointer-events: none;
  }

  .navds-date__modal & {
    padding: 0;
  }

  .navds-date__modal-body > & {
    padding: 0;
  }
}

.navds-date__caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ax-spacing-1);
  padding-inline: var(--ax-spacing-1);
}

.navds-date__caption-button {
  width: 2rem;
  height: 2rem;
  color: var(--ax-text-default);
}

.navds-date__caption__month .navds-select__container select {
  text-transform: capitalize;
}

/* Monthpicker */
.navds-date__month-button {
  all: unset;
  text-align: center;
  width: 3rem;
  height: 3rem;
  text-transform: capitalize;
  border-radius: var(--ax-border-radius-medium);
  cursor: pointer;
}

.navds-date__year-label {
  display: flex;
  align-items: center;
}

.navds-date__wrapper,
.navds-date__standalone-wrapper {
  height: fit-content;
  width: fit-content;

  .rdp-cell > button.rdp-day,
  button.navds-date__month-button {
    &:focus-visible {
      outline: 2px solid var(--ax-border-focus);
      outline-offset: 1px;
    }

    &:active:not(:disabled) {
      color: var(--ax-text-accent-contrast);
      background-color: var(--ax-bg-accent-strong-pressed);
    }
  }
}

.navds-date__field-input {
  &.navds-text-field__input {
    padding-right: var(--ax-spacing-12);
  }

  .navds-form-field--small & {
    padding-right: var(--ax-spacing-8);
  }
}

.navds-date__field-button {
  position: absolute;
  right: 0.0625rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ax-text-default);
  display: inline-flex;
  cursor: pointer;
  margin: 0;
  text-decoration: none;
  border: none;
  background: none;
  border-radius: calc(var(--ax-border-radius-medium) - 1px);
  padding: var(--ax-spacing-3);
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  height: calc(100% - 0.125rem);
  border-start-start-radius: 0;
  border-end-start-radius: 0;

  .navds-form-field--small & {
    padding: var(--ax-spacing-1);
  }

  .navds-form-field--disabled & {
    opacity: 1;
    cursor: not-allowed;
  }

  /* Readonly */
  .navds-date__field--readonly & {
    cursor: default;
  }

  &:focus-visible {
    outline-color: var(--ax-border-focus);
  }
}

.navds-date__field-wrapper {
  display: inline-flex;
  align-items: center;
  position: relative;
  width: fit-content;
}

.navds-date__week-row {
  display: flex;
  align-items: center;
  gap: var(--ax-spacing-05);
}

.navds-date__weeknumber {
  --__axc-button-border-width: 1px;
}

.navds-date__weeknumber-number {
  font-size: 0.875rem;
  color: var(--ax-text-subtle);

  .navds-date__weeknumber:active & {
    color: var(--ax-text-neutral-contrast);
  }
}

.navds-date__week-wrapper {
  width: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.navds-date__modal-body {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: var(--ax-spacing-4);
  gap: var(--ax-spacing-2);
}

@media (min-width: 480px) {
  .navds-date {
    padding: var(--ax-spacing-5) var(--ax-spacing-4);
  }

  .navds-date__modal-body {
    padding: var(--ax-spacing-6);
  }

  .navds-date__caption {
    gap: var(--ax-spacing-2);
  }

  .navds-date .rdp-button,
  .navds-date__caption-button {
    width: 3rem;
    height: 3rem;
  }
}
