@st-import [ focusRing ] from '../../../../common/palette.st.css';

:vars {
  TextColor: #162D3D;
  DisabledColor: #CBD3DC;
  BackgroundColor: #FFFFFF;
  BackgroundColorHover: #EAF7FF;
  BackgroundColorSelected: #3899EC;
  BackgroundColorSelectedHover: #4EB7F5;
  rootBackgroundColor: value(BackgroundColor);
}

.root {}

.months {
  -st-states: twoMonths;
}

.month {
  -st-states: size(enum(small, medium));
}

.weekdays,
.week {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 21px;
}

.week:last-child {
  padding-bottom: 20px;
}


.weekday {
  -st-states: size(enum(small, medium));
  color: value(TextColor);
  justify-content: center;
  display: flex;
  flex-shrink: 0;
}

.weekday:size(medium) {
  padding: 18px 0 12px;
  width: 36px;
}

.weekday:size(small) {
  padding: 12px 0 9px;
  width: 30px;
}

.weekday abbr {
  text-decoration: none;
}

.body {
  -st-states: size(enum(small, medium));
  background-color: value(rootBackgroundColor);
}

.monthsGrid {
  border-collapse: collapse;
  width: 100%;
}

.body:size(medium) {
  padding: 0 24px 24px;
}

.body:size(small) {
  padding: 0 18px 18px;
}

.day {
  -st-states: selected, disabled, outside, past, today, firstOfMonth, lastOfMonth, unfocused, size(enum(small, medium));
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  color: value(TextColor);
  z-index: 1;
  position: relative;
}

.day:size(medium) {
  width: 36px;
  height: 36px;
}

.day:size(small) {
  width: 30px;
  height: 30px;
}


.firstOfMonth,
.lastOfMonth,
.today {}

.day:hover {
  background-color: value(BackgroundColorHover);
}

.day:selected:not(:outside) {
  background-color: value(BackgroundColorSelected);
  color: value(BackgroundColor);
}

.day:outside,
.day:disabled {
  pointer-events: none;
  color: value(DisabledColor);
}

/**************************************************************/

.day:selected:not(:outside) {
  background: none !important;
  border-radius: 50% !important;
}

.day:selected:not(:outside) .dayWrapper {
  background-color: value(BackgroundColorSelected);
}

.day:selected:not(:outside):hover .dayWrapper {
  background-color: value(BackgroundColorSelectedHover);
}

button.dayWrapper {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

.dayWrapper {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

:global(#SITE_CONTAINER.focus-ring-active) .focused .dayWrapper {
  -st-mixin: focusRing();
}

.dayWrapper:has(.dayIndicationContainer) {
  justify-content: flex-end;
}

.dayText {
  -st-states: hasIndication;
  text-align: center;
  align-self: center;
  line-height: 1;
}

.dayIndicationContainer {
  height: 11px;
  padding: 3px 0 4px 0;
  box-sizing: border-box;
  align-self: center;
}

/** for selection mode type range **/

/************************************************/

/** Two months mode **/
.months:twoMonths {
  display: flex;
}

/************************************************/

/* st-namespace-reference="../../../../../../../src/components/DatePicker/Calendar/BaseCalendar/BaseCalendar.st.css" */