/* 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/. */

@namespace html url("http://www.w3.org/1999/xhtml");

:root {
  --calendar-list-header-padding: 9px 12px;
  --calendar-list-item-padding: 3px;
  --calendar-list-item-margin: 3px;
  --calendar-list-item-dot-size: 9px;
  --calendar-list-item-dot-gap: 6px;
  --calendar-panel-spacer: 3px;
  --calendar-side-panel-minimonth-margin: 0 calc(2 * var(--calendar-panel-spacer));
}

:root[uidensity="compact"] {
  --calendar-list-header-padding: 6px 9px;
  --calendar-list-item-padding: 1px;
  --calendar-list-item-margin: 1px;
  --calendar-list-item-dot-size: 6px;
  --calendar-list-item-dot-gap: 3px;
  --calendar-side-panel-minimonth-margin: var(--calendar-panel-spacer);
}

:root[uidensity="touch"] {
  --calendar-list-header-padding: 9px 15px;
  --calendar-list-item-padding: 6px;
  --calendar-list-item-margin: 6px;
  --calendar-list-item-dot-size: 9px;
  --calendar-list-item-dot-gap: 9px;
  --calendar-side-panel-minimonth-margin: 0 calc(3 * var(--calendar-panel-spacer));
}

/* Calendar Items */

.calendar-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  -moz-context-properties: stroke;
  stroke: currentColor;
  min-height: auto;
  min-width: auto;
  margin: 0;
  background-color: transparent;
  border-color: transparent;
  border-radius: 0;
  padding: var(--calendar-list-header-padding);
  font-size: 1.1rem;
  font-weight: 600;
}

.calendar-list-header > * {
  pointer-events: none;
}

.calendar-list-header:hover {
  border-color: transparent !important;
}

#calendarListHeader:hover {
  background-color: var(--layout-background-3);
}

#calendarListHeader[checked="false"] > img {
  transform: rotate(-90deg);
}

.calendar-list-create {
  list-style-image: var(--icon-add);
  margin-block: 0;
  margin-inline: 3px;
  padding: 3px !important;
  border: none !important;
  min-width: auto;
}

.calendar-list-create .toolbarbutton-text:not([value]) {
  display: none;
}

checkbox.treenode-checkbox {
  margin-inline: 6px;
  margin-block: 0;
  font-weight: bold;
}

checkbox.treenode-checkbox.agenda-checkbox {
  padding-block: 6px;
}

checkbox.treenode-checkbox > .checkbox-check {
  appearance: none;
  align-items: center;
  border: none;
  width: 10px;
  height: 10px;
  color: inherit;
  background-image: var(--icon-nav-down-sm);
  background-size: contain;
  background-color: transparent !important;
  -moz-context-properties: stroke;
  stroke: currentColor;
}

checkbox.treenode-checkbox:not([checked="true"]) > .checkbox-check {
  transform: rotate(-90deg);
}

checkbox.treenode-checkbox:not([checked="true"]):-moz-locale-dir(rtl) > .checkbox-check {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: no-preference) {
  checkbox.treenode-checkbox > .checkbox-check {
    transition: transform 200ms ease;
  }
  #calendarListHeader > img {
    transition: transform 150ms ease;
  }
  #calendar-list > li,
  #calendar-list > li > :is(.calendar-displayed,.calendar-more-button) {
    transition: opacity 250ms ease;
  }
  #calendar-list > li {
    transition: background-color 250ms ease, color 250ms ease;
  }
}

.checkbox-label-box {
  margin-inline-start: 4px;
}

.checkbox-icon {
  margin-inline-end: 2px;
}

.checkbox-label {
  margin: 0 !important;
}

checkbox.treenode-checkbox > .checkbox-label-center-box > .checkbox-label-box > .checkbox-label {
  font-weight: bold;
  border-bottom: 1px solid -moz-Dialog;
}

.selected-text {
  font-weight: bold;
}

.selected-text:not([selected="true"]),
.unselected-text[selected="true"] {
  visibility: hidden;
}

.categories-textbox .textbox-search-icon {
  list-style-image: none;
  cursor:default;
}

.categories-textbox {
  appearance: auto;
  -moz-default-appearance: textfield;
}

/*
 * Note that #calendar-list is used for 2 separate lists that look similar,
 * but are otherwise independent:
 *
 * - calendar-providerUninstall-dialog.xhtml
 * - calendar-tab-panels.inc.xhtml
 *
 * Please be careful when changing the following CSS.
 */

#calendar-list-pane {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  justify-content: space-between;
}

#calendar-list-inner-pane {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  overflow-x: hidden;
}

#calendar-list-inner-pane > #calendar-list {
  overflow: auto;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 0;
  min-width: 150px;
}

#calendar-list > li {
  display: flex;
  padding-block: var(--calendar-list-item-padding);
  padding-inline: 14px var(--calendar-list-item-dot-gap);
  align-items: center;
  margin-block: var(--calendar-list-item-margin);
  margin-inline: 9px;
  border-radius: 3px;
  gap: var(--calendar-list-item-dot-gap);
}

