dialog.documentDialog {
  /* center the dialog */
  left: calc( 50vw - 320px );
  top: calc( 50vh - 175px );
  resize: both;
  padding: 0px .5em .25em 1em;
  min-height: 372px;
  min-width: 372px;
  width: 840px;
  height: 372px;
}

/**
* Dialog Toolbar
*/
dialog.documentDialog {
  
  > header {
    padding-bottom:.25em;
  }

  > menu[role=toolbar] {
    padding-top:0px;
    
    > label {

      &:has( button[name=removeCurrent] ){
        pointer-events: none;
        display:none;
        &::before {
          content: var( --icon-trash );
        }
      }

      &:has( > button[name=saveCurrent] ){
        pointer-events: none;
        display:none;
        &::before {
          content: var( --icon-device-floppy );
        }
      }

      &:has( > button[name=restoreCurrent] ){
        pointer-events: none;
        display:none;
        &::before {
          content: var( --icon-arrow-back-up );
        }
      }

      &:has( > input[type=radio][name=activation][value=activate] ) {
        
        /* the activate action has a "paused" lock... */
        &::before {
          content: var( --icon-player-pause );
        }
        
        /* ...but when we hover over it, it changes to a lock with a firebolt, signaling user to click it to activate.  */
        &:hover::before {
          content: var( --icon-player-play );
        }
      }

      &:has( > input[type=radio][name=activation][value=deactivate] ) {
        
        /* The deactivate action has the lock icon with the firebolt, indicating the document is "active";... */
        &::before {
          content: var( --icon-player-play );
        }

        /* ...but when hovering over it, it changes to the lock "pause" icon, indicating the user can deactivate. */
        &:hover::before {
          content: var( --icon-player-pause );
        }
      }
      
      /* By hiding the currently selected option, we expose the option that can be checked. */
      &:has( > input[type=radio][name=activation]:checked ) {
        display:none;
      }
    }
    
    > input[type=checkbox][name=editingActive],
    > input[type=checkbox][name=unsavedChanges] {
      display: none;
    }
        
    &:has( > input[type=checkbox][name=editingActive]:checked ) {
      > output[name=usageHint] {
        display: none;
      }
    }

    > output[name=formInvalidHint] {
      display: none;
    }

  }
  
  &:has( > * > nav > select:empty ) {
    > menu[role=toolbar] {
      > output[name=usageHint] {
        > span {
          display: none;
        }
      }
    }
  }

  &:has( form:invalid ) {
    > menu[role=toolbar] {
      
      &:has( > input[type=checkbox][name=editingActive]:checked ) {
        > output[name=formInvalidHint] {
          display: unset;
        }
      }
      
      > label:has( > input[type=radio][name=activation] ) {
        display: none;
      }
    }
  }
    
  > footer {
    padding-top: .25em;
    padding-bottom: .25em;
  }
  
}

/**
* Split layout
*/
dialog.documentDialog {
  
  > *:has( > nav ) {
    position: relative;
    display: grid;
    overflow: hidden;
    grid-template-columns: auto 1fr;

    > nav {
      resize: horizontal;
      overflow: hidden;
      width: 30ch;
      /* keep the resize widget from colliding into the list scrollbar */
      padding-bottom: 1em;
      padding-right: .5em;

      > select {
        padding-top: .5em;
        margin-top: 3px;
        margin-bottom: 1em;
        width: 100%;
        height: 100%;
        
        > optgroup {
          
          > option {
            &[data-loaded=true] {
              font-weight: bold;
            }
          }
        }
      }
    }

    > *[role=tablist] {
      margin-top: 4px;
    }

  }

}

