menu[role=toolbar] > label[for=secretsButton]:has(
  > button#secretsButton
) {
  float: right;

  &::before {
    content: var( --icon-lock-cog );
  }
}

dialog.documentDialog#secretsDialog {
  
  > header {
    &::before {
      content: var( --icon-lock-cog  );
    }
  }

  > menu[role=toolbar] {
    
    > label {

      &:has( > button[name=changePassword] ){
        float: right;
        &::before {
          content: var( --icon-user-key );
        }
      }

      &:has( > input[type=radio][name=activation][value=activate] ) {
        
        /* the activate action has a "paused" lock... */
        &::before {
          content: var( --icon-lock-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-lock-bolt );
        }
      }

      &: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-lock-bolt );
        }

        /* ...but when hovering over it, it changes to the lock "pause" icon, indicating the user can deactivate. */
        &:hover::before {
          content: var( --icon-lock-pause );
        }
      }

      &:has( > button[name=resetSecretsStore] ){
        float: right;
        &::before {
          content: var( --icon-bomb );
        }
      }

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

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

    > fieldset[name=keyValuesFieldset] {
      height: calc( 100% - 96px );
    }

  }

}