.react-datepicker-wrapper {
  // Invert icon position.
  .react-datepicker__view-calendar-icon input {
    padding-inline: var(--sizes-spacing-xs-h);
    padding-block: var(--sizes-spacing-xs-v);
  }

  // Fix z-index issue for icon.
  .react-datepicker__input-container .react-datepicker__calendar-icon {
    pointer-events: none;
    color: var(--typography-color-muted);
    inset-block-start: 50%;
    inset-inline-end: var(--sizes-spacing-xs-h);
    position: absolute;
    transform: translateY(-50%);
    z-index: 10;
  }

  // Fix color of clear button.
  .mykn-datepicker + .react-datepicker__close-icon {
    inset-inline-end: calc(1rem + var(--sizes-spacing-xs-h) * 2);

    &:after {
      border: 1px solid var(--typography-color-body);
      background-color: transparent;
      color: var(--typography-color-body);
      font-size: 10px;
      padding: 0;
      height: 13px;
      width: 13px;
    }
  }
}

.mykn-form-control .react-datepicker-popper {
  z-index: 1000;
}