dialog[aria-busy=true] > div > header > h1::before {
  animation-name: spinnging_refresh;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  display: inline-block;

}

dialog {
  resize: both;
  /* scrolling should be taken care of inside the dialog - not by the dialog itself. */
  overflow: hidden; 
  padding: 0px;
  border-width: 1px;
  border-color: var( --dark-border-color );
  box-shadow: 10px 10px 10px var( --dark-background-color );
  font-family: var( --ui-text-font-family );
  font-size: var( --ui-text-font-size );

  > *:is(div, form) {
    display:flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden; 

    > header,
    > section,
    > footer  {
      padding: 2px;    
    }
    
    > header,
    > footer {
      flex-shrink: 0;
    }
            
    > header {
      display: flex;
      flex-direction: row;
      border-bottom-style: solid;
      border-bottom-width: 1px;
      border-bottom-color: var( --dark-border-color );
      
      /* Dialog title */
      > h1 {
        margin: 2px 2px 2px 2px;
        font-size: var( --ui-text-font-size );
        flex-grow: 1;
      }
      
      > h1::before {
        font-family: var( --icon-font-family );
        font-size: var( --icon-small );
        font-weight: normal;
        margin-right: 2px;
      }
      
      > h1[data-icon]:not( [data-icon=''] )::before {
        content: attr( data-icon );
      }
                  
      /* Dialog window menu */
      > form:has( > input[name=windowstate][type=radio] ) {
        
        display: inline-block;
        position: relative;
        right: 0px;
        
        > input[name=windowstate][type=radio] {
          appearance: none;
          outline: none;
        }
        
        > input[name=windowstate][type=radio] {
          margin:0px;
        }
        
        > button[popovertargetaction=hide]{
          background-color: transparent;
          border-style:none;
          padding-inline: 2px;
       }
        
        > input[type=radio]::before {
          display: inline-block;
          font-family: var( --icon-font-family );
          font-size: var( --icon-normal );
          color: var( --icon-color-subtle );
        }

        > input[type=radio]:hover::before {
          color: var( --icon-color-highlight );
        }

        > button[popovertargetaction=hide]::before {
          font-family: var( --icon-font-family );
          font-size: var( --icon-normal );
          /* square-x */        
          content: "\eb2b";
        }
        
        > input[name=windowstate][type=radio][value=minimize]::before {
          /* window-minimize */
          content: "\f1f2";
        }
        > input[name=windowstate][type=radio][value=maximize]::before {
          /* window-maximize */
          content: "\f1f1";
        }
        > input[name=windowstate][type=radio][value=restore]::before {
          /* app-window */
          content: "\efe6";
        }
        > input[name=windowstate][type=radio][value=close]::before {
          /* app-window */
          content: "\efe6";
        }
      }  
      
      > form:has( > input[name=windowstate][type=radio][value=maximize]:checked ) {
        > input[name=windowstate][type=radio][value=maximize] {
          display: none;
        }
      }

      > form:has( > input[name=windowstate][type=radio][value=minimize]:checked ) {
        > input[name=windowstate][type=radio][value=minimize] {
          display: none;
        }
      }

      > form:has( > input[name=windowstate][type=radio][value=restore]:checked ) {
        > input[name=windowstate][type=radio][value=restore] {
          display: none;
        }
      }
    }
    
    > header::before{
      font-family: var( --icon-font-family );
      font-size: var( --icon-normal );
    }
    
    > section {
      flex: 1;
      padding: 2px;
    }  
    
    > footer {
      padding: 2px 2px 2px 2px;
      text-align: center;
      
      border-top-style: solid;
      border-top-width: 1px;
      border-top-color: var( --dark-border-color );      
      
      > form[role=toolbar] {
        margin: auto;
      }
      
    }
  }

}

dialog:has( > *:is( div, form ) > header > form > input[name=windowstate][type=radio][value=maximize]:checked ) {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  left: 0px !important;
  top:0px !important;
}

dialog:has( *:focus ) {
}

dialog:not( *:focus ) {
}


dialog[popover] {
  transition: opacity 0.5s,
    transform 0.5s,
    scale 0.5s,
    overlay 0.5s allow-discrete,
    display 0.5s allow-discrete;
}

dialog[popover]:popover-open {
  /* Final state of the show animation */
  opacity: 1;
  transform: translateX(0) scale(1);
}

dialog[popover]:not( :popover-open ) {
  /* Final state of the show animation */
  opacity: 0;
  transform: translateX(-100%) scale(0);
}

@starting-style {
  dialog[popover]:popover-open {      
    opacity: 1;
    transform: translateX(-100%) scale(0);
  }
  
  
}