// Override Font Awesome font path.
$fa-font-path: '../resource';

//**********************************************************************************************************************
//**********************************************************************************************************************
// FONTS.
//**********************************************************************************************************************
//**********************************************************************************************************************
$wc-default-font: sans-serif !default;
$wc-mono-font: monospace !default;
//**********************************************************************************************************************
// FONT SIZES
//**********************************************************************************************************************
// If you are mucking around here you may want to go look at the generic section heading sizes (in the SPACING and REM
// SIZES section) and WHeading styles below.

// sizes for screens which are not small but not particularly big. Pick any reasonable value for this.
$wc-desktop-font-size: 75% !default;
// Font size small screens (phone-like). You should probably leave this as it is. If this is set to -1 or is the same
// as $wc-desktop-font-size then the CSS media block will not be written.
$wc-phone-font-size: 100% !default;
// font size on really large, dense monitors (eg Apple cinema and thunderbolt displays) where small fonts become too
// tiny to be useful. Pick a value but test it out on someone old. If this is set to -1 or is the same as
// $wc-desktop-font-size then the CSS media block will not be written.
$wc-bigscreen-font-size: 100% !default;

// mobile menus - used only to make the menu items bigger for easier touch use.
$wc-font-larger: 1.5rem !default;

// Vertical alignment classes are generated from the following list. If the var is set to the single value 0 none of
// the vertical alignment classes will be implemented. These are not used by FlowLayout for its vertical alignment
// control so they are safe to omit.
// This list covers the CSS3 vertical-alignment values. You may not need or want all of them.
$wc-valign-list: baseline, bottom, inherit, initial, middle, sub, super, text-bottom, text-top, top !default;
//**********************************************************************************************************************
//**********************************************************************************************************************
// Control of helper/utility classes
// The following variables allow a theme to easily omit a set of utiity classes simply by setting the variable value. In
// all cases a value of 1 means include support for the classes and any other value means omit support for the classes.
// This is done here rather than through WComponents file overrides because the purpose of the classes is pretty much
// fixed. It does not prevent a theme from completely redefining what any of the affected classes do, it just makes it
// more trouble than it is worth to override them.
//**********************************************************************************************************************
//**********************************************************************************************************************
// Add some simple button style helper classes to the output CSS.
// Set this to 1 to include the helpers, any other value to not include them and save your CSS a few bytes.
$wc-button-include-helper-classes: 1 !default;

//**********************************************************************************************************************
//**********************************************************************************************************************
// BUTTONS
//**********************************************************************************************************************
//**********************************************************************************************************************
// If this is set to 1 then _all_ buttons will inherit font metrics. You may find this useful in getting cross-browser
// and cross-platform consistency but it _may_ make your buttons ugly if you are a hard-core OS X user. We recommend
// leaving this at 1 - it will save you some grief.
$wc-button-rationalise-text-styles: 1 !default;
// If this next var == 1 and the previous var is not == 1 you can apply inherited font metrics _just_ to OS X.
$wc-button-rationalise-text-styles-mac: 0 !default;
// Set to 1 top turn on "invite" styles for all buttons. If you do this you _will_ want to set borders and default
// backgrounds because this will add hover/focus backgrounds.
$wc-button-use-invite: 0 !default;

//**********************************************************************************************************************
//**********************************************************************************************************************
// SPACING and REM SIZES
/// If you change the units of any of these you are probably going to want to change all of them as they may be involved
// in Sass calculations. The gap sizes and icon sizes must be in the same units.
//**********************************************************************************************************************
//**********************************************************************************************************************
// The list of class suffixes. There is no point rewriting this unless you rewrite the XSLT.
$wc-gap-suffix-list: sm, med, lg, xl !default;
// Common spacing variables. There should be a gap per entry in the list
$wc-gap-small: 0.25rem !default;
$wc-gap-normal: 0.5rem !default;
$wc-gap-large: 1rem !default;
$wc-gap-xl: 1.5rem !default;

// If this is set to anything other than -1 then all horizontal gaps using wc-hgap-* wc-vgap-* and mc-margin-* will be
// reduced to the sizes which follow this var in narrow viewports. You probably don't want to disable this if your gaps
// are r/em based and you are changing the font size unless you are putting in your own more carefully crafted spacing
// constraints.
$wc-gap-reduce-when-narrow: 1 !default;
// If the previous var == -1 then the following are ignored, otherwise they are used to set the gap sizes for narrow
// viewports.
$wc-phone-gap-small: 0.125rem !default;
$wc-phone-gap-normal: 0.25rem !default;
$wc-phone-gap-large: 0.5rem !default;
$wc-phone-gap-xl: 0.75rem !default;

