@import 'zindex.variables';

/*******************************
     User Global Variables
*******************************/

@docsHue: 257;

@red:#A80000;
@orange:#D83B01;
@yellow:#FFB900;
@green:#107C10;
@teal:#008272;
@blue:#0078D7;
@purple:#5C2D91;
@pink:#E2008C;
@brown:#00BCF2;
@grey:#505050;
@lightGrey: #d9d9d9;

@greenTextColor: darken(@green, 5);


@pageMinWidth: 100%;


/*-------------------
   Semantic UI Dependencies
--------------------*/

// These less vars cannot be set to css vars because semanticui uses transform functions on them behind the scenes,
// but we should not use them. Instead, we should use our css theming variables.
// They've all been set to overtly strange values to make it obvious that they should not be used.

@linkColor : hotpink; // We should use var(--pxt-link) instead.
@primaryColor        : #FF00FF;
@secondaryColor      : #00FF00;

/*-------------------
     Fonts
--------------------*/

@importGoogleFonts: false;

@docsHeaderFont: "Helvetica Neue", Helvetica, Arial, sans-serif;
@docsPageFont: "Helvetica Neue", Helvetica, Arial, sans-serif;

@segoeUIFont: "Segoe UI", Tahoma, Geneva, Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif;

@emSize      : 14px;
@fontSize    : 12pt;

@smallFontSize    : 0.875rem;

/*-------------------
   Links
--------------------*/

@linkHoverUnderline  : underline;

/*-------------------
   Breakpoints
--------------------*/

@tallEditorBreakpoint: 44rem;
@thinEditorBreakpoint: 50rem;

/*******************************
             States
*******************************/

/*-------------------
      Disabled
--------------------*/

@disabledOpacity: 0.80;

/*-------------------
    Scroll Bars
--------------------*/

@useCustomScrollbars: false;
@customScrollbarWidth: 10px;


/*******************************
     PXT Variables
*******************************/

@avatarImageUrl: "../docs/static/avatar.svg";
@avatarImage: data-uri(@avatarImageUrl);

@fileLogoUrl: "../docs/static/filelogo.svg";
@fileLogo: data-uri(@fileLogoUrl);

@githubFileLogoUrl: "../docs/static/githubfilelogo.svg";
@githubFileLogo: data-uri(@githubFileLogoUrl);

@testFileLogoUrl: "../docs/static/testfilelogo.svg";
@testFileLogo: data-uri(@testFileLogoUrl);

@loaderImageUrl: "../docs/static/loader.svg";
@loaderImage: data-uri(@loaderImageUrl);
@loaderImageSize: 100%;

@loaderMsftImageUrl: "../docs/static/orglogowide.png";
@loaderMsftImage: data-uri(@loaderMsftImageUrl);

@includePoweredByLogos: false;
@poweredBySmallUrl: "../docs/static/logo/Powered-By-Microsoft-logo-small.png";
@poweredBySmall: none;
@poweredByLargeUrl: "../docs/static/logo/Powered-By-Microsoft-logo.png";
@poweredByLarge: none;
.includePoweredByLogos() when not (@includePoweredByLogos = false) {
  @poweredBySmall: data-uri(@poweredBySmallUrl);
  @poweredByLarge: data-uri(@poweredByLargeUrl);
}

@docsAvatarImageUrl: none;
@docsAvatarImage: none;
.setDocsAvatarUrl() when not (@docsAvatarImageUrl = none) {
  @docsAvatarImage: data-uri(@docsAvatarImageUrl);
}
.setDocsAvatarUrl();

@blocksIconUrl: "../docs/static/icons/blocks.svg";
@blocksIcon: data-uri(@blocksIconUrl);
@pyIconUrl: "../docs/static/icons/py.svg";
@pyIcon: data-uri(@pyIconUrl);
@jsIconUrl: "../docs/static/icons/js.svg";
@jsIcon: data-uri(@jsIconUrl);
@tsIconUrl: "../docs/static/icons/ts-logo-512.svg";
@tsIcon: data-uri(@tsIconUrl);
@immersiveReaderUrl: "../docs/static/icons/immersive-reader.svg";
@immersiveReaderIcon: data-uri(@immersiveReaderUrl);
@immersiveReaderLightUrl: "../docs/static/icons/immersive-reader-light.svg";
@immersiveReaderLightIcon: data-uri(@immersiveReaderLightUrl);