dialog.documentDialog > * > *[role=tablist] > div:has( 
  > label > input[type=radio][name=tabs][value=formTab] 
) > *[role=tabpanel] {

  > header {
    display: block;

    > fieldset[name=headerFieldset] {
      display: grid;
      grid-template-columns: 7ch auto 6ch 16ch 17ch 3ch;
      grid-auto-flow: row;
      grid-gap: 0px;

      position: relative;
      top: 0px;
      height: 100%;
      overflow:hidden;
      padding-top: 0px;
      padding: .25em .5em .75em .5em;

      > label {
        height: 1em;
        padding-top: .125em;
        padding-left: .5em;
        padding-right: .25em;
        
        &::after {
          content: ': ';
        }
      }
    }
  }

  /* by default, the form controls are hidden */
  fieldset {
    visibility: hidden;
  }

  > fieldset[name=keyValuesFieldset] {
    display: block;
    overflow-y: scroll;

    > div {
      display: grid;
      height: 28px;
      grid-template-columns: 116px 186px 58px 186px;
      grid-auto-flow: row;

      > span {

        > menu[role=toolbar] {
          grid-column: 1;
          padding: 0px;

          > label {

            &::before {
              margin-right: 0px;
            }

            &:has( > button[name=add] )::before {
              content: var( --icon-plus );
            }

            &:has( > button[name=remove] ) {
              pointer-events: none;
              &::before {
                width: 20px;
                content: ' ';
              }
            }

            &:has( > button[name=up] )::before {
              content: var(  --icon-chevron-up );
            }

            &:has( > button[name=down] )::before {
              content: var(  --icon-chevron-down );
            }

            &:has( > input[type=checkbox][name=indent] ) {
              > input[type=checkbox] {
                display: none;
              }
              
              /* if the toggle is not checked, the item is outdented and its icon suggests to indent */
              &:has( > input[name=indent][type=checkbox]:not( :checked ) ) {
                &::before {
                  content: var(  --icon-chevron-right );
                }
              }
              
              /* if the toggle is checked, the item is indented and its icon changes to undo outdent */
              &:has( > input[name=indent][type=checkbox]:checked ) {
                &::before {
                  content: var(  --icon-chevron-left );
                }
              }
            }

          }
        }

        > input[name=key][type=text] {
          grid-column: 2;
          width: 170px;
        }

        > select[name=type] {
          grid-column: 3;
        }

        > input[name=value] {
          grid-column: 4;
        }
        
        > input[disabled] {
          display: none;
        }
      }

      &:not( > span > menubar > input[type=checkbox][name=indent]:checked ){
        --key-visibility: visible;
      }
      
      /* for the indented items following a list types, the key is hidden */
      /* NOTE: we only support this logic for up to 4 entries. */
      &:has( > span > select[name=type] > option[value=list]:checked ) {
        + div:has( > span > menu > label > input[type=checkbox][name=indent]:checked ),
        + div:has( > span > menu > label > input[type=checkbox][name=indent]:checked )
        + div:has( > span > menu > label > input[type=checkbox][name=indent]:checked ),
        + div:has( > span > menu > label > input[type=checkbox][name=indent]:checked )
        + div:has( > span > menu > label > input[type=checkbox][name=indent]:checked )
        + div:has( > span > menu > label > input[type=checkbox][name=indent]:checked ),
        + div:has( > span > menu > label > input[type=checkbox][name=indent]:checked )
        + div:has( > span > menu > label > input[type=checkbox][name=indent]:checked )
        + div:has( > span > menu > label > input[type=checkbox][name=indent]:checked )
        + div:has( > span > menu > label > input[type=checkbox][name=indent]:checked )
        {
          --key-visibility: hidden;
        }
      }
      
      /* items that are indented have a different appearance */
      &:has( > span > menu[role=toolbar] > label > input[type=checkbox][name=indent]:checked ) {
        
        /* the key field is actually indented */
        > span > input[name=key] {
          
          margin-left: 30px;
          width: 140px;
          
          visibility: var( --key-visibility );
        }
                
        /* the value type cannot be a list or a map */
        > span > select[name=type] > option:is( [value=list], [value=map] ) {
          display: none;
        }

        /* they cannot be outdented if the following field is also indented */
        &:has( + div > span > menu[role=toolbar] > label > input[type=checkbox][name=indent]:checked ) {
          > span > menu > label:has( > input[type=checkbox][name=indent] ) {
            pointer-events: none;
            &::before {
              width: 20px;
              content: ' ';
            }
          }
        }
        
        /* they cannot be moved down if the following field is not also indented */
        &:has( + div > span > menu[role=toolbar] > label > input[type=checkbox][name=indent]:not( :checked ) ) {
          
          > span > menu > label:has( > button[name=down] ) {
            pointer-events: none;
            &::before {
              width: 20px;
              content: ' ';
            }
          }
        }
      }

      /* items of map or list type also have special appearance */
      &:has( > span > select[name=type] > option:is( [value=list], [value=map] ):checked ) {
        
        /* they cannot be indented themselves */
        > span > menu[role=toolbar] > label:has( input[name=indent][type=checkbox] ){
          pointer-events: none;
          
          &::before {
            width: 20px;
            content: ' ';
          }
        }
        
        /* if it is followed by an indented item, then its value type must remain list or map */
        &:has( + div > span > menu > label > input[name=indent][type=checkbox]:checked ) {

          > span > select[name=type] > option:not( [value=list], [value=map] ) {
            display: none;
          }
        }
        
        
        /* the field following the map or list type must not have a "move up" action if it is an indented item */
        & + div:has( > span > menu > label > input[name=indent][type=checkbox]:checked ) {
          > span > menu > label:has( > button[name=up] ) {
            pointer-events: none;
            &::before {
              width: 20px;
              content: ' ';
            }
          }
        }
      }

      /* if an item is not indented, and it's not of type list of a map, then the field following it cannot be indented */
      &:has( > span > select[name=type] > option:checked:not( [value=map], [value=list] ) ):has(  > span > menu > label > input[name=indent][type=checkbox]:not( :checked ) ) {
        & + div > span > menu > label:has( > input[type=checkbox][name=indent] ) {
          pointer-events: none;
          &::before {
            width: 20px;
            content: ' ';
          }
        }
      }

      /* first field cannot... */
      &:first-of-type {

        > span {
          > menu[role=toolbar] {
            > label {
              
              /*  ... be moved up */
              &:has( > button:is( [value=up] ) )
              {
                pointer-events: none;

                &::before {
                  content: ' ';
                  width: 20px;
                }
              }

              /* ...be indented */
              &:has( > input:is( [name=indent] ) )
              {
                pointer-events: none;

                &::before {
                  content: ' ' !important;
                  width: 20px;
                }
              }

            }
          }
        }
      }

      /* last field cannot be moved down */
      &:last-of-type {

        > span {
          > menu[role=toolbar] {
            > label {
              &:has( > button[name=down] ) {
                pointer-events: none;

                &::before {
                  content: ' ';
                  width: 20px;
                }
              }
            }
          }
        }
      }
    }

    /* only if we have more than one field is there a delete option (can't delete last field) */
    &:has( > div:nth-of-type(2) ) {

      > div {
        > span {
          > menu {
            > label:has( > button[name=remove] ) {
              pointer-events: auto;
              &::before {
                content: var( --icon-trash );
              }
            }
          }
        }
      }

    }
  }

}

