@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:not([open]) > summary + :not(details, summary), [data-mount-modal]:not([open]) > summary + :not(details, summary), [data-theme-modal]:not([data-popup-container]) > details:not([open]) > summary + :not(details, summary) {
    display: none !important;
  }

  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;
    }
  }
}