@layer component {
  theme-modal>details,
  [data-mount-modal],
  [data-theme-modal]>details {
    --z-index: var(--z-index-modal);
    --color-overlay: var(--color-drawer-overlay);
    --overlay-opacity: 0.3;
  }

  theme-modal>details>summary+ :not(details, summary),
  [data-mount-modal]>summary+ :not(details, summary),
  [data-theme-modal]>details>summary+ :not(details, summary) {
    --color-text: var(--color-drawer-text);
    --color-background: var(--color-drawer-background);
    --color-button-background: var(--color-drawer-button-background);
    --color-button-gradient: var(--color-drawer-button-gradient);
    --color-button-border: var(--color-drawer-button-background);
    --color-button-text: var(--color-drawer-button-text);
    --color-border: var(--color-text)/ 0.1;
  }

  theme-modal>details::before,
  [data-mount-modal]::before,
  [data-theme-modal]>details::before {
    content: '';
    display: block;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100svh;
    z-index: var(--z-index);
    background-color: rgb(var(--color-overlay) / var(--overlay-opacity));
    opacity: 0;
    transition: opacity 1s cubic-bezier(.19, 1, .22, 1);
    pointer-events: none;
  }

  theme-modal:is([data-mask-closable])>details::before,
  [data-mount-modal]:is([data-mask-closable])::before,
  [data-theme-modal]:is([data-mask-closable])>details::before {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='20' height='20'%3E%3Cg fill='%23ffffff' transform='translate(0.5%2C0.5)'%3E%3Cline stroke='%23ffffff' stroke-width='6' stroke-linecap='round' x1='46' y1='2' x2='2' y2='46'/%3E%3Cline stroke='%23ffffff' stroke-width='6' stroke-linecap='round' x1='46' y1='46' x2='2' y2='2'/%3E%3C/g%3E%3C/svg%3E") 10 10, pointer;
  }

  theme-modal>details[open]::before,
  [data-mount-modal][open]::before,
  [data-theme-modal]>details[open]::before {
    opacity: 1;
    pointer-events: auto;
  }

  theme-modal>details[closing]::before,
  [data-mount-modal][closing]::before,
  [data-theme-modal]>details[closing]::before {
    opacity: 0;
    pointer-events: none;
  }

  theme-modal>details[closing]>summary+ :not(details, summary),
  [data-mount-modal][closing]>summary+ :not(details, summary),
  [data-theme-modal][closing]>details>summary+ :not(details, summary) {
    pointer-events: 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: var(--z-index);
    width: fit-content;
    height: fit-content;
    margin: auto;
    background-color: rgb(var(--color-background, var(--color-base-background, 255 255 255)));
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(.19, 1, .22, 1);
    animation-fill-mode: backwards;
  }

  @media (max-width: 959px) {
    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;
      --modal-animation-name-close: animation-slide-out-bottom;

      -webkit-overflow-scrolling: touch;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior-y: contain;
      scroll-snap-type: y mandatory;
      scrollbar-width: thin;
      inset-block: auto 0;
      width: 100vw;
      max-height: calc(100% - 60px);
      border-radius: 0;
      border-start-end-radius: 16px;
      border-start-start-radius: 16px;
      border: none;
      border-block-start: var(--modal-border-thickness) solid rgb(var(--color-text)/ var(--modal-border-opacity));
      box-shadow: var(--modal-shadow-offset-x) var(--modal-shadow-offset-y) var(--modal-shadow-blur) rgb(var(--color-shadow)/ var(--modal-shadow-opacity));
    }
  }

  @media (min-width: 960px) {
    [data-placement="left"]>summary+ :not(details, summary),
    [data-placement="left"]>details>summary+ :not(details, summary) {
      --modal-animation-name: animation-slide-in-left;
      --modal-animation-name-close: animation-slide-out-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;
      --modal-animation-name-close: animation-slide-out-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;
      --modal-animation-name-close: animation-slide-out-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;
      --modal-animation-name-close: animation-slide-out-bottom;

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

  .modal__content {
    background-color: rgb(var(--color-background, --color-base-background));
    border-color: rgb(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) rgb(var(--color-shadow)/ var(--modal-shadow-opacity));
  }

  .modal__close-control {
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: currentColor;
    cursor: pointer;
    background: none;
    border: none;
  }

  .modal__close-control .icon {
    display: block;
    position: relative;
    overflow: hidden;
    width: 16px;
    height: 16px;
  }

  .modal__close-control .icon::before,
  .modal__close-control .icon::after {
    content: '';
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0;
    width: 100%;
    height: 2px;
    margin-block-start: -1px;
    background-color: currentColor;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .modal__close-control .icon::before {
    transform: rotate(-45deg) translate(-140%);
  }

  .modal__close-control .icon::after {
    transform: rotate(45deg) translate(-140%);
  }

  theme-modal>details[opened]>summary+ :not(details, summary) .modal__close-control .icon::before,
  [data-mount-modal][opened]>summary+ :not(details, summary) .modal__close-control .icon::before,
  [data-theme-modal]>details[opened]>summary+ :not(details, summary) .modal__close-control .icon::before {
    transform: rotate(-45deg) translate(0);

  }

  theme-modal>details[opened]>summary+ :not(details, summary) .modal__close-control .icon::after,
  [data-mount-modal][opened]>summary+ :not(details, summary) .modal__close-control .icon::after,
  [data-theme-modal]>details[opened]>summary+ :not(details, summary) .modal__close-control .icon::after {
    transform: rotate(45deg) translate(0);
  }

  @media (min-width: 960px) {
    .modal__close-control {
      width: 40px;
      height: 40px;
    }

    .modal__close-control .icon::before,
    .modal__close-control .icon::after {
      height: 2.5px;
      margin-block-start: -1.5px;
    }
  }
}