// Some fixed sizes for iconography place holders
$wc-icon-small: 0.75rem !default; // about 12px in any unit
$wc-icon-normal: 1rem !default; // min 16px in any unit
$wc-icon-wider: 1.25rem !default;  //recommend min 20px in any unit - this will allow for wider glyphs.
$wc-icon-large: 2rem !default; // really big icons. So far only for the full-screen loading indicator.

// h1 in WSection, WPanel Types CHROME and SECTION, WMessageBox, WValidationErrors.
// If you are mucking around here you may want to go look at the WHeading styles below. Set this to -1 to use the
// default h1 size for your theme.
$wc-section-header-size: 1rem !default;
// h1 in dialogs
$wc-dialog-header-size: 1rem !default;
// h1 in the screen header (WPanel Type HEADER) Set to -1 to inherit from the theme default h1 size.
$wc-header-h1-size-full: 2.25rem !default;
// h1 in the screen header on small screens. set to -1 to not implement this (inherit from $wc-header-h1-size-full).
$wc-header-h1-size-small: 1rem !default;

// Back to top link
// Not generic but not actually a WComponent either. A purely client-side artefact.
$wc-btt-normal: 2rem !default; // size of back-to-top link's 'icon' Should be big enough to hit on a mobile.
$wc-btt-large: 4rem !default;
//**********************************************************************************************************************
//**********************************************************************************************************************
// Generic items added to various components.
// It would be unusual to have to change these
//**********************************************************************************************************************
//**********************************************************************************************************************

//**********************************************************************************************************************
// BORDERS
//**********************************************************************************************************************
// Many things have borders and it is nice to have a common look to all of them. You may want to cross reference this to
// the mixins makeBorder and makePartBorder which use these as default values but allow override.
$wc-border-style: solid !default;
$wc-border-width: 1px !default;

//**********************************************************************************************************************
/// z-index settings
//**********************************************************************************************************************
/// We have a number of transient elements which have a z-index (eg the calendar in WPartialDateField's output widget).
/// Many of these require the z-index to be _below_ the modal shim z-index but then have an override to make them _above_
/// the dialog z-index if they are in a dialog.
/// The z-index common is the lowest z-index we should ever apply to a normal transient artefact. This _could_ be 1 and
/// _must_ be at least 2 less than z-index-modal-shim as we need transient elements to be below the modal shim. I
/// recommend this be greater than 1 just in case an application needs a local over-ride due to unusual design or theme
/// overrides.
$wc-z-index-common: 5 !default;
/// z-index-modal-shim
/// THis is the z-index of the modal shim. Every z-index should be below this except dialogs and transient elements with
/// a z-index when they are found in a dialog.
$wc-z-index-modal-shim: 20 !default;
/// The z-index-dialog is the z-index of the dialog element. It must be above z-index-modal-shim.
$wc-z-index-dialog: $wc-z-index-modal-shim + 1;
/// The z-index common to most components in a dialog
$wc-z-index-common-in-dialog: $wc-z-index-common + $wc-z-index-dialog;
/// The unloading shim must be over everything including things in dialogs.
$wc-z-index-unloading-shim: 99 !default;
$wc-z-index-unloading-message: $wc-z-index-unloading-shim + 1;

//**********************************************************************************************************************
// Page loading indicator and aria-busy elements.
//**********************************************************************************************************************
// The size of the icon and the gap size must be n the same units.
$wc-root-loading-icon-size: $wc-icon-large !default;
// The padding of the loading indicator
$wc-root-loading-padding: $wc-gap-large !default;
// The width of the loading indicator. If this is -1 it is ignored and the loading indicator will be the size of the
// icon. If you set this then you may want to consider where you want the content to appear. If you set the loading
// indicator box-sizing to border-box and set this then you may eed to redo the loading offsets.
$wc-root-loading-width: -1 !default;
$wc-root-loading-height: -1 !default;
//
// The horizontal offset of the screen loading indicator. You probably do not want this in the absolute left of the
// screen, but hey, that is up to you.
// If this is 0 then it will be ignored. Recommend <= 50%.
$wc-root-loading-horizontal-offset: 50% !default;
// The vertical offset of the loading indicator. Set to 0 to not have any offset (i.e. the loading indicator will at the
// top of the screen). Recommend 30-33%.
$wc-root-loading-vertical-offset: 30% !default;
//s
// The size to reserve for the aria-busy indicator
$wc-common-busy-size: $wc-icon-normal !default;
// The opacity of content of an aria-busy container. We used to set these to visibility: hidden but that has some
// negative side-effects.
// If you set this to 0 then it has the same effect as visibility:hidden but without the support for obsolete browsers.
// You can ignore this, and leave everything as is, by setting this to 1 or more.
$wc-common-busy-content-opacity: 0.25 !default;


