@use '@carbon/styles/scss/motion';
@use '@carbon/layout';
@use '@carbon/styles/scss/theme';
@use '@carbon/type';
@use '@carbon/styles/scss/components/button';
@use '@carbon/styles/scss/utilities/box-shadow';
@use '@carbon/styles/scss/utilities/component-reset';
@use '@carbon/styles/scss/utilities/focus-outline' as focus;
@use '../vars' as *;

// Text field for dates
.inputGroup {
  align-items: center;
  background-color: var(--cds-field);
  border-block-end: 1px solid var(--cds-border-strong);
  color: var(--cds-text-primary);
  display: flex;
  position: relative;

  &:focus-within,
  &.cds--focused {
    @include focus.focus-outline('outline');
  }

  &[data-invalid] {
    @include focus.focus-outline('invalid');

    & {
      color: theme.$support-error;
    }
  }

  &[data-disabled] {
    border-block-end: 1px solid rgba(0, 0, 0, 0);
    color: theme.$text-disabled;
    cursor: not-allowed;
  }
}

// Shared segment styles used by both single and range inputs
%inputSegmentStyles {
  caret-color: var(--cds-text-primary);

  &:focus {
    outline: unset;
    background-color: theme.$layer-selected-hover;
  }

  &[data-placeholder] {
    color: theme.$text-disabled;
  }

  &[data-focused='true'] {
    animation: cursor-blink 1s step-end infinite;
  }
}

// Shared rules for dimming read-only separators (/, -, etc.) adjacent to
// unfilled placeholders so they don't look "active" before the user starts typing.
%readonlyPlaceholderDimming {
  [data-readonly]:has(+ [data-placeholder]) {
    color: theme.$text-disabled;
  }

  [data-placeholder] + [data-readonly] {
    color: theme.$text-disabled;
  }
}

@keyframes cursor-blink {
  from,
  to {
    border-inline-end: 1px solid transparent;
  }
  50% {
    border-inline-end: 1px solid currentColor;
  }
}

// Single date picker input
.inputWrapper {
  inline-size: 15rem;
  margin-left: layout.$spacing-05;
  min-width: layout.$spacing-13;
  max-width: 15rem;

  & .inputSegment {
    @extend %inputSegmentStyles;
  }

  @extend %readonlyPlaceholderDimming;
}

.inputWrapperMd {
  block-size: layout.$spacing-08;
}

// Range date picker inputs
.inputsWrapper {
  display: flex;
  min-width: 10rem;
  max-width: 15rem;
  margin-inline-start: 1rem;
  inline-size: 15rem;
}

.dateInputWrapper {
  @extend .inputWrapper;
  min-width: unset;
  margin: 0px;
}

.startInput {
  flex-basis: fit-content;
}

.endInput {
  padding-right: unset;
}

.separator {
  margin-inline: 0.5rem;
}

.inputGroup:has([data-placeholder]) > .inputsWrapper > .separator > span {
  color: theme.$text-disabled;
}

.invalidText {
  color: theme.$text-error !important;
  font-size: layout.$spacing-04;
  font-weight: 400 !important;
  margin: layout.$spacing-02 0 0;
  overflow: hidden;
}

