/* Date / Time menu */

/* overall menu */
#calendarArea {
	padding: 0;
}

/* set padding here instead of #calendarArea for GNOME older than 46 */
.datemenu-popover { padding: 8px;  }

/* padding property for older gnome versions */
.datemenu-calendar-column:ltr { margin-left: 0; padding-left: 0; }
.datemenu-calendar-column:rtl {	margin-right: 0; padding-right: 0; }

.datemenu-calendar-column, /* Calendar menu side column */
.datemenu-calendar-column .datemenu-displays-box { /* widgets below calendar */
	spacing: 8px; 
}


/* today header button */
.datemenu-today-button {
	color: TEXT-SECONDARY-COLOR;
	background-color: none;
	border-radius: 12px;
	margin: 0;
}

.datemenu-today-button:hover {
	transition-duration: 100ms;
	background-color: SECTION-COLOR;
	box-shadow: inset 0 0 0 1px BORDER-SHADOW !important;
}

.datemenu-today-button:focus {
	transition-duration: 100ms;
	background-color: ACCENT-OPACITY-COLOR;
	box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR !important;
}

/* weekday label */
.day-label { font-weight: 600; }

/* date label */
.date-label { font-weight: 700; }


/* Calendar */

.calendar {
	border-radius: 14px;
	background-color: SECTION-COLOR;
	box-shadow: inset 0 0 0 1px BORDER-SHADOW !important;
	border-color: transparent;
	padding: 3px;
	margin: 0;
}

.calendar-month-header {
	padding: 2px;
}

/* month header */
.calendar-month-header .calendar-month-label {
	color: TEXT-PRIMARY-COLOR !important;
	padding: 0 !important; /* override because of gdm */
	background-color: transparent; /* 46+ */
}

.calendar-month-header .pager-button {
	height: 2.2em;
	width: 2.2em;
}

/* days of week */
.calendar-day.calendar-day-heading,
.calendar .calendar-day-heading /* 46+ */ {
	color: TEXT-SECONDARY-COLOR;
	background-color: transparent;
	border-radius: 8px;
}

/* day buttons, prev/next month button */
.calendar-day,
.calendar-month-header .pager-button {
	color: TEXT-PRIMARY-COLOR;
	background-color: transparent; /* 46+ */
	border-radius: 9px;
	padding: 0;
	transition-duration: 100ms;
}

.calendar-day {
	width: 2.8em;
	height: 2.8em;
}

.calendar-day:hover,
.calendar-day:selected:hover,
.calendar .calendar-day-heading:hover, /* 46+ */
.calendar .calendar-day-heading:selected:hover, /* 46+ */
.calendar .calendar-month-header .pager-button:hover {
	background-color: ACCENT-DISABLED_HOVER;
	color: TEXT-PRIMARY-COLOR;
	box-shadow: inset 0 0 0 1px BORDER-SHADOW;
}

.calendar-day:focus,
.calendar .calendar-day-heading:focus, /* 46+ */
.calendar .calendar-month-header .pager-button:focus {
	background-color: ACCENT-OPACITY-COLOR;
	box-shadow: inset 0 0 0 1.5px ACCENT-SECONDARY-COLOR !important;
}

.calendar-day:selected,
.calendar .calendar-day-heading:selected /* 46+ */ {
	background: ACCENT-DISABLED_HOVER;
	box-shadow: inset 0 0 0 1px BORDER-SHADOW;
}

/* today button */
.calendar-today,
.calendar-today:selected {
	background-color: BUTTON-COLOR;
	color: BUTTON-TEXT-COLOR !important;
	box-shadow: inset 0 0 0 1px BORDER-SHADOW;
}

.calendar-today:hover,
.calendar-today:selected:hover,
.calendar-today:focus,
.calendar-today:selected:focus {
	background-color: BUTTON_HOVER;
} 

/* if day has event */
.calendar .calendar-day-with-events {
	background-image: url("./calendar-event.svg");
	background-size: contain;
	font-weight: 700;
}

.calendar .calendar-today.calendar-day-with-events {
	background-image: url("./calendar-event-today.svg") !important; /* override because of gdm */
	background-size: contain;
}

/* weekend day button */
.calendar .calendar-nonwork-day, /* up to 44 */
.calendar-weekend { /* 45+ */
	color: TEXT-SECONDARY-COLOR;
}

/* other month day button */
.calendar .calendar-other-month-day, /* up to 44 */
.calendar-other-month { /* 45+ */
	color: TEXT-DISABLED-COLOR !important;
}

.calendar .calendar-other-month-day.calendar-day-with-events, /* up to 44 */
.calendar-other-month.calendar-day-with-events { /* 45+ */
	background-image: url("./calendar-event-disabled.svg") !important; /* override because of gdm */
	background-size: contain;
}

.calendar .calendar-week-number {
	background-color: ACCENT-DISABLED-COLOR;
	color: TEXT-SECONDARY-COLOR;
	box-shadow: inset 0 0 0 1px BORDER-SHADOW;
	border-radius: 7px;
}


/* Events / World clocks / weather section */

.events-button,
.world-clocks-button,
.weather-button {
	background-color: SECTION-COLOR;
	color: TEXT-SECONDARY-COLOR;
	border-radius: 14px;
	margin: 0;
	border-color: transparent;
	box-shadow: inset 0 0 0 1px BORDER-SHADOW;
	transition-duration: 125ms;
}

.events-button:hover,
.world-clocks-button:hover,
.weather-button:hover {
	background-color: ACCENT-DISABLED-COLOR;
}

.events-button:focus,
.world-clocks-button:focus,
.weather-button:focus {
	background-color: ACCENT-OPACITY-COLOR;
	box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR !important;
}

.events-button:active,
.world-clock-button:active,
.weather-button:active {
	background-color: ACCENT-DISABLED_HOVER;
}

/* header */
.weather-button .weather-header,
.events-button .events-title,
.world-clocks-button .world-clocks-header {
	color: TEXT-SECONDARY-COLOR;
}


/* Events section */
.events-button .events-list {
	color: TEXT-PRIMARY-COLOR;
}
.events-button .event-time {
	color: TEXT-SECONDARY-COLOR;
}
.events-button .events-box .events-list .event-placeholder { /* if no events, 46+ */
	color: TEXT-DISABLED-COLOR;
}

/* World clocks section */
.world-clocks-button .world-clocks-time {
	color: TEXT-PRIMARY-COLOR;
}

.world-clocks-button .world-clocks-city,
.world-clocks-button .world-clocks-timezone {
	color: TEXT-SECONDARY-COLOR;
}


/* Weather section */
.weather-button .weather-forecast-time {
	color: TEXT-SECONDARY-COLOR;
}