dialog.documentDialog > * > *[role=tablist] > div:has( 
  > label > input[type=radio][name=tabs][value=codeTab ] 
) > div[role=tabpanel] {
  overflow: hidden;
  margin: 0px;
  height: calc( 100% - 36px );
  
  > section.hilited {
    width: 100%;
    height: 100%;
    
    > pre.hilited-gutter {
      display: inline-block;
      position: relative;
      width: 8ch;
    }
    
    > code.hilited-editor {
    }
    
    > menu[role=toolbar] {
      padding: 0px;
      margin: 0px;
      height: 20px;
    }
  }
}

dialog.documentDialog {
  /* the removeCurrentSecret current button is active only when there is an existing secret selected in the list. */
  &:has( 
    > * > nav > select[name=documentsList] > optgroup > option:checked 
  ) {

    > menu[role=toolbar] {

      > label {
        &:has( > button[name=removeCurrent] ){
          pointer-events: auto;
          display:unset;
        }
      }
    }

  }

  /* only show the form content when edting secret. */
  &:has( 
    > menu[role=toolbar] > input[type=checkbox][name=editingActive]:checked 
  ){

    > *:has( > nav ) > *[role=tablist] > div:has( 
      > label[role=tab] > input[type=radio][name=tabs][value=formTab] 
    ) > *[role=tabpanel] {
      > header > fieldset,
      > fieldset {
        visibility: visible;
      }
    }
  }

  &:has( 
    form:not( :valid ) 
  ) {
    > menu[role=toolbar] {
      > label:has( 
        > input[type=radio][name=secretActivation] 
      ) {
        display: none;
      }
    }
  }

  &:has( 
    > menu[role=toolbar] > input[type=checkbox][name=unsavedChanges]:checked 
  ){

    /* the saveCurrentSecret button is active only if we're editing and have unsaved changes */
    &:has( form:valid ) {

      > menu[role=toolbar] {
        > label {
          &:has( > button[name=saveCurrent] ){
            pointer-events: auto;
            display:unset;
          }
        }
      }
    }

    > menu[role=toolbar] {
      /* the createNew button is not active if we're editing and have unsaved changes */
      > label {
        &:has( > button[name=createNew] ){
          pointer-events: none;
          display:none;
        }
      }

      /* the restoreCurrent is active only if we have unsaved changes */
      > label {
        &:has( > button[name=restoreCurrent] ){
          pointer-events: auto;
          display:unset;
        }
      }
    }
    
    > * > nav > select[name=documentsList] > optgroup > option {
      
      &[data-loaded=true]{
        font-weight: bold;
      }
      
      &:checked {
        /* if we're currently editing an item from the list, then give that item a "dirty" appearance */
        font-style: italic;
        
        &::before {
          content: '* ';
        }
      }
    }
    
    > footer[role=toolbar] {
      > button[name=ok]{
        pointer-events: none;
      }
    }
  }

}