//**********************************************************************************************************************
// Generic form input controls:
//**********************************************************************************************************************
// Text-like inputs and textareas.
// The padding to be applied (only used if $wc-ui-color-border-form-control is a colour; not if it is -1). You probably
// **DO NOT** want to chage this!
$wc-input-padding: 1px !default;

// left and right padding of the combo button. Needed to calc the max-width for use when
// WField.setInputWidth(int) is used.
$wc-combo-button-padding-lr: $wc-gap-small !default;
//**********************************************************************************************************************


//**********************************************************************************************************************
// Sections
// WSection, WMessageBox. WPanel Types ACTION and CHROME
//**********************************************************************************************************************
// Turn on borders on all section elements. Set to -1 to disable section borders. Do this is you want different borders
// for each type of section.
$wc-section-use-border: 1;

// the space between the section box and its content. This is reversed to "doc" a menu. Must be > 0 to have any effect.
// You probably want to set this to 0 if $wc-section-use-border == -1.
$wc-section-space-normal: $wc-gap-normal !default;

// the padding around the title in the header. Must be > 0 to have any effect.
$wc-section-space-header: $wc-section-space-normal !default;

// the space between the section box and its content on small viewports. This is reversed to "doc" a menu. Not applied
// if $wc-gap-reduce-when-narrow == -1.
$wc-section-space-reduced: $wc-phone-gap-normal !default;

// The space around section headers on narrow viewports. Not applied if $wc-section-space-header <= 0 or if
// $wc-section-space-normal <= 0 or if $wc-gap-reduce-when-narrow == -1.
$wc-section-space-header-reduced: $wc-section-space-reduced !default;

//**********************************************************************************************************************
// Variables for specific components
//**********************************************************************************************************************
//**********************************************************************************************************************

//**********************************************************************************************************************
// ListLayout
//**********************************************************************************************************************
// ListLayout marker spacing. These are a bit odd but are here to make the lists look OK across most browsers.
$wc-list-layout-dot-spacing: 1.5rem !default;
$wc-list-layout-ordered-spacing: 2rem !default;
$wc-list-layout-bar-width-offset: 2 * $wc-gap-normal !default;

//**********************************************************************************************************************
// WColumn, ColumnLayout
//**********************************************************************************************************************
// Provides for a list of support COLUMN widths for WColumn and ColumnLayout. This is similar to $wc-fld-list below but
// it is not likely you will want to force the same list (though you could).
//
// * -1 means support all widths from 1% to 100%. This is a LOT of CSS (but not so much as the WFieldLayout variant).
// * 0 means support columns with widths which are multiples of 5%.
// * a list of positive integer values means support all column widths which are a multiple of 5% or a member of the
//   list. Do not repeat multiples of 5% in the list: they are redundant.
//
// This setting will support all available column widths at the cost of lots of CSS.
$wc-column-list: -1 !default;
// This setting will support all column widths which are positive integer multiple of 5%.
// $wc-column-list: 0;
// This setting will give you all multiples of 5 plus the widths (as %) included in the list
// $wc-column-list: 16, 33, 34, 66, 67, 83;

//**********************************************************************************************************************
// Dialogs - WDialog, Image editor.
//**********************************************************************************************************************
$wc-ui-dialog-min-width: 15rem !default;
$wc-ui-dialog-min-height: 7rem !default;
// Do we want to have the amusing but wasteful dialog resize/move transitions? 1 is yes, anything else is no.
$wc-ui-dialog-use-transitions: 1 !default;
// Used only if the scale and move transitions are turned on and supported.
$wc-ui-dialog-transition-delay: 0s !default;
$wc-ui-dialog-transition-duration: 0.5s !default;

//**********************************************************************************************************************
// WFieldLayout
//**********************************************************************************************************************
// Force all WFieldLayouts to be LAYOUT_STACKED. This will annoy many people but will improve accessibilty **and** save
// a lot of CSS.
//
// *  0 == allow flat field layouts,
// * any other value means force all field layouts to be stacked.
//
// If this is not 0 then none of the other settings in this group are applied.
$wc-fieldlayout-force-stack: 0 !default;

