@layer component {

  theme-modal>details,
  [data-mount-modal],
  [data-theme-modal]>details {
    --z-index: var(--z-index-modal);
  }

  theme-modal>details[open]::before,
  [data-mount-modal][open]::before,
  [data-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.4);
  }

  theme-modal[data-global-popup]>details[open]::before,
  [data-mount-modal][data-global-popup][open]::before {
    display: none;
  }

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

  @media (max-width: 767px) {

    theme-modal>details>summary+ :not(details, summary),
    [data-mount-modal]>summary+ :not(details, summary),
    [data-theme-modal]>details>summary+ :not(details, summary) {
      --modal-animation-name: animation-slide-in-bottom;

      inset-block: auto 0;
      width: 100vw;
    }
  }

  [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: 768px) {
    .modal__close-control {
      inset-block-start: 20px;
      inset-inline-end: 20px;
      width: 38px;
      height: 38px;
    }
  }
}