#calendar-list > li.selected {
  background-color: -moz-cellhighlight;
  color: -moz-cellhighlighttext;
}

#calendar-list:focus-within > li.selected {
  background-color: var(--selected-item-color);
  color: var(--selected-item-text-color);
}

#calendar-list > li:not(.selected):hover {
  background-color: color-mix(in srgb, var(--selected-item-color) 10%, transparent);
}

#calendar-list > li.dragging {
  opacity: 0.75;
}

:root[lwt-tree] #calendar-list > li.selected {
  border-color: var(--sidebar-highlight-background-color, hsla(0,0%,80%,.3));
  background: var(--sidebar-highlight-background-color, hsla(0,0%,80%,.3));
  color: var(--sidebar-highlight-text-color, var(--sidebar-text-color));
}

:root[lwt-tree] #calendar-list:focus > li.selected {
  border-color: var(--sidebar-highlight-background-color, hsla(0,0%,80%,.6));
  color: var(--sidebar-highlight-text-color, var(--sidebar-text-color));
}

:root[lwt-tree-brighttext] #calendar-list > li.selected {
  border-color: var(--sidebar-highlight-background-color, rgba(249,249,250,.1));
  background: var(--sidebar-highlight-background-color, rgba(249,249,250,.1));
}

:root[lwt-tree-brighttext] #calendar-list:focus > li.selected {
  border-color: var(--sidebar-highlight-background-color, rgba(249,249,250,.3));
  color: var(--sidebar-highlight-text-color, var(--sidebar-text-color));
}

#calendar-list > li > button.calendar-enable-button {
  color: #fff !important;
  background: #6b80a4;
  padding: 1px 4px;
  font-size: 0.75em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 12px;
  margin: 0;
  min-width: auto;
  min-height: auto;
}

#calendar-list > li > button.calendar-enable-button:hover,
#calendar-list > li > button.calendar-enable-button:focus,
#calendar-list > li > button.calendar-enable-button:active {
  background: #2c4c82;
}

#calendar-list > li > :is(.calendar-displayed,.calendar-more-button) {
  appearance: none;
  color: inherit;
  background-color: transparent !important;
  border-style: none;
  -moz-context-properties: fill, stroke;
  fill: color-mix(in srgb, currentColor 20%, transparent);
  stroke: currentColor;
  margin: 0px;
  min-width: 16px;
  min-height: 16px;
  width: 16px;
  height: 16px;
}

#calendar-list > li > .calendar-displayed {
  background-image: var(--icon-hidden);
  opacity: 0.7;
}

#calendar-list > li > .calendar-displayed:checked {
  background-image: var(--icon-eye);
  opacity: 0;
}

#calendar-list > li > .calendar-more-button {
  --button-padding: 0;
  opacity: 0;
  margin-block: 0;
  background-image: var(--icon-more);
}

#calendar-list > li > .calendar-displayed:is(:hover, :focus),
#calendar-list > li > .calendar-more-button:is(:hover, :focus) {
  opacity: 0.9 !important;
}

#calendar-list > li:hover > .calendar-displayed:checked,
#calendar-list > li:hover > .calendar-more-button {
  opacity: 0.7;
}

#calendar-list > :is(li, richlistitem) > .calendar-color {
  width: var(--calendar-list-item-dot-size);
  height: var(--calendar-list-item-dot-size);
  border-radius: 5px;
  box-sizing: border-box;
  flex-shrink: 0;
}

#calendar-list > li > .calendar-name {
  flex: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

#calendar-list > li[calendar-disabled]:not(.selected) > .calendar-name {
  color: #808080;
}

#calendar-list > li > .calendar-list-icon {
  width: 16px;
  height: 16px;
  -moz-context-properties: fill, stroke;
  fill: color-mix(in srgb, currentColor 20%, transparent);
  stroke: currentColor;
}

#calendar-list > li > .calendar-list-icon:not([src]) {
  visibility: hidden;
}

#calendar-list > li:not([calendar-muted]) > .calendar-mute-status {
  display: none;
}

#calendar-list > richlistitem {
  align-items: center;
}

#sideButtonsBottom {
  display: inline-flex;
  justify-content: space-between;
}

#newCalendarSidebarButton {
  background-image: var(--icon-calendar);
}

#refreshCalendar {
  background-image: var(--icon-sync);
}

#sidePanelNewEvent,
#sidePanelNewTask {
  background-image: var(--icon-add);
}

:root[uidensity="touch"] #sidePanelNewEvent,
:root[uidensity="touch"] #sidePanelNewTask {
  --icon-size: 20px;
  background-image: var(--icon-add-md);
}

/* Calendar Side Panel */

#primaryButtonSidePanel {
  display: flex;
  justify-content: center;
  align-items: center;
}

:root[uidensity="compact"] #primaryButtonSidePanel {
  margin-top: var(--calendar-panel-spacer);
}

#calMinimonthBox {
  margin: var(--calendar-side-panel-minimonth-margin);
}
