@import "./theme.css";

.react-aria-DateField {
  color: var(--text-color);
  display: flex;
  flex-direction: column;
}

.react-aria-DateInput {
  display: inline;
  padding: 4px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--field-background);
  width: fit-content;
  min-width: 150px;
  white-space: nowrap;
  forced-color-adjust: none;

  &[data-focus-within] {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: -1px;
  }

  &[data-disabled] {
    border-color: var(--border-color-disabled);
    color: var(--text-color-disabled);
  }
}

.react-aria-DateField[data-disabled] {
  .react-aria-DateSegment {
    color: var(--text-color-disabled);
  }
}

.react-aria-DateSegment {
  padding: 0 2px;
  font-variant-numeric: tabular-nums;
  text-align: end;
  color: var(--text-color);

  &[data-type=literal] {
    padding: 0;
  }

  &[data-placeholder] {
    color: var(--text-color-placeholder);
    font-style: italic;
  }

  &:focus {
    color: var(--highlight-foreground);
    background: var(--highlight-background);
    outline: none;
    border-radius: 4px;
    caret-color: transparent;
  }

  &[data-invalid] {
    color: var(--invalid-color);

    &:focus {
      background: var(--highlight-background-invalid);
      color: var(--highlight-foreground);
    }
  }
}

.react-aria-DateField {
  .react-aria-FieldError {
    font-size: 12px;
    color: var(--invalid-color);
  }

  [slot=description] {
    font-size: 12px;
  }
}
