/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
:host {
  --digi--calendar-week-view--button--week--padding: calc(var(--digi--gutter--small) + 1px) var(--digi--gutter--largest-2);
  --digi--calendar-week-view--button--week--icon--width: var(--digi--gutter--medium);
  --digi--calendar-week-view--button--week--display: flex;
  --digi--calendar-week-view--button--week--justify-content: center;
  --digi--calendar-week-view--button--week--previous-button--border-radius: var(--digi--global--border-radius--base) 0 0 var(--digi--global--border-radius--base);
  --digi--calendar-week-view--button--week--next-button--border-radius: 0 var(--digi--global--border-radius--base) var(--digi--global--border-radius--base) 0;
  --digi--calendar-week-view--button--week--width: 9.75rem;
  --digi--calendar-week-view--button--week--margin: 0.125rem;
  --digi--calendar-week-view--button--week--font-size: var(--digi--button--font-size--small);
  --digi--calendar-week-view--button--week--keep-right--margin: 10rem;
  --digi--calendar-week-view--button--week--keep-right--margin--small: 8.1rem;
  --digi--calendar-week-view--button--week--background: var(--digi--color--background--interactive--default--secondary);
  --digi--calendar-week-view--button--week--border-color: var(--digi--color--border--interactive--default--primary);
  --digi--calendar-week-view--button--date--color: var(--digi--color--text--interactive--tertiary);
  --digi--calendar-week-view--button--date--color--active: var(--digi--color--text--interactive--secondary);
  --digi--calendar-week-view--button--date--color--no-value: var(--digi--color--text--interactive--tertiary);
  --digi--calendar-week-view--button--date--background: var(--digi--color--background--interactive--default--secondary);
  --digi--calendar-week-view--button--date--background--active: var(--digi--color--background--interactive--selected--primary);
  --digi--calendar-week-view--button--date--background--no-value: var(--digi--color--background--interactive--default--tertiary);
  --digi--calendar-week-view--button--date--border-color: var(--digi--color--border--interactive--default--primary);
  --digi--calendar-week-view--button--date--border-color--active: var(--digi--color--border--interactive--default--primary);
  --digi--calendar-week-view--button--date--border-color--no-value: var(--digi--color--border--interactive--default--on-input-nuance);
  --digi--calendar-week-view--button--date--border-radius: 0;
  --digi--calendar-week-view--button--date--padding: 16px 10px 25px 10px;
  --digi--calendar-week-view--button--date--font-size: var(--digi--button--font-size--small);
  --digi--calendar-week-view--button--date--box-shadow--active: inset 0 0 0 0.1875rem var(--digi--grayscale--0);
  --digi--calendar-week-view--button--date--width: 3.75rem;
  --digi--calendar-week-view--button--date--width--small: 3rem;
  --digi--calendar-week-view--today-circle--size: 0.3125rem;
  --digi--calendar-week-view--today-circle--color: var(--digi--color--text--interactive--tertiary);
  --digi--calendar-week-view--today-circle--fill: var(--digi--color--text--interactive--tertiary);
  --digi--calendar-week-view--today-circle--fill--no-value: var(--digi--color--text--interactive--tertiary);
  --digi--calendar-week-view--today-circle--fill--active: var(--digi--color--text--interactive--secondary);
  --digi--calendar-week-view--dates--margin: 0 0 var(--digi--gutter--smaller) 0;
  --digi--calendar-week-view--dates--gap: var(--digi--gutter--smaller);
}

.digi-calendar-week-view__timepicker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.digi-calendar-week-view__week-button {
  --digi--ui--width--icon: var(--digi--calendar-week-view--button--week--icon--width);
  --digi--button--padding--medium: var(--digi--calendar-week-view--button--week--padding);
  --digi--button--display: var(--digi--calendar-week-view--button--week--display);
  --digi--button--width: var(--digi--calendar-week-view--button--week--width);
  --digi--button--justify-content: var(--digi--calendar-week-view--button--week--justify-content);
  --digi--button--color--background--secondary--default: var(--digi--calendar-week-view--button--week--background);
  --digi--button--color--background--secondary--hover: var(--digi--calendar-week-view--button--week--background);
  --digi--button--color--background--secondary--focus: var(--digi--calendar-week-view--button--week--background);
  --digi--button--color--background--secondary--active: var(--digi--calendar-week-view--button--week--background);
  --digi--button--color--border--secondary--hover: var(--digi--calendar-week-view--button--week--border-color);
  --digi--button--color--border--secondary--focus: var(--digi--calendar-week-view--button--week--border-color);
  --digi--button--color--border--secondary--active: var(--digi--calendar-week-view--button--week--border-color);
  --digi--button--font-size--medium: var(--digi--calendar-week-view--button--week--font-size);
  position: relative;
}
.digi-calendar-week-view__week-button--previous {
  margin-right: var(--digi--calendar-week-view--button--week--margin);
  --digi--button--border-radius--secondary--default: var(--digi--calendar-week-view--button--week--previous-button--border-radius);
  --digi--button--border-radius--secondary--hover: var(--digi--calendar-week-view--button--week--previous-button--border-radius);
}
.digi-calendar-week-view__week-button--next {
  margin-left: var(--digi--calendar-week-view--button--week--margin);
  --digi--button--border-radius--secondary--default: var(--digi--calendar-week-view--button--week--next-button--border-radius);
  --digi--button--border-radius--secondary--hover: var(--digi--calendar-week-view--button--week--next-button--border-radius);
}
.digi-calendar-week-view__week-button--keep-left, .digi-calendar-week-view__week-button--keep-right {
  --digi--calendar-week-view--button--week--margin: var(--digi--calendar-week-view--button--week--keep-right--margin);
}
.digi-calendar-week-view__week-button--hidden {
  display: none;
}
.digi-calendar-week-view__week-button ::slotted([slot^=icon]) {
  --digi--icon--width: var(--digi--calendar-week-view--button--icon--width);
}

.digi-calendar-week-view__dates {
  flex: 1 0 100%;
  margin: var(--digi--calendar-week-view--dates--margin);
  display: flex;
  justify-content: center;
}

.digi-calendar-week-view__flex {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.digi-calendar-week-view__heading {
  font-size: var(--digi--typography--body--font-size--desktop);
}

.digi-calendar-week-view__month {
  text-transform: capitalize;
}

.digi-calendar-week-view__date-list {
  list-style: none;
  display: grid;
  grid-template: repeat(1, 1fr)/repeat(5, var(--digi--calendar-week-view--button--date--width));
  grid-auto-flow: column;
  gap: var(--digi--calendar-week-view--dates--gap);
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 23.375rem) {
  .digi-calendar-week-view__date-list {
    grid-template: repeat(1, 1fr)/repeat(5, var(--digi--calendar-week-view--button--date--width--small));
  }
}
.digi-calendar-week-view__date-list-item {
  position: relative;
  margin: 0;
  padding: 0;
}

.digi-calendar-week-view__date-button {
  --digi--button--width: 100%;
  --digi--button--border-radius--secondary--default: var(--digi--calendar-week-view--button--date--border-radius);
  --digi--button--border-radius--secondary--hover: var(--digi--calendar-week-view--button--date--border-radius);
  --digi--button--padding--medium: var(--digi--calendar-week-view--button--date--padding);
  --digi--button--font-size--medium: var(--digi--calendar-week-view--button--date--font-size);
  --digi--button--color--text--secondary--default: var(--digi--calendar-week-view--button--date--color);
  --digi--button--color--text--secondary--hover: var(--digi--calendar-week-view--button--date--color);
  --digi--button--color--text--secondary--focus: var(--digi--calendar-week-view--button--date--color);
  --digi--button--color--text--secondary--active: var(--digi--calendar-week-view--button--date--color);
  --digi--button--color--background--secondary--default: var(--digi--calendar-week-view--button--date--background);
  --digi--button--color--background--secondary--hover: var(--digi--calendar-week-view--button--date--background);
  --digi--button--color--background--secondary--focus: var(--digi--calendar-week-view--button--date--background);
  --digi--button--color--background--secondary--active: var(--digi--calendar-week-view--button--date--background);
  --digi--button--color--border--secondary--default: var(--digi--calendar-week-view--button--date--border-color);
  --digi--button--color--border--secondary--hover: var(--digi--calendar-week-view--button--date--border-color);
  --digi--button--color--border--secondary--focus: var(--digi--calendar-week-view--button--date--border-color);
  --digi--button--color--border--secondary--active: var(--digi--calendar-week-view--button--date--border-color);
}
.digi-calendar-week-view__date-button--no-value {
  --digi--button--color--text--secondary--default: var(--digi--calendar-week-view--button--date--color--no-value);
  --digi--button--color--text--secondary--hover: var(--digi--calendar-week-view--button--date--color--no-value);
  --digi--button--color--text--secondary--focus: var(--digi--calendar-week-view--button--date--color--no-value);
  --digi--button--color--text--secondary--active: var(--digi--calendar-week-view--button--date--color--no-value);
  --digi--button--color--background--secondary--default: var(--digi--calendar-week-view--button--date--background--no-value);
  --digi--button--color--background--secondary--hover: var(--digi--calendar-week-view--button--date--background--no-value);
  --digi--button--color--background--secondary--focus: var(--digi--calendar-week-view--button--date--background--no-value);
  --digi--button--color--background--secondary--active: var(--digi--calendar-week-view--button--date--background--no-value);
  --digi--button--color--border--secondary--default: var(--digi--calendar-week-view--button--date--border-color--no-value);
  --digi--button--color--border--secondary--hover: var(--digi--calendar-week-view--button--date--border-color--no-value);
  --digi--button--color--border--secondary--focus: var(--digi--calendar-week-view--button--date--border-color--no-value);
  --digi--button--color--border--secondary--active: var(--digi--calendar-week-view--button--date--border-color--no-value);
  --digi--calendar-week-view--today-circle--fill: var(--digi--calendar-week-view--today-circle--fill--no-value);
}
.digi-calendar-week-view__date-button--active {
  --digi--button--color--text--secondary--default: var(--digi--calendar-week-view--button--date--color--active);
  --digi--button--color--text--secondary--hover: var(--digi--calendar-week-view--button--date--color--active);
  --digi--button--color--text--secondary--focus: var(--digi--calendar-week-view--button--date--color--active);
  --digi--button--color--text--secondary--active: var(--digi--calendar-week-view--button--date--color--active);
  --digi--button--color--background--secondary--default: var(--digi--calendar-week-view--button--date--background--active);
  --digi--button--color--background--secondary--hover: var(--digi--calendar-week-view--button--date--background--active);
  --digi--button--color--background--secondary--focus: var(--digi--calendar-week-view--button--date--background--active);
  --digi--button--color--background--secondary--active: var(--digi--calendar-week-view--button--date--background--active);
  --digi--button--color--border--secondary--default: var(--digi--calendar-week-view--button--date--border-color--active);
  --digi--button--color--border--secondary--hover: var(--digi--calendar-week-view--button--date--border-color--active);
  --digi--button--color--border--secondary--focus: var(--digi--calendar-week-view--button--date--border-color--active);
  --digi--button--color--border--secondary--active: var(--digi--calendar-week-view--button--date--border-color--active);
  --digi--calendar-week-view--today-circle--fill: var(--digi--calendar-week-view--today-circle--fill--active);
}
.digi-calendar-week-view__date-button-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-transform: capitalize;
}

.digi-calendar-week-view__date-button-circle {
  position: absolute;
  height: var(--digi--calendar-week-view--today-circle--size);
  width: var(--digi--calendar-week-view--today-circle--size);
  background: var(--digi--calendar-week-view--today-circle--fill);
  bottom: 0.875rem;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}

::slotted(* .digi-calendar-week-view__date-button--active .digi-button) {
  box-shadow: var(--digi--calendar-week-view--button--date--box-shadow--active);
}

::slotted(* .digi-calendar-week-view__date-button .digi-button):hover .digi-calendar-week-view__date-button-day::after, ::slotted(* .digi-calendar-week-view__date-button .digi-button):focus .digi-calendar-week-view__date-button-day::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 2px;
  top: 38px;
  background-color: var(--digi--calendar-week-view--button--date--color);
  left: 15px;
}
::slotted(* .digi-calendar-week-view__date-button .digi-button):hover .digi-calendar-week-view__date-button-day--active::after, ::slotted(* .digi-calendar-week-view__date-button .digi-button):focus .digi-calendar-week-view__date-button-day--active::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 2px;
  top: 38px;
  background-color: var(--digi--calendar-week-view--button--date--color--active);
  left: 15px;
}

::slotted(* .digi-calendar-week-view__date-button .digi-button__text) {
  width: 100%;
}

::slotted(* .digi-calendar-week-view__week-button--previous .digi-button):hover::after, ::slotted(* .digi-calendar-week-view__week-button--previous .digi-button):focus::after {
  content: "";
  position: absolute;
  width: 62px;
  height: 2px;
  top: 29px;
  background-color: #00005a;
  left: 50px;
}

::slotted(* .digi-calendar-week-view__week-button--next .digi-button):hover::after, ::slotted(* .digi-calendar-week-view__week-button--next .digi-button):focus::after {
  content: "";
  position: absolute;
  width: 62px;
  height: 2px;
  top: 29px;
  background-color: #00005a;
  left: 20px;
}