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

    }
  }
}