@layer component {
  theme-modal:not([data-popup-container]) > details,
  [data-mount-modal],
  [data-theme-modal]:not([data-popup-container]) > details {
    --z-index: var(--z-index-modal);
  }
  theme-modal:not([data-popup-container]) > details[open]::before,
  [data-mount-modal][open]::before,
  [data-theme-modal]:not([data-popup-container]) > 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.4);
  }

  theme-modal:not([data-popup-container])
    > details
    > summary
    + :not(details, summary),
  [data-mount-modal] > summary + :not(details, summary),
  [data-theme-modal]:not([data-popup-container])
    > 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;
  }

  @media (max-width: 959px) {
    theme-modal:not([data-popup-container])
      > details
      > summary
      + :not(details, summary),
    [data-mount-modal] > summary + :not(details, summary),
    [data-theme-modal]:not([data-popup-container])
      > details
      > summary
      + :not(details, summary) {
      --modal-animation-name: animation-slide-in-bottom;

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

    inset-inline: 0 auto;
    width: auto;
    height: 100%;
  }

  :not([data-popup-container])[data-placement="right"],
  :not([data-popup-container])[data-placement="right"] > details {
    color: red;
  }

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

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

    inset-block: 0 auto;
    width: 100vw;
  }
  :not([data-popup-container])[data-placement="bottom"]
    > summary
    + :not(details, summary),
  :not([data-popup-container])[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: rgb(var(--color-light-text));
    cursor: pointer;
    background-color: transparent;
    border: 1px solid currentcolor;
    border-radius: 50%;
    transition: opacity 0.2s;
  }

  .modal__close-control:hover {
    opacity: 0.6;
  }

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