@logoFilter: invert(23%) sepia(91%) saturate(1957%) hue-rotate(290deg) brightness(83%) contrast(94%);

/*-------------------
   Menu
--------------------*/

@mainMenuHeight: 4.0rem;
@mobileMenuHeight: 3.5rem;
@sandboxMobileMenuHeight: 3.0rem;
@thinMenuHeight: 3rem;
@tutorialEmbedMenuHeight: 2.25rem;

/*-------------------
   Layout
--------------------*/

@sideBarWidth: 20rem;
@sideBarWidthSmall: 18rem;
@sideBarWidthLarge: 28rem;
@simulatorWidth: 23rem;
@simulatorWidthSmall: 20rem;

/*-------------------
   Side Docs
--------------------*/

@sidedocsButtonsTop: (@mainMenuHeight + 1rem);
@sidedocsButtonsRight: 4.25rem;


/*-------------------
   Serial editor
--------------------*/
@serialConsoleFont: @blocklyFont;

/*-------------------
   Filelist
--------------------*/

/*-------------------
   Github Diff editor
--------------------*/
@diffUpdateInlineAddedOutline: 1px solid var(--pxt-neutral-stencil3); // #ccc

@conflictHeaderColor: var(pxt-neutral-background3); // black;

/*-------------------
   Blockly
--------------------*/

@blocklyRowWidthWide: 200px;
@blocklyRowWidthComputer: 180px;
@blocklyRowWidthTablet: 150px;
@blocklyRowWidthMobile: 50px;

@blocklyRowHeightWide: 40px;
@blocklyRowHeightComputer: 40px;
@blocklyRowHeightTablet: 45px;
@blocklyRowHeightMobile: 50px;

@blocklyFont: 'Consolas', 'Monaco', 'Menlo', 'Ubuntu Mono', 'source-code-pro', monospace;

@blocklyScrollbarOpacity: 1;

/*-------------------
   Flyout
--------------------*/

@blocklyFlyoutColorOpacity: 0.9;

/*-------------------
   Home
--------------------*/

@homeCardBorderRadius: 0px;
@homeCardBorderSize: 5px;

@homeCardImageBorderRadius: 0;

/* Detail view */
@homeSelectedCardBorderSize: @homeCardBorderSize*2;
@homeHeaderBorderSize: 3px;

/*-------------------
   Editor
--------------------*/
@editorFocusBorderSize: 4px;

/*-------------------
   Tutorial
--------------------*/

@tutorialSimframeMargin: -2rem;

/*-------------------
    Banner
-------------------*/
@bannerHeight: 2rem;


/*-------------------
    Greenscreen
-------------------*/
@greenScreenColor: #00ff00;
@greenScreenBlockColor: #107c10; // loops category typically uses green
                                   // keep in sync with pxtarget blocks color changes
@greenScreenGreen: #005d51; // a green that does not get erased by chromekey





/*-------------------
   ErrorList
-------------------*/
@errorListHeight: 16em;
@errorListHeaderHeight: 3.5em;
@errorListInnerHeight: (@errorListHeight - @errorListHeaderHeight);

/*-------------------
   Asset Editor
-------------------*/
@assetPreviewBackground: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10px' height='10px'%3E%3Crect x='0' y='0' width='10px' height='10px' fill='white'%3E%3C/rect%3E%3Crect x='0' y='0' width='5px' height='5px' fill='%23dedede'%3E%3C/rect%3E%3Crect x='5' y='5' width='5px' height='5px' fill='%23dedede'%3E%3C/rect%3E%3C/svg%3E");