/* ==UserStyle==
@name           Stylus - Customization
@description    Provides some extra customization options the Stylus extension.
@version        2025.04.05.20.37
@author         MetalTxus
@namespace      https://github.com/jesuscc1993/
@license        CC BY-SA 4.0
@preprocessor   less

@var text input-width  "Input Width"  unset
@var text input-height "Input Height" unset

==/UserStyle== */
@-moz-document url-prefix("chrome-extension://clngdbkpkpeebahjckkjfobafhncgmne")
{
  body {
    --columns: 1;
    --name-width: 40vw;
  }

  a,
  button,
  input {
    cursor: pointer;
  }

  #sections .section:first-child .CodeMirror {
    min-height: calc(100% - 116px) !important;
  }

  #sections .section:not(:first-child) .CodeMirror {
    min-height: 212px !important;
  }

  #message-box .colorview-swatch,
  #message-box .colorview-swatch::after,
  #message-box .colorview-swatch::before,
  .color-swatch,
  .config-body .select-wrapper,
  .config-body input[type="text"],
  .config-body input[type="number"],
  .config-body select {
    box-sizing: border-box;

    & when not (@input-width = unset) {
      max-width: none;
      width: @input-width;
    }
    & when not (@input-height = unset) {
      max-height: none;
      height: @input-height;
    }
  }

  .config-body :is(input[type="text"], .select-wrapper, select) {
    width: 100%;
    max-width: @input-width;
  }

  #message-box .colorview-swatch,
  #message-box .colorview-swatch::after,
  #message-box .colorview-swatch::before,
  .color-swatch {
    margin-right: 1px;
  }

  .config-body .onoffswitch {
    margin-right: 3px;
  }

  #stylus-popup {
    max-height: none;
  }

  #stylus-popup #installed {
    max-height: 500px;
  }
}