// Used for calendar pop-over
@keyframes fade-in-down {
  from {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.popover[data-entering] {
  animation: fade-in-down motion.$duration-fast-02 motion.motion(entrance, productive);

  @media screen and (prefers-reduced-motion: reduce) {
    animation: none;
  }
}

.dialog {
  @include box-shadow.box-shadow;
  background-color: theme.$layer-01;
  overflow: hidden;
  padding: layout.$spacing-02 layout.$spacing-02 layout.$spacing-03 layout.$spacing-02;
}

// Navigation header (prev/next buttons + month/year display)
.header {
  margin-top: layout.$spacing-03;
  margin-bottom: layout.$spacing-03;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.flatButton {
  @include component-reset.reset;

  & {
    background-color: inherit;
    display: inline-flex;
  }

  &:hover:not(:disabled) {
    background-color: theme.$layer-hover;
  }

  &:disabled > svg {
    fill: theme.$text-disabled;
  }

  & > svg {
    display: block;
    margin: auto;
    text-align: center;
  }
}

[data-invalid] > .flatButton > svg {
  --omrs-icon-fill: #{theme.$support-error};
}

.flatButtonMd {
  height: layout.$spacing-08;
  width: layout.$spacing-08;
}

.monthYear {
  @include component-reset.reset;
  @include type.type-style('heading-compact-01');

  & {
    margin-top: layout.$spacing-03;
    margin-block-end: layout.$spacing-01;
    text-align: center;
  }

  & > span {
    margin-left: layout.$spacing-02;
    margin-right: layout.$spacing-02;
  }

  & div:has(input[inputmode='numeric']) {
    display: inline;

    & > input[inputmode='numeric'] {
      @include component-reset.reset;
      @include type.type-style('heading-compact-01');

      & {
        background-color: var(--cds-field);
        inline-size: layout.$spacing-08;
        padding: layout.$spacing-02;
        padding-right: 0;
      }

      &::-webkit-outer-spin-button,
      &::-webkit-inner-spin-button {
        margin: 0;
        -webkit-appearance: none;
      }

      &:focus {
        @include focus.focus-outline('border');
      }

      &[data-invalid] {
        @include focus.focus-outline('invalid');
      }

      &[data-disabled],
      &[data-disabled]:hover {
        background-color: theme.$layer-01;
        color: theme.$text-disabled;
        pointer-events: none;
      }

      &[data-disabled] + div > button::after {
        border-block-end-color: theme.$text-disabled;
        border-block-start-color: theme.$text-disabled;
      }

      &[data-disabled] + div > button:hover {
        opacity: 0;
      }
    }

    & div[role='group'] {
      @include component-reset.reset;

      & {
        display: inline;
        position: relative;
      }
    }

    &:hover button {
      opacity: 1;
    }

    & button {
      @include component-reset.reset;

      & {
        position: absolute;
        padding-block: 0;
        padding-inline-start: layout.$spacing-01;
        padding-inline-end: layout.$spacing-02;
        border: none;
        block-size: 50%;
        cursor: pointer;
        inline-size: layout.$spacing-04;
        inset-inline-start: layout.$spacing-08;
        line-height: 50%;
        opacity: 0;
      }

      &::after {
        display: block;
        border-inline-end: layout.$spacing-02 solid transparent;
        border-inline-start: layout.$spacing-02 solid transparent;
        content: '';
        inset-block-start: 33%;
      }

      &:hover::after {
        border-block-end-color: button.$button-primary;
        border-block-start-color: button.$button-primary;
      }

      &:active::after {
        border-block-end-color: theme.$border-interactive;
        border-block-start-color: theme.$border-interactive;
      }

      &[slot='increment'] {
        top: 0;
        left: 0;
      }

      &[slot='decrement'] {
        top: layout.$spacing-04;
        left: 0;
      }
    }
  }
}

// Calendar grid and day cells

.calendarGrid {
  width: 17rem;

  & tr,
  & tr > th,
  & tr > td {
    height: 2.428rem;
    width: 2.428rem;
  }

  & > thead > tr > th {
    @include type.type-style('body-compact-01');
    cursor: default;
    text-align: center;
    vertical-align: middle;
  }

  & > tbody > tr > td {
    @include type.type-style('body-compact-01');
    cursor: pointer;
    text-align: center;
    vertical-align: middle;

    & > div {
      outline: unset;
    }

    &:hover:not(:has([aria-disabled], [data-selected])) {
      background-color: theme.$layer-hover;
    }

    &:has([data-selected]) {
      background-color: $color-blue-60-2;
      color: $ui-background;
    }

    &[aria-disabled] {
      color: theme.$text-disabled;
      cursor: default;
    }
  }
}

.today:not([data-selected]) {
  position: relative;
  color: $color-blue-60-2;
  font-weight: 600;
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
  line-height: var(--cds-body-compact-01-line-height, 1.28572);
  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: layout.$spacing-08;
  cursor: pointer;
  inline-size: layout.$spacing-08;

  &::after {
    position: absolute;
    display: block;
    block-size: layout.$spacing-02;
    content: '';
    inline-size: layout.$spacing-02;
    inset-block-end: 0.4375rem;
    inset-inline-start: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  &[data-disabled]::after {
    background-color: theme.$text-disabled;
  }

  &:not([data-disabled])::after {
    background-color: var(--cds-link-primary, theme.$link-primary);
  }
}

// RTL overrides
:global([dir='rtl']) {
  .inputWrapper {
    padding-left: unset;
    padding-right: layout.$spacing-04;
  }

  .endInput {
    padding-right: 0;
  }

  .monthYear {
    & div:has(input[inputmode='numeric']) {
      > input[inputmode='numeric'] {
        padding-right: layout.$spacing-02;
      }
    }

    & button {
      &[slot='increment'] {
        top: 0;
        left: unset;
        right: 0;
      }

      &[slot='decrement'] {
        top: layout.$spacing-04;
        left: unset;
        right: 0;
      }
    }
  }
}