/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

calendar-minimonth {
  --mmMainColor: var(--sidebar-text-color, FieldText);
  --mmMainBackground: light-dark(var(--color-gray-05), var(--color-gray-70));
  --mmMainBorderColor: light-dark(var(--color-gray-20), var(--color-gray-50));
  --mmMainBorderRadius: 6px;
    --mmHighlightColor: var(--sidebar-highlight-text-color, var(--selected-item-text-color));
    --mmHighlightBackground: var(--sidebar-highlight-background-color, var(--selected-item-color));
    --mmHighlightBorderColor: var(--sidebar-highlight-background-color, var(--selected-item-color));
  --mmBoxBackground: light-dark(var(--color-gray-20), var(--color-gray-50));
  --mmBoxBorderColor: light-dark(var(--color-gray-20), var(--color-gray-40));
  --mmBoxPadding: 0;
  --mmBoxItemColor: light-dark(var(--color-gray-30), var(--color-gray-40));
  --mmBoxItemBorderColor: transparent;
  --mmBoxItemPadding: 2px;
  --mmDayColor: light-dark(var(--color-gray-70), var(--color-gray-10));
  --mmDayBackground: transparent;
  --mmDayBorderColor: transparent;
  --mmDayOtherColor: light-dark(var(--color-gray-40), var(--color-gray-50));
  --mmDayWeekColor: light-dark(var(--color-ink-40), var(--color-ink-40));
  --mmDayOtherBackground: transparent;
  --mmDayOtherBorderColor: transparent;
  --mmDayTodayColor: light-dark(var(--color-gray-90), var(--color-ink-10));
  --mmDayTodayBackground: color-mix(in srgb, var(--color-ink-40) 20%, transparent);
  --mmDayTodayBorderColor: transparent;
  --mmDaySelectedColor: var(--selected-item-color);
  --mmDaySelectedBackground: color-mix(in srgb, var(--selected-item-color) 40%, transparent);
  --mmDaySelectedBorderColor: color-mix(in srgb, var(--selected-item-color) 70%, transparent);
  --mmDaySelectedTodayBackground: color-mix(in srgb, var(--selected-item-color) 20%, transparent);
  --mmDaySelectedTodayBorderColor: color-mix(in srgb, var(--selected-item-color) 70%, transparent);
  --mmDayBorderRadius: 3px;
  --mmDayPadding: 4px;
  --mmDayBusyColor: var(--selected-item-color);
  --mmDayBusyIndicatorSize: 4px;
}

/* This includes the light theme not inherited by the system */
:root[lwt-tree]:not([lwt-tree-brighttext]) calendar-minimonth {
  --mmMainColor: var(--sidebar-text-color, FieldText);
  --mmMainBackground: transparent;
  --mmHighlightColor: var(--sidebar-highlight-text-color, var(--selected-item-text-color));
  --mmHighlightBackground: var(--sidebar-highlight-background-color, var(--selected-item-color));
  --mmHighlightBorderColor: var(--sidebar-highlight-background-color, var(--selected-item-color));
  --mmBoxBackground: var(--color-gray-20);
  --mmBoxBorderColor: var(--color-gray-30);
  --mmBoxItemColor: var(--color-gray-30);
  --mmBoxItemBorderColor:  transparent;
  --mmDayTodayColor: var(--color-gray-90);
  --mmDayTodayBorderColor: transparent;
  --mmDayColor: var(--color-gray-70);
  --mmDayBorderColor: transparent;
  --mmDayOtherColor: var(--color-gray-40);
  --mmDayOtherBackground: transparent;
  --mmDayOtherBorderColor: transparent;
}

