emaui/libs/ui/src/lib/input/AmharicDatePicker.css

/* Restyle the react-day-picker month/year dropdown caption to match Mantine
   inputs — the library ships it as bare text + an invisible <select>, with
   no border/box affordance and a hardcoded blue chevron. */
.amharic-daypicker {
  --rdp-accent-color: var(--mantine-primary-color-filled);
  --rdp-day-height: 44px;
  --rdp-day-width: 44px;
  --rdp-day_button-height: 42px;
  --rdp-day_button-width: 42px;
  --rdp-weekday-padding: 0.5rem 0;
  --rdp-nav-height: 2.75rem;
  --rdp-nav_button-width: 2.75rem;
  --rdp-nav_button-height: 2.75rem;
}

/* Backoffice loads Tailwind's preflight after the package stylesheet. That
   reset can strip the day-picker table layout, leaving every weekday and day
   stacked in a single column. Keep the calendar's structural styles local to
   the component so it renders consistently in every app. */
.amharic-daypicker .rdp-months {
  position: relative;
  display: flex;
  max-width: fit-content;
}

.amharic-daypicker .rdp-month {
  position: relative;
}

.amharic-daypicker .rdp-month_grid {
  display: table;
  border-collapse: collapse;
}

.amharic-daypicker .rdp-month_grid thead {
  display: table-header-group;
}

.amharic-daypicker .rdp-month_grid tbody {
  display: table-row-group;
}

.amharic-daypicker .rdp-month_grid tr {
  display: table-row;
}

.amharic-daypicker .rdp-weekday,
.amharic-daypicker .rdp-day {
  display: table-cell;
  width: var(--rdp-day-width);
  height: var(--rdp-day-height);
  text-align: center;
}

.amharic-daypicker .rdp-weekday {
  padding: var(--rdp-weekday-padding);
}

.amharic-daypicker .rdp-day_button {
  padding: 0;
  margin: 0;
  border: 2px solid transparent;
  border-radius: 100%;
  background: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rdp-day_button-width);
  height: var(--rdp-day_button-height);
}

.amharic-daypicker .rdp-nav {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  display: flex;
  align-items: center;
  height: var(--rdp-nav-height);
}

.amharic-daypicker .rdp-button_previous,
.amharic-daypicker .rdp-button_next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rdp-nav_button-width);
  height: var(--rdp-nav_button-height);
  padding: 0;
  margin: 0;
}

.amharic-daypicker .rdp-dropdowns {
  gap: 0.375rem;
}

.amharic-daypicker .rdp-dropdown_root {
  border: 1px solid var(--mantine-color-default-border);
  border-radius: var(--mantine-radius-sm);
  background-color: var(--mantine-color-body);
  padding: 0.25rem 0.5rem;
}

.amharic-daypicker .rdp-dropdown_root:hover {
  background-color: var(--mantine-color-default-hover);
}

[data-mantine-color-scheme='dark'] .amharic-daypicker .rdp-dropdown {
  color-scheme: dark;
  background-color: var(--mantine-color-dark-7);
  color: var(--mantine-color-gray-1);
}

[data-mantine-color-scheme='dark'] .amharic-daypicker .rdp-dropdown option {
  background-color: var(--mantine-color-dark-7);
  color: var(--mantine-color-gray-1);
}

.amharic-daypicker .rdp-caption_label {
  gap: 0.25rem;
  font-size: var(--mantine-font-size-sm);
  font-weight: 500;
  color: var(--mantine-color-text);
}

.amharic-daypicker .rdp-dropdown_root .rdp-chevron {
  width: 12px;
  height: 12px;
  fill: var(--mantine-color-dimmed);
}

/* Prev/next month buttons: bigger tap target + visible button box (border,
   background, accent-colored chevron) instead of the default bare, tiny
   blue arrow — the dropdown captions replaced them as the primary nav, so
   they need to stay easy to spot and hit. */
.amharic-daypicker .rdp-button_previous,
.amharic-daypicker .rdp-button_next {
  border: 1px solid var(--mantine-color-default-border);
  border-radius: var(--mantine-radius-sm);
  background-color: var(--mantine-color-body);
}

.amharic-daypicker .rdp-button_previous:not([aria-disabled='true']):hover,
.amharic-daypicker .rdp-button_next:not([aria-disabled='true']):hover {
  background-color: var(--mantine-color-default-hover);
}

.amharic-daypicker .rdp-nav .rdp-chevron {
  width: 20px;
  height: 20px;
  fill: var(--mantine-primary-color-filled);
}

.amharic-daypicker .rdp-month_caption {
  font-size: inherit;
  font-weight: 600;
}

/* Day cells are already circular (--rdp-day_button-border-radius: 100%);
   the library only outlines the selected one by default — fill it instead
   so the selection reads as a solid, unambiguous mark. */
.amharic-daypicker .rdp-selected .rdp-day_button {
  background-color: var(--mantine-primary-color-filled);
  border-color: var(--mantine-primary-color-filled);
  color: var(--mantine-color-white);
}