/**
 * SELECTORS
 */
// Express MUI components with high specificity so we don't have to write '!important' for rules.
@mui-tooltip: ~"div[role=tooltip] .MuiTooltip-tooltip";
@mui-snackbar: ~".MuiSnackbar-root";
@mui-snackbar-message: ~".MuiSnackbarContent-message";
@mui-button-base: ~".MuiButtonBase-root";
@mui-tab: ~".MuiTab-root";
@drawer: ~".drawer .MuiPaper-root";
@form-control: ~"div.MuiFormControl-root";
@accordion-summary: ~"div.MuiAccordionSummary-root";

/**
 * COLORS
 */
@white: #fff;
@black: #222;

/**
 * S2 COLORS
 */
@s2-link-default: #5492ef;
@s2-link-visited: #654cb3;
@s2-text-default: #2e414f;
@s2-text-light: #8c9296;
@s2-border-light: #e0e0e0;
@s2-influential-citation-orange: #dd913f;
@s2-error: #ff0000;

/**
 * HIGHLIGHTS
 */
@highlight-color: darken(@s2-link-default, 20%);
@highlight-opacity: 0.4;
@highlight-opacity-percent: 30%;
@highlight-border-color: #88f;
@highlight-hover-opacity: 0.2;
@highlight-hover-opacity-percent: 20%;
@highlight-hover-background: @s2-link-default;
@highlight-hitbox-padding: 0.1em;

/**
 * TEXT STYLING
 */
@s2-font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
@underline-offset: 5px;
@underline-width: 1px;
@underline-color: #333;

/**
 * BORDERS
 */
@border-color: #ddd;
@border-width: 1px;
@border-radius: 3px;
@border: @border-width @border-color solid;

/**
 * LABELS
 */
@label-color: rgb(255, 244, 158);
@label-border-color: @black;
@label-border-width: @border-width;

/**
 * FONT SIZES
 */
@x-large: 2rem;
@large: 1.2rem;
@medium: 1rem;
@small: 0.8rem;
@button-font-size: @small;
@line-height-ratio: 1.2;

/**
 * SPACE
 */
@padding: @small;
@margin: @small;
@tooltip-content-vertical-padding: @small * 0.5;

/**
 * ELEMENT DIMENSIONS
 */
 @brandbar-height: 48px;
@paper-summary-width: 400px;
@paper-padding: 20px;

@tooltip-paper-clipping-width: 320px;
@tooltip-paper-clipping-height: 120px;
@tooltip-padding: 4px;

@document-snippets-container-width: 300px;
@entity-property-editor-width: 400px;

/**
* Z INDEXES
* 100-based z-indexes are chosen to work with Material UI's z-indexes:
* https://material-ui.com/customization/z-index/
*/
@base-annotation-z-index: 1000;
@sentence-annotation-z-index: @base-annotation-z-index;
@equation-annotation-z-index: @sentence-annotation-z-index + 1;
@default-annotation-z-index: @equation-annotation-z-index + 1;

@page-mask-z-index: @default-annotation-z-index + 1;
@equation-diagram-z-index: @page-mask-z-index + 1;
@equation-diagram-annotation-z-index: @equation-diagram-z-index + 1;

@tooltip-z-index: @page-mask-z-index + 1;
@toolbar-z-index: @tooltip-z-index + 1;
@drawer-close-button-z-index: 1200;

/**
 * PDF VIEWER APPLICATION VARIABLES
 * The syntax for each of these variables is:
 *
 * 'pdfjs-<sanitized-selector>-<css-property-name>: <css-value>
 *
 * XXX(andrewhead): If the pdf.js submodule is updated, these properties must be checked to
 * ensure that they still match those in the pdf.js style files.
 */
@pdfjs-toolbarViewer-height: 32px + @brandbar-height;
@pdfjs-sidebarContainer-z-index: 100;
