:root {
  /* scrollbar-gutter: stable;
  overflow-x: hidden; */

  --pico-transition: 0.2s ease-in-out;
  --pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");

}

@container search-dialog-wrapper {
dialog {  
  --delay: 400ms;
  width: 600px;
  min-height: 100px;
  background-color: whitesmoke;
  margin-top: 200px;
  margin-inline: auto;

  border: none;
  opacity: 0;
  scale: 0.8;
  transition: opacity var(--delay) ease,
              scale var(--delay) ease,
              display var(--delay) allow-discrete,
              overlay var(--delay) allow-discrete;

  & .search-results {
        max-height: 200px;
        margin: var(--pico-spacing);
        overflow: auto;
        padding: 1rem;

        & ul {
          list-style-type: none; 
        }
    }              

}



dialog[open] {
  opacity: 1;
  scale: 1;

  @starting-style {
    opacity: 0;
    scale: 0.8;
  }
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0); 
  opacity: 0;
  transition: opacity var(--delay) ease,
              display var(--delay) allow-discrete,
              background-color var(--delay) ease,
              overlay var(--delay) allow-discrete;
}

dialog[open]::backdrop {
  background-color: rgba(0, 0, 0, 0.8);  
  opacity: 1;

  @starting-style {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0); 
  }
}

header.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Optional: centers items vertically */
  outline: 1px solid yellow;

  & div {
    padding: 0;
    line-height: 0;
  }

  & button {

  }
}


    dialog>article .close,
    dialog>article :is(a, button)[rel=prev] {
        display: block;
        width: 1rem;
        height: 1rem;
        margin-top: calc(var(--pico-spacing) * -1);
        margin-top: .2rem;
        margin-bottom: var(--pico-spacing);
        margin-left: auto;
        border: none;
        background-image: var(--pico-icon-close);
        background-position: center;
        background-size: auto 1rem;
        background-repeat: no-repeat;
        background-color: transparent;
        opacity: 0.5;
        transition: opacity var(--pico-transition);
    }
  }