@media (prefers-contrast) {
  :root:not([lwtheme]) calendar-minimonth {
    --mmMainBackground: transparent;
    --mmBoxBackground: ButtonFace;
    --mmBoxBorderColor: var(--color-gray-30);
    --mmBoxItemColor: var(--color-gray-40);
    --mmBoxItemBorderColor: var(--mmBoxBorderColor);
    --mmDayColor: WindowText;
    --mmDayOtherColor: GrayText;
    --mmDayWeekColor: var(--selected-item-color);
    --mmDayOtherBackground: transparent;
    --mmDayTodayColor: -moz-DialogText;
    --mmDayTodayBackground: Field;
    --mmDayTodayBorderColor: var(--selected-item-color);
    --mmDaySelectedColor: var(--selected-item-text-color);
    --mmDaySelectedBackground: var(--selected-item-color);
    --mmDaySelectedBorderColor: ButtonFace;
    --mmDaySelectedTodayBackground: var(--selected-item-color);
    --mmDaySelectedTodayBorderColor: ButtonFace;
  }
}

:root[uidensity="compact"] calendar-minimonth {
  --mmDayPadding: 2px;
}

:root[uidensity="touch"] calendar-minimonth {
  --mmDayPadding: 8px;
  --mmBoxPadding: 1px;
  --mmBoxItemPadding: 4px;
}

.datepicker-menulist > menupopup::part(content) {
  --panel-padding: 3px;
}

calendar-minimonth {
  background-color: var(--mmMainBackground);
  border-width: 0;
  color: var(--mmMainColor);
  padding: 1px;
  min-width: 175px;
}

calendar-minimonth:not([readonly="true"]) .minimonth-readonly-header,
calendar-minimonth[readonly="true"] .minimonth-header {
  display: none;
}

calendar-minimonth[readonly="true"] .minimonth-readonly-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px;
  border-bottom: 1px solid var(--mmBoxBackground);
  font-size: 1.1rem;
}

.minimonth-month-box {
  font-weight: bold;
  margin-bottom: var(--mmBoxPadding);
  padding: 0;
  text-align: center;
  white-space: nowrap;
}

.minimonth-month-name {
  display: inline-block;
  font-weight: bold;
  padding: var(--mmBoxPadding);
  width: 7ch;
  min-width: unset;
  text-align: center;
}

.minimonth-year-name {
  display: inline-block;
  font-weight: bold;
  width: 6ch;
  min-width: unset;
  padding: var(--mmBoxPadding);
  text-align: center;
}

.minimonth-year-name[type="number"] {
  text-align: center;
}

.minimonth-nav-section {
  display: inline-flex;
  align-items: center;
  color: inherit;
  background-color: var(--mmBoxBackground);
  border: 1px solid var(--mmBoxItemBorderColor);
  border-radius: var(--button-border-radius);
  margin: var(--mmBoxItemPadding);
}

.minimonth-header button,
.minimonth-header-btn {
  background: inherit;
  border-color: transparent;
  border-radius: 2px;
  stroke: var(--mmMainColor);
  width: auto;
  min-width: unset;
  height: 100%;
  min-height: 0;
  margin: var(--mmBoxPadding);
  padding: var(--mmBoxPadding);
  vertical-align: middle;
}

.button.minimonth-nav-btn.today-button {
  background-image: var(--icon-calendar-today);
}

.button.minimonth-nav-btn[dir="1"] {
  background-image: var(--icon-nav-right);
}

.button.minimonth-nav-btn[dir="-1"] {
  background-image: var(--icon-nav-left);
}

@media (prefers-color-scheme: dark) {
  .button.minimonth-nav-btn:is(:hover, :active),
  .button.minimonth-nav-btn:enabled:is(:hover, :active) {
    background-color: var(--color-gray-60);
  }
}

@media (prefers-contrast) {
  :root:not([lwtheme]) .button.minimonth-nav-btn:is(:hover, :active),
  :root:not([lwtheme]) .button.minimonth-nav-btn:enabled:is(:hover, :active) {
    background-color: var(--mmDaySelectedBackground);
    color: var(--mmDaySelectedColor);
    stroke: var(--mmDaySelectedColor);
    border-color: transparent;
  }
}

.minimonth-nav-btn:dir(rtl)[dir="-1"] ,
.minimonth-nav-btn:dir(rtl)[dir="1"] {
  transform: scaleX(-1);
}

