/* Custom mixins */
kunzmann-moments {
  --story-width: 58px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  kunzmann-moments {
    --story-width: 90px;
  }
}
@media only screen and (min-width: 1024px) {
  kunzmann-moments {
    --story-width: 120px;
  }
}
kunzmann-moments .kunzmann-moments__heading {
  text-align: center;
}
kunzmann-moments .kunzmann-moments__thumbs {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
kunzmann-moments .kunzmann-moments__thumbs > button {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 10px;
  flex: 1 1 0;
  overflow: hidden;
}
kunzmann-moments .kunzmann-moments__thumbs > button > span.kunzmann-moments__thumb-image-wrapper {
  display: block;
  border-radius: 50%;
  background: #05b4f3;
  padding: 3px;
  width: var(--story-width);
  height: var(--story-width);
  margin-left: auto;
  margin-right: auto;
}
kunzmann-moments .kunzmann-moments__thumbs > button > span.kunzmann-moments__thumb-image-wrapper > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #fff;
  box-sizing: border-box;
}
kunzmann-moments .kunzmann-moments__thumbs > button > span.kunzmann-moments__thumb-text {
  overflow: hidden;
  text-overflow: ellipsis;
}
kunzmann-moments .kunzmann-moments__stories > sl-dialog {
  --sl-z-index-dialog: 1000;
}
kunzmann-moments .kunzmann-moments__stories > sl-dialog::part(base) {
  justify-content: start;
}
kunzmann-moments .kunzmann-moments__stories > sl-dialog::part(panel) {
  width: calc(100% - var(--sl-scroll-lock-size));
  max-width: none;
  height: 100%;
  max-height: none;
  background-color: rgba(26, 26, 32, 0.95);
}
kunzmann-moments .kunzmann-moments__stories > sl-dialog::part(body) {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}
kunzmann-moments .kunzmann-moments__stories > sl-dialog::part(close-button) {
  color: #fff;
}
kunzmann-moments .kunzmann-moments__stories > sl-dialog::part(close-button)::part(base) sl-icon::part(svg) {
  fill: #fff;
}
kunzmann-moments .kunzmann-moments__stories > sl-dialog sl-carousel {
  height: 100%;
  --aspect-ratio: 3/5;
}
kunzmann-moments .kunzmann-moments__stories > sl-dialog sl-carousel.sl-theme-dark > * {
  color: black;
}
kunzmann-moments .kunzmann-moments__stories > sl-dialog sl-carousel.sl-theme-light > * {
  color: white;
}
kunzmann-moments .kunzmann-moments__stories > sl-dialog sl-carousel::part(base) {
  justify-content: start;
  grid-template-areas: 'slides slides slides' '. pagination .';
  gap: 0 var(--sl-spacing-medium);
}
kunzmann-moments .kunzmann-moments__stories > sl-dialog sl-carousel::part(pagination-item) {
  width: 50px;
  height: 6px;
  border-radius: 0;
}
kunzmann-moments .kunzmann-moments__stories > sl-dialog sl-carousel::part(navigation-button) {
  color: #fff;
}
@media only screen and (max-width: 1024px) {
  kunzmann-moments .kunzmann-moments__stories > sl-dialog sl-carousel::part(navigation-button) {
    display: none;
  }
}
kunzmann-moments .kunzmann-moments__stories > sl-dialog sl-carousel::part(pagination-item pagination-item--active) {
  background-color: #00adef;
  transform: none;
}
kunzmann-moments .kunzmann-moments__stories > sl-dialog sl-carousel sl-carousel-item {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
kunzmann-moments .kunzmann-moments__stories > sl-dialog sl-carousel sl-carousel-item.outer-item {
  padding-left: 40px;
  padding-right: 40px;
}
kunzmann-moments .kunzmann-moments__stories > sl-dialog sl-carousel sl-carousel-item > div {
  position: relative;
  max-width: min(600px, 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 100%;
}
kunzmann-moments .kunzmann-moments__stories > sl-dialog sl-carousel img {
  max-width: 100%;
  height: auto;
}
kunzmann-moments .kunzmann-moments__stories > sl-dialog sl-carousel h3 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
}
kunzmann-moments .kunzmann-moments__stories > sl-dialog sl-carousel h3.heading_top {
  top: 20px;
}
kunzmann-moments .kunzmann-moments__stories > sl-dialog sl-carousel h3.heading_middle {
  top: 50%;
  transform: translate(-50%, -50%);
}
kunzmann-moments .kunzmann-moments__stories > sl-dialog sl-carousel h3.heading_bottom {
  bottom: 100px;
}
kunzmann-moments .kunzmann-moments__stories > sl-dialog sl-carousel p {
  position: absolute;
  bottom: 20px;
}
kunzmann-moments .kunzmann-moments__stories > sl-dialog sl-carousel sl-button {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
kunzmann-moments .kunzmann-moments__stories > sl-dialog sl-carousel p + sl-button {
  bottom: 60px;
}
kunzmann-moments .kunzmann-moments__progress-bar {
  position: absolute;
  top: 27px;
  z-index: 10001;
  height: 20px;
  width: 270px;
  display: flex;
  gap: 4px;
  left: 20px;
}
@media only screen and (min-width: 1024px) {
  kunzmann-moments .kunzmann-moments__progress-bar {
    top: 20px;
    width: 300px;
    left: calc(50% - var(--sl-scroll-lock-size));
    transform: translateX(-50%);
  }
}
kunzmann-moments .kunzmann-moments__progress-bar sl-progress-bar {
  --height: 6px;
  width: 100%;
  cursor: pointer;
}
kunzmann-moments .kunzmann-moments__progress-bar sl-progress-bar::part(indicator) {
  transition-duration: 10ms;
}