// This defines a list of labelWidth settings to honour.
// * If this variable consists of the single value -1 then all label Widths from 1% to 100% will be used at the cost of
//   **much** more CSS.
// * If the variable is set to the single value 0 then label widths which are a positive integer multiple of of 5% will
//   be used.
// * Otherwise label widths which are a multiple of 5 _or_ in this list will be honoured. Do not duplicate multiples of
//   5 in this list.
//
// This setting will give you all width which are multiple of 5% plus those listed
$wc-fld-list: 16, 33, 34, 66, 67, 83 !default;
// If you use the following version you get all multiple of 5% only
// $wc-fld-list: 0;
// If you use the following version you get all widths from 1% to 100% and that is a LOT of CSS
// $wc-fld-list: -1;

// The label width of a flat field layout with default width. This must be a percent between 0 and 100. 25, 33, 50 are
// recommended options. Do not pick one if it is not in the label width values you support (see above).
$wc-fieldlayout-default-label-width: 50% !default;

//**********************************************************************************************************************
// WHeading
//**********************************************************************************************************************
// Generic headings. Set to -1 to not use (use UA default)
$wc-heading-h1-font-size: 1.25rem !default;
$wc-heading-h2-font-size: 1.25rem !default;
$wc-heading-h3-font-size: 1.125rem !default; // May make IE cry...
$wc-heading-h4-font-size: 1rem !default;
$wc-heading-h5-font-size: -1 !default;
$wc-heading-h6-font-size: -1 !default;

//**********************************************************************************************************************
// WLabel
//**********************************************************************************************************************
// The font weight of a label. bold, normal, whatever.
$wc-label-weight: bold !default;
// The mandatory indicator character. If this is set to 0 then no visible mandatory field indicator will be shown. This
// may defeat the purpose of WStyledText.Type.MANDATORY_INDICATOR
$wc-label-mandatory-indicator: '*' !default;
// The font-size of the label hint. Set to 0 or less to use the same size as the label.
$wc-label-hint-size: 82.5% !default;

//**********************************************************************************************************************
// WMenu
//**********************************************************************************************************************
// generic menu structure
$wc-menu-item-pad-topbottom: $wc-gap-normal !default;
// menu type BAR and FLYOUT structure
// padding of items
$wc-menu-bar-column-item-pad: $wc-menu-item-pad-topbottom !default;
// padding of WSeparator at the top level of a BAR or FLYOUT menu (orientation='vertical')
$wc-menu-bar-vseparator-pad: (2 * $wc-menu-item-pad-topbottom) 0 0 0 !default;
// the gap bewtten the text label of a sub menu and its 'opener' image
$wc-menu-bar-column-opener-indicator-before-after: $wc-gap-small !default;
// width of the open state icon in WMenu type TREE
$wc-menu-tree-iconwidth: $wc-icon-normal !default;

//**********************************************************************************************************************
// WSection
// May also affect WPanels
//**********************************************************************************************************************
//**********************************************************************************************************************
// WTabSet
//**********************************************************************************************************************
// The width of the tab in left/right TabSets.
// This _should_ be a percentage, otherwise you will have to manipulate the IE9 Sass.
$wc-tabset-left-right-tab-width: 15% !default;
$wc-tabset-border-radius: $wc-gap-small !default;

//**********************************************************************************************************************
// WTree
//**********************************************************************************************************************
// indent of branches in the tree - also applies to WMenu Type TREE.
$wc-tree-indent: 0.75rem !default;
// The bi-modal nature of the tree expander button means we
// have to pad the inner components rather than the button.
// It _may_ be worth puttiing in another content wrapper...
$wc-tree-item-pad-l: $wc-gap-small !default;
$wc-tree-item-pad-r: $wc-gap-small !default;
$wc-tree-item-pad-t: $wc-gap-small !default;
$wc-tree-item-pad-b: $wc-gap-small !default;
// padding of each tree item. Also used for WMenu type TREE.
$wc-tree-item-pad: $wc-gap-small 0 !default;
// the start width of a htree group when the browser is rubbish.
$wc-htree-branch-width-lame: 10rem !default;

//**********************************************************************************************************************
// WToggleButton
//**********************************************************************************************************************
$wc-togglebutton-width: 2 * $wc-icon-normal !default;
$wc-togglebutton-transition: all 0.4s ease !default;
$wc-togglebutton-transition-slider: left 0.3s cubic-bezier(0.175, 0.885, 0.320, 1.275), padding 0.3s ease, margin 0.3s ease !default;
// calculated vars
$wc-togglebutton-double-border-width: 2 * $wc-border-width;
$wc-togglebutton-slider-width: $wc-togglebutton-width / 2;