.minimonth-nav-item {
  display: inline-block;
  border-inline: 1px solid var(--mmBoxItemColor);
  margin: 0;
}

.minimonth-nav-item input {
  color: inherit;
  background: inherit;
  border: none;
  margin: 0;
}

.minimonth-cal-box {
  border-spacing: 0;
  padding: 4px;
}

.minimonth-cal-box th,
.minimonth-cal-box td {
  width: 12.5%; /* 100% / 8 columns */
}

.minimonth-row-header {
  text-align: center;
}

.minimonth-day {
  color: var(--mmDayColor);
  text-align: center;
  border: 1px solid var(--mmDayBorderColor);
  border-radius: var(--mmDayBorderRadius);
  background-color: var(--mmDayBackground);
  min-height: 16px;
  padding: var(--mmDayPadding);
}

.minimonth-row-header-week {
  color: var(--mmDayOtherColor);
  text-align: center;
}

.minimonth-week {
  color: var(--mmDayWeekColor);
  text-align: center;
  border: 1px solid var(--mmDayBorderColor);
  background-color: var(--mmMainBackground);
  min-height: 16px;
}

.minimonth-day[othermonth="true"] {
  color: var(--mmDayOtherColor);
  background-color: var(--mmDayOtherBackground);
  border: 1px solid var(--mmDayOtherBorderColor);
}

.minimonth-day[today="true"] {
  background-color: var(--mmDayTodayBackground);
  border: 1px solid var(--mmDayTodayBorderColor);
  color: var(--mmDayTodayColor);
  font-weight: 800;
}

.minimonth-day[selected="true"] {
  background-color: var(--mmDaySelectedBackground);
  color: var(--mmDaySelectedColor);
  border: 1px solid var(--mmDaySelectedBorderColor);
}

#repeat-until-datepicker .minimonth-day[extra="true"],
#repeat-until-date .minimonth-day[extra="true"] {
  border: 1px solid var(--mmDayOtherColor);
}

#repeat-until-datepicker .minimonth-day:hover[extra="true"],
#repeat-until-date .minimonth-day:hover[extra="true"] {
  border: 1px solid var(--mmHighlightBorderColor);
}

.minimonth-day[selected="true"][today="true"] {
  background-color: var(--mmDaySelectedTodayBackground);
  border: 1px solid var(--mmDaySelectedTodayBorderColor);
}

.minimonth-day,
.minimonth-week {
  vertical-align: top;
  padding: var(--mmDayPadding);
}

.minimonth-day::after {
  content: "";
  display: block;
  height: var(--mmDayBusyIndicatorSize);
  width: var(--mmDayBusyIndicatorSize);
  margin-block-start: 2px;
  margin-inline: auto;
  border-radius: 50%;
  background-color: transparent;
}

.minimonth-day[busy]::after {
  background-color: var(--mmDayBusyColor);
}

.minimonth-day:hover[interactive] {
  cursor: pointer;
  border: 1px solid var(--mmDaySelectedTodayBorderColor);
  outline: none;
}

.minimonth-day:hover[interactive][selected="true"] {
  border-color: var(--mmHighlightBorderColor);
}

.minimonth-day:active[interactive] {
  background-color: var(--mmHighlightBackground);
  color: var(--mmHighlightColor);
}

.minimonth-list {
  padding-inline-start: 1em;
  padding-inline-end: 1em;
}

.minimonth-list[current="true"] {
  font-weight: bold;
}

.minimonth-list:hover {
  background-color: var(--mmHighlightBackground);
  color: var(--mmHighlightColor);
  cursor: pointer;
}

calendar-minimonth :focus-visible:not(:hover) {
  outline: 2px solid var(--focus-outline-color);
  outline-offset: -2px;
}

/* Minimonth border */

#minimonth-pane calendar-minimonth,
#recurrencePreview calendar-minimonth {
  border: 1px solid var(--mmMainBorderColor);
  border-radius: var(--mmMainBorderRadius);
}