.email-modal__close {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
}

.email-modal>details[opening]>summary+ :not(details, summary) .email-modal__close .icon::before {
  transform: rotate(-45deg) translate(0);
}

.email-modal>details[opening]>summary+ :not(details, summary) .email-modal__close .icon::after {
  transform: rotate(45deg) translate(0);
}

@media (min-width: 960px) {
  .email-modal__container {
    --modal-animation-name: animation-fade-in-center;
    --modal-animation-name-close: animation-fade-out-center;

    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-snap-type: y mandatory;
    scrollbar-width: thin;
    inset: 0;
    width: 650px;
    max-height: calc(100% - 80px);
  }

  .email-modal__close {
    inset-block-start: 16px;
    inset-inline-end: 16px;
    color: rgb(var(--color-text));
    background-color: rgb(var(--color-background));
  }
}

.email-teaser {
  position: fixed;
  inset-block-start: 50%;
  z-index: var(--z-index-fixed);
  padding: 10px 16px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  color: rgb(var(--color-text));
  background-color: rgb(var(--color-background));
  box-shadow: 0 0 40px rgb(var(--color-text)/ 0.15);
}

.email-teaser--left {
  inset-inline-start: 10px;
  transform: rotate(calc(-90deg * var(--transform-logical))) translate(calc(-50% * var(--transform-logical)), 0);
  transform-origin: var(--transform-origin-start) top;
}

.email-teaser--right {
  inset-inline-end: 10px;
  transform: rotate(calc(90deg * var(--transform-logical))) translate(calc(-50% * var(--transform-logical)), 0);
  transform-origin: var(--transform-origin-end) top;
}

@media (pointer: fine) {
  .email-teaser:hover .email-teaser__text {
    animation: animation-beat 1s infinite ease;
  }
}