@shopware-ag/meteor-component-library/dist/mt-popover.css

The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).

.mt-popover--float .mt-popover__content {
  max-height: max(50vh, 250px);
}
.mt-popover__content {
  padding: var(--scale-size-16);
  padding-top: var(--scale-size-4);
  padding-bottom: var(--scale-size-4);
  background-color: var(--color-background-primary-default);
  overflow: auto;
  border-radius: var(--border-radius-xs);
  box-shadow:
    0 1px 1px var(--color-elevation-shadow-default),
    0 2px 1px var(--color-elevation-shadow-default),
    0 1px 3px var(--color-elevation-shadow-default);
  overflow-x: hidden;
  scroll-behavior: smooth;
&:has(.mt-popover__header) {
    padding-top: var(--scale-size-16);
}
}
.mt-popover__content__header-placeholder-right {
  width: 44px;
}
.mt-popover__header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--scale-size-16);
  gap: var(--scale-size-16);
}
.mt-popover__title {
  margin-right: auto;
  margin-block-end: 0;
}
.mt-popover__back-button {
  margin-right: auto;
  padding-top: var(--scale-size-12);
  padding-bottom: var(--scale-size-12);
& .mt-icon {
& svg {
      width: var(--scale-size-12) !important;
      height: var(--scale-size-8) !important;
}
}
}
.mt-popover--width-dynamic .mt-popover__content {
  min-width: 220px;
  max-width: 440px;
}
.mt-popover--width-large .mt-popover__content {
  min-width: 340px;
  max-width: 340px;
}
.mt-popover--width-medium .mt-popover__content {
  min-width: 280px;
  max-width: 280px;
}
.mt-popover--width-small .mt-popover__content {
  min-width: 220px;
  max-width: 220px;
}
.mt-popover__items {
  position: relative;
&:has(div.slideIn-leave-active) {
    overflow: hidden !important;
}
}

/* Animations */
.mt-popover {
& .slideIn-leave-active,
  & .slideOut-leave-active {
    transition: all 0.125s ease;
}
& .slideIn-enter-active,
  & .slideOut-enter-active {
    transition: all 0.125s ease;
    transition-delay: 0.125s;
}
& .slideIn-leave-active,
  & .slideOut-leave-active {
    position: absolute;
}
& .slideIn-leave-to {
    transform: translate3d(-110%, 0, 0);
    opacity: 0;
}
& .slideIn-enter {
    transform: translate3d(110%, 0, 0);
}
& .slideOut-leave-to {
    transform: translate3d(110%, 0, 0);
    opacity: 0;
}
& .slideOut-enter {
    transform: translate3d(-110%, 0, 0);
}
}