//! web-ignition v2.5.5 ~~ https://github.com/center-key/web-ignition ~~ MIT License

// Add utility-box to your project:
//    1) $ npm install --save-dev web-ignition copy-file-util
//    2) package.json scripts -->
//       "copy-file node_modules/web-ignition/dist/utility-box.less --folder src/css/static --platform-eol"
//    3) Include in CSS LESS files --> @import "static/utility-box";

// Dark Mode Colors
@colorSmoke:    #444444;
@colorGraphite: #303030;
@colorCharcoal: #222222;
@colorTar:      #161616;
@colorWhite:    #FFFFFF;
@colorGray0:    #EEEEEE;
@colorGray1:    #DDDDDD;
@colorGray2:    #BBBBBB;
@colorGray3:    #AAAAAA;
@colorGray4:    #888888;
@colorGray5:    #777777;
@colorGray6:    #555555;
@colorGray7:    #444444;
@colorGray8:    #222222;
@colorGray9:    #111111;
@colorBlack:    #000000;

// Layers for z-index
@layerDialogBox:     500;  //cream of the crop
@layerModal:         400;  //screen overlays
@layerFixedPosition: 300;  //sticky elements
@layerNavigation:    200;  //notifications, menus, and drop-downs
@layerHover:         100;  //tootips and other hover popups
@layerBackground:   -100;  //bottom of the barrel

// Character Entities
@symbolAngleRight:   "\276F";  //character: ❯
@symbolArrowDown:    "\21E9";  //character: ⇩
@symbolArrowUp:      "\21E7";  //character: ⇧
@symbolBallotXMark:  "\2718";  //character: ✘
@symbolCheckmark:    "\2714";  //character: ✔
@symbolEmDash:       "\2014";  //character: —
@symbolSectionSign:  "\00A7";  //character: §
@symbolTriangleDown: "\25BC";  //character: ▼
@symbolTriangleUp:   "\25B2";  //character: ▲

// Tools

.MonospaceText() {
   font-family: menlo, consolas, monospace;
   font-weight: 700;
   }

.TextDarkShadow() {
   text-shadow: 0px 0px 0.8em @colorCharcoal;
   }

.Bullseye() {
   display: flex;
   justify-content: center;
   align-items: center;
   }

.TextBorder(@width: 3px) {
   -webkit-text-stroke: @width var(--colorGraphite);
   paint-order: stroke fill;
   }

.CheckerboardBox() {
   background: var(--checkerboardBackground);
   outline: 3px solid black;
   &:hover {
      background: black;
      }
   }

.DarkMode(@lessRules) {  //apply style if user has requested dark color themes
   @media (prefers-color-scheme: dark) { @lessRules(); }
   }

.MobileMode(@lessRules) {  //selects iPhone SE (3rd gen) landscape and anything narrower
   @media (max-width: 667px) { @lessRules(); }
   }