.icon-btn {
  anchor-name: --anchor-icon;
}

.floaty {
  position-anchor: --anchor-icon;
  inset: auto;
  position-area: block-start;
  position-try-fallbacks: flip-block;
  position-try-order: most-height;
  position-visibility: anchors-visible;
  
  margin-block: 1ch;
  
  &, &::backdrop {
    transition: 
      display .5s allow-discrete, 
      overlay .5s allow-discrete, 
      transform 1s var(--ease-spring-3),
      opacity .5s;
    opacity: 0;
  }

  &::backdrop {
    background: black;
  }

  &:popover-open {
    opacity: 1;

    &::backdrop {
      opacity: 0.5;
    }
  }

  @starting-style {
    &:popover-open {
      transform: scale(.9);  
    }
    
    &:popover-open,
    &:popover-open::backdrop {
      opacity: 0;
    }
  }
}



@layer support.demo {
  .mainDiv {
    display: grid;
    place-content: center;
    place-items: center;
    gap: 50vh;
    padding: var(--size-5);
    padding-block: 80vh 150vh;
  }
  
  .floaty {
    padding: 0;
    position: relative;
    overflow: visible;
    
    > button {
      position: absolute;
      inset-block-start: -10px;
      inset-inline-end: -10px;
    }
  }
  
  .prompt {
    display: grid;
    place-items: center;
    gap: 1ch;
    
    text-align: center;
    line-height: 1.75;
    max-inline-size: 50ch;
  }
}