:host {
  position: relative;
  z-index: var(--s-z-40);
  display: contents;
}

  :host * {
    box-sizing: border-box;
  }

.popover {
  border: none;
  padding: 0;
  margin: 0;
}

.popover::backdrop {
    display: none;
  }

.popover--active:not(.popover--closing) .popover__backdrop {
    animation: 0.15s popover-fade-in;
  }

@media (prefers-reduced-motion) {

.popover--active:not(.popover--closing) .popover__backdrop {
      animation: none
  }
    }

.popover--active:not(.popover--closing) .popover__content {
    animation: 0.15s popover-slide-in;
  }

@media (min-width: 768px) {

.popover--active:not(.popover--closing) .popover__content {
      animation: 0.15s popover-fade-scale-in-xy
  }
    }

@media (prefers-reduced-motion) {

.popover--active:not(.popover--closing) .popover__content {
      animation: none
  }
    }

.popover--closing .popover__backdrop {
    animation: 0.15s popover-fade-out forwards;
  }

@media (prefers-reduced-motion) {

.popover--closing .popover__backdrop {
      animation: none
  }
    }

.popover--closing .popover__content {
    animation: 0.15s popover-slide-out forwards;
  }

@media (min-width: 768px) {

.popover--closing .popover__content {
      animation: 0.15s popover-fade-out forwards
  }
    }

@media (prefers-reduced-motion) {

.popover--closing .popover__content {
      animation: none
  }
    }

.popover--inactive .popover__content {
    display: none;
  }

@media (max-width: 767px) {
      .popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content {
        animation: 0.15s popover-fade-in;
      }

        @media (prefers-reduced-motion) {
      .popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content {
          animation: none
      }
        }
      .popover--fullscreen-bottom-sheet.popover--closing .popover__content {
        animation: 0.15s popover-fade-out forwards;
      }

        @media (prefers-reduced-motion) {
      .popover--fullscreen-bottom-sheet.popover--closing .popover__content {
          animation: none
      }
        }

    .popover--fullscreen-bottom-sheet .popover__backdrop {
      display: none;
    }

    .popover--fullscreen-bottom-sheet .popover__content {
      top: 0;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }

    .popover--fullscreen-bottom-sheet .popover__scroll-container {
      height: 100%;
      max-height: none;
      padding-top: 0;
      padding-bottom: 0;
    }

    .popover--fullscreen-bottom-sheet .popover__handle {
      display: none;
    }
  }

@media (min-width: 768px) {

.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content {
        animation: 0.15s popover-fade-scale-in-y
    }
      }

@media (prefers-reduced-motion) {

.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content {
        animation: none
    }
      }

@media (min-width: 768px) {

.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content {
        animation: 0.15s popover-fade-in
    }
      }

@media (prefers-reduced-motion) {

.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content {
        animation: none
    }
      }

@media (min-width: 768px) {

.popover--placement-bottom .popover__content, .popover--placement-bottom-start .popover__content, .popover--placement-right .popover__content, .popover--placement-right-start .popover__content {
      transform-origin: top left
  }
    }

@media (min-width: 768px) {

.popover--placement-bottom-end .popover__content, .popover--placement-left .popover__content, .popover--placement-left-start .popover__content {
      transform-origin: top right
  }
    }

@media (min-width: 768px) {

.popover--placement-top .popover__content, .popover--placement-top-start .popover__content, .popover--placement-right-end .popover__content {
      transform-origin: bottom left
  }
    }

@media (min-width: 768px) {

.popover--placement-top-end .popover__content, .popover--placement-left-end .popover__content {
      transform-origin: bottom right
  }
    }

@media (min-width: 768px) {

.popover--transparent .popover__content {
      background-color: transparent;
      box-shadow: none
  }
    }

@media (min-width: 768px) {

.popover--transparent .popover__scroll-container {
      padding: 0
  }
    }

.popover--translucent .popover__content {
    background-color: transparent;
    outline: var(--s-border-width-default) solid
      var(--s-border-translucent-outline);
  }

.popover--translucent .popover__content:before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: var(--s-translucent-low-default);
      -webkit-backdrop-filter: blur(var(--s-blur-l));
              backdrop-filter: blur(var(--s-blur-l));
      border-radius: inherit;
    }

.popover--translucent .popover__handle {
    background-color: var(--s-border-on-translucent);
  }

.popover__backdrop {
  position: fixed;
  z-index: 0;
  background-color: rgba(0, 0, 0, 0.2);
  animation: 0.15s popover-backdrop-fade-in;
  inset: 0;
}

@media (prefers-reduced-motion) {

.popover__backdrop {
    animation: none
}
  }

@media (min-width: 768px) {

.popover__backdrop {
    display: none
}
  }

.popover__content {
  position: fixed;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  border-top-left-radius: var(--s-border-radius-xl);
  border-top-right-radius: var(--s-border-radius-xl);
  background-color: var(--s-surface-overlay-default);
}

@media (min-width: 768px) {

.popover__content {
    right: unset;
    bottom: unset;
    left: unset;
    border-radius: var(
      --swirl-popover-border-radius,
      var(--s-border-radius-base)
    );
    max-width: 22.5rem;
    animation: none;
    box-shadow: var(--s-shadow-level-2)
}
  }

.popover__scroll-container {
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  max-height: 90vh;
  padding-top: var(--s-space-24);
  padding-bottom: var(--s-space-24);
  overscroll-behavior: contain;
}

@media (min-width: 768px) {

.popover__scroll-container {
    max-height: 22rem;
    padding-top: 0;
    padding-bottom: 0
}
  }

@media (min-width: 768px) {

.popover--padded .popover__scroll-container {
      padding: var(--s-space-4)
  }
    }

.popover__handle {
  position: absolute;
  top: var(--s-space-8);
  left: 50%;
  width: 2.5rem;
  height: 0.375rem;
  border-radius: 0.1875rem;
  background-color: var(--s-border-default);
  transform: translatex(-50%);
}

@media (min-width: 768px) {

.popover__handle {
    display: none
}
  }

@keyframes popover-slide-in {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes popover-slide-out {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

@keyframes popover-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes popover-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes popover-fade-scale-in-xy {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes popover-fade-scale-in-y {
  from {
    transform: scaleY(0);
    opacity: 0;
  }
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}