@keyframes animation-fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@keyframes animation-fade-in-center {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes animation-zoom-in {
  0% {
    opacity: 0;
    transform: scaleY(0.8);
  }

  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
@keyframes animation-slide-in {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes animation-slide-in-top {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes animation-slide-in-bottom {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes animation-slide-in-left {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes animation-slide-in-right {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes animation-circling {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(1turn);
  }
}

sl-theme-modal summary {
  position: relative;
  display: inline-block;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

sl-theme-modal summary::-webkit-details-marker {
  display: none;
}

sl-theme-modal > details,
[data-sl-mount-modal],
[data-sl-theme-modal] > details {
  --z-index: 1030;
}
sl-theme-modal > details[open]::before,
[data-sl-mount-modal][open]::before,
[data-sl-theme-modal] > details[open]::before {
  position: fixed;
  inset: 0;
  z-index: var(--z-index);
  display: block;
  width: 100vw;
  height: 100vh;
  content: "";
  background-color: rgb(var(--color-mask, 0, 0, 0), 0.3);
  backdrop-filter: blur(5.59583px);
}

sl-theme-modal > details > summary + :not(details, summary),
[data-sl-mount-modal] > summary + :not(details, summary),
[data-sl-theme-modal] > details > summary + :not(details, summary) {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-index) + 1);
  width: fit-content;
  height: fit-content;
  margin: auto;
  background-color: rgba(
    var(--color-background, var(--color-page-background, 255, 255, 255))
  );
  animation-duration: 0.2s;
  animation-timing-function: ease;
}

[data-placement="left"] > summary + :not(details, summary),
[data-placement="left"] > details > summary + :not(details, summary) {
  --modal-animation-name: animation-slide-in-left;

  inset-inline: 0 auto;
  width: auto;
  height: 100%;
}
[data-placement="right"] > summary + :not(details, summary),
[data-placement="right"] > details > summary + :not(details, summary) {
  --modal-animation-name: animation-slide-in-right;

  inset-inline: auto 0;
  width: auto;
  height: 100%;
}
[data-placement="top"] > summary + :not(details, summary),
[data-placement="top"] > details > summary + :not(details, summary) {
  --modal-animation-name: animation-slide-in-top;

  inset-block: 0 auto;
  width: 100vw;
}
[data-placement="bottom"] > summary + :not(details, summary),
[data-placement="bottom"] > details > summary + :not(details, summary) {
  --modal-animation-name: animation-slide-in-bottom;

  inset-block: auto 0;
  width: 100vw;
}
.modal__content {
  background-color: rgba(var(--color-background, --color-page-background));
  border-color: rgba(var(--color-text), var(--modal-border-opacity));
  border-style: solid;
  border-width: var(--modal-border-thickness);
  border-radius: var(--modal-border-radius);
  box-shadow: var(--modal-shadow-offset-x) var(--modal-shadow-offset-y)
    var(--modal-shadow-blur)
    rgba(var(--color-shadow), var(--modal-shadow-opacity));
}

.modal__close-control {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: #fff;
  cursor: pointer;
  background-color: rgba(0 0 0 / 30%);
  border: 1px solid rgb(0 0 0 / 5%);
  border-radius: 50%;
}

.modal__close-control:hover {
  background-color: rgba(0 0 0 / 20%);
}

@media (min-width: 960px) {
  .modal__close-control {
    inset-block-start: 20px;
    inset-inline-end: 20px;
    width: 38px;
    height: 38px;
  }
}