.widget .popover,
.widget .tablet-popover {
  --popover-summary-color: var(--color-ink-2ry);
  --popover-summary-background: var(--color-ink-min);
  --popover-body-background: var(--color-background-frosted-glass);
  --popover-body-border-radius: var(--border-radius-base);
  --popover-body-border: 0;
  --popover-body-box-shadow: var(--box-shadow-z3);
  --popover-body-color: var(--color-ink-2ry);
  --popover-body-width: var(--width-sm);
  --scrollbar-track: transparent;
  position: relative;
  width: fit-content;
}
@media only screen and (min-width: 768px) and (min-height: 361px) {
  .widget .popover,
  .widget .tablet-popover {
    --popover-body-width: var(--width-base);
  }
}
.widget .popover {
  display: contents;
}
@media only screen and (min-width: 768px) and (min-height: 361px) {
  .widget .popover {
    display: block;
  }
}
@media only screen and (min-width: 768px) and (min-height: 361px) {
  .widget :where(.tablet-popover) .popover-body {
    --translate-shift: -3rem;
    background-color: var(--popover-body-background);
    -webkit-backdrop-filter: var(--backdrop-filter-blur-lg);
    border-radius: var(--popover-body-border-radius);
    border: var(--popover-body-border);
    box-shadow: var(--popover-body-box-shadow);
    font-size: var(--font-size-base);
    color: var(--popover-body-color);
    display: flex;
    flex-direction: column;
    list-style: none;
    text-align: left;
    margin: var(--size-1p5) 0 0;
    padding-block: var(--size-2);
    padding-inline-start: calc(var(--padding-x-box) - var(--size-half));
    padding-inline-end: calc(var(--padding-x-box) / 3);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-sm) var(--easing-base), translate var(--duration-sm) var(--easing-base);
    position: absolute;
    top: auto;
    left: 0;
    translate: 0 var(--translate-shift);
    width: var(--popover-body-width);
    /* max-height: 72vh; */
    /* max-height: 72dvh; */
    z-index: var(--zindex-popover);
  }
}
@media only screen and (min-width: 768px) and (min-height: 361px) {
  .widget :where(.tablet-popover.is-open) .popover-body {
    opacity: 1;
    pointer-events: all;
    translate: 0;
  }
}
.widget :where(.popover) .popover-body {
  --translate-shift: -3rem;
  background-color: var(--popover-body-background);
  -webkit-backdrop-filter: var(--backdrop-filter-blur-lg);
  border-radius: var(--popover-body-border-radius);
  border: var(--popover-body-border);
  box-shadow: var(--popover-body-box-shadow);
  font-size: var(--font-size-base);
  color: var(--popover-body-color);
  display: flex;
  flex-direction: column;
  list-style: none;
  text-align: left;
  margin: var(--size-1p5) 0 0;
  padding-block: var(--size-2);
  padding-inline-start: calc(var(--padding-x-box) - var(--size-half));
  padding-inline-end: calc(var(--padding-x-box) / 3);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-sm) var(--easing-base), translate var(--duration-sm) var(--easing-base);
  position: absolute;
  top: auto;
  left: 0;
  translate: 0 var(--translate-shift);
  width: var(--popover-body-width);
  /* max-height: 72vh; */
  /* max-height: 72dvh; */
  z-index: var(--zindex-popover);
}
.widget :where(.popover.is-open) .popover-body {
  opacity: 1;
  pointer-events: all;
  translate: 0;
}
.widget .is-up > .popover-body {
  --translate-shift: 3rem;
  bottom: 100%;
  margin-top: 0;
}
@media only screen and (min-width: 568px) and (min-height: 341px) {
  .widget .is-up > .popover-body {
    margin-bottom: var(--size-2);
  }
}
.widget .is-right > .popover-body {
  left: auto;
  right: 0;
}
.widget .has-menu > .popover-body {
  padding-inline: var(--size-2);
}
@media only screen and (max-width: 567px) {
  .widget .has-menu > .popover-body {
    left: 50%;
    translate: -50% 0;
  }
}
.widget .popover-content {
  padding-block: var(--size-half);
  padding-inline-start: var(--size-half);
  padding-inline-end: calc(var(--padding-x-box) / 3 * 2);
  overflow-y: auto;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
  max-height: 100%;
}
.widget .popover-content::-webkit-scrollbar {
  background-color: var(--scrollbar-track);
  width: var(--scrollbar-thumb-size);
  height: var(--scrollbar-thumb-size);
}
.widget .popover-content::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
.widget .popover-content::-webkit-scrollbar-thumb {
  background-clip: content-box;
  background-color: var(--scrollbar-thumb);
  border-radius: var(--border-radius-pill);
  border: var(--size-4) solid transparent;
}
@media only screen and (min-width: 768px) and (min-height: 361px) {
  .widget :where(.tablet-popover) .popover-summary {
    background: var(--popover-summary-background);
    border: 0;
    color: var(--popover-summary-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--size-half);
    padding: var(--size-half) var(--size-1);
  }
}
.widget :where(.popover) .popover-summary {
  background: var(--popover-summary-background);
  border: 0;
  color: var(--popover-summary-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--size-half);
  padding: var(--size-half) var(--size-1);
}
.widget .popover-footer {
  display: flex;
  padding-top: var(--size-1);
  padding-inline-start: var(--size-half);
  padding-inline-end: var(--padding-x-box);
}
.widget .form-field {
  display: flex;
  position: relative;
  margin-bottom: var(--size-1);
  padding: 0;
}
.widget :where(.popover.is-period) label {
  color: var(--color-ink-inverse-2ry);
  position: absolute;
  top: 50%;
  left: var(--size-2);
  translate: 0 -50%;
}
.widget :where(.popover.is-period) [type=text] {
  flex-grow: 1;
  padding-inline-start: var(--size-8);
}
.widget .menu-item {
  background: transparent;
  border: 0;
  border-radius: var(--border-radius-sm);
  color: var(--menu-item-color, inherit);
  display: flex;
  gap: var(--size-2);
  text-decoration: none;
  padding: var(--size-1) var(--size-1p5);
  width: 100%;
}
.widget .menu-item .material-symbols-outlined {
  color: var(--menu-item-icon-color, var(--color-ink-3ry));
}
@media (any-hover: hover) and (pointer: fine) {
  .widget .menu-item:hover {
    background: var(--menu-item-hover, var(--color-ink-min));
  }
}
.widget .popover.is-invert,
.widget .tablet-popover.is-invert {
  --popover-summary-color: var(--color-ink-inverse-max);
  --popover-body-background: var(--color-ink-2ry);
  --popover-body-color: var(--color-ink-inverse-base);
  --icon-chevron-down: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2234%22%20height%3D%2234%22%20viewBox%3D%220%200%2034%2034%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.5%2012.75L17%2021.25L25.5%2012.75%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E%0A");
}
.widget .popover.is-invert input,
.widget .tablet-popover.is-invert input {
  --form-control-background-color: var(--color-ink-inverse-min);
  --form-control-color: var(--color-ink-inverse-base);
}
.widget .popover.is-invert .btn,
.widget .tablet-popover.is-invert .btn {
  --button-hover: var(--color-ink-inverse-min);
  --button-color: var(--color-brand-text-inverse);
}
.widget .popover.is-invert .menu-item,
.widget .tablet-popover.is-invert .menu-item {
  --menu-item-color: var(--color-ink-inverse-base);
  --menu-item-hover: var(--color-ink-inverse-min);
  --menu-item-icon-color: var(--color-ink-inverse-2ry);
}
.widget .tablet-popover {
  --popover-summary-background: var(--color-background-inverse);
}
.widget :where(.search-ui-container) .popover,
.widget :where(.search-ui-container) .tablet-popover {
  --popover-summary-background: transparent;
}

/*# sourceMappingURL=popover.css.map */