/* dijit/* variables */

@import '../variables';

/* Common (Common.styl) */

// Popup (Dropdowns and Tooltip Dialogs)
$popup-border-radius = $border-radius;
$popup-box-shadow = $shadow-depth2;

/* Dialog, Tooltip, TooltipDialog */

// Dialog
$dialog-background-color = $theme-base-color;
$dialog-border-color = $border-color;
$dialog-padding = $padding * 2;
$dialog-border-radius = $border-radius;
$dialog-box-shadow = $shadow-depth2;

// content pane
$dialog-content-bg-color = $theme-base-color;

// title bar
$dialog-titlebar-border-color = $grey-light;
$dialog-titlebar-font-size = 1.1em;

// close icon
$dialog-close-icon = "\f00e";
$dialog-close-icon-size = 20px;

// underlay
$dialog-underlay-color = $black;
$dialog-underlay-opacity = 0.65;

// Tooltip Dialog connector (arrow)
$dialog-arrow-thickness = 6px;
$dialog-arrow-border-color = $border-color;
$dialog-arrow-background-color = $dialog-background-color;

// Tooltip
$tooltip-background-color = $grey-dark;
$tooltip-text-color = $theme-base-color;
$tooltip-padding = $padding;
$tooltip-border = 0 none;
$tooltip-border-radius = $border-radius;
$tooltip-opacity = 1;

// tooltip connector (arrow)
$tooltip-arrow-color = $tooltip-background-color;
$tooltip-arrow-thickness = 4px;

/* Menu */

$menu-background-color = $theme-base-color;
$menu-border-color = $border-color;
$menu-padding = $padding * 2;
$menu-border-radius = $border-radius;

// MenuItem
$menu-item-padding = $padding * 2;

// hover
$menu-item-hovered-text-color = $theme-base-color;
$menu-item-hovered-background-color = $theme-base;

// active
$menu-item-active-text-color = $theme-base-color;
$menu-item-active-background-color = $theme-base;

// selected
$menu-item-selected-text-color = $theme-base-color;
$menu-item-selected-background-color = $theme-base;

// disabled
$menu-item-disabled-text-color = $disabled-color;

// disabled hover
$menu-item-disabled-hovered-text-color = darken($menu-item-hovered-text-color, 5%);
$menu-item-disabled-hovered-background-color = lighten($menu-item-hovered-background-color, 35%);

// separator
$menu-item-separator-top-color = $border-color;
$menu-item-separator-bottom-color = transparent;

// icon
$menu-item-icon-padding = $padding;
$menu-item-icon-margin = $margin;
$menu-item-icon = $icon-drop-right;
$menu-item-icon-rtl = $icon-drop-left;

// Menubar
$menubar-background-color = $grey-lighter;
$menubar-item-padding = $padding * 2 $padding * 3;

// hover
$menubar-item-hover-color = $theme-base-color;
$menubar-item-hover-background-color = $theme-base;

// active
$menubar-item-active-color = $theme-base-color;
$menubar-item-active-background-color = $theme-base;

// selected
$menubar-item-selected-text-color = $theme-base-color;
$menubar-item-selected-background-color = $theme-base;

// Menubar dropdown (Popup)
$menubar-popup-item-padding = $menu-item-padding;

/* Calendar */

$calendar-background-color = $theme-base-color;
$calendar-border-color = $border-color;
$calendar-padding = $padding;
$calendar-border-radius = $border-radius;
$calendar-box-shadow = $shadow-depth2;

// day
// the "S, M, T, W, T, F, S"
$calendar-day-cell-font-weight = bold;
$calendar-day-cell-padding = $padding;

// date
$calendar-date-cell-padding = $padding * 0.5 $padding;
$calendar-date-font-size = 0.9em;
$calendar-date-cell-prev-next-month-text-color = lighten($grey-dark, 50);
$calendar-date-cell-border-radius = 50%;
$calendar-date-cell-current-border-color = $theme-base;

// hover 
$calendar-date-cell-hovered-background-color = darken($theme-base-color, 5%);

// active 
$calendar-date-cell-active-background-color = darken($theme-base-color, 10%);

// selected 
$calendar-date-cell-selected-background-color = $theme-base;
$calendar-date-cell-selected-text-color = $theme-base-color;

// year
$calendar-year-cell-padding = $padding;
$calendar-year-font-size = 1.15em;
$calendar-year-prev-next-year-font-size = 0.9em;
$calendar-year-prev-current-year-text-color = $theme-base;
$calendar-year-prev-next-year-text-color = $calendar-year-prev-current-year-text-color;

// month dropdown
$calendar-month-dropdown-menu-padding = $padding * 2;
$calendar-month-dropdown-menu-item-padding = $padding;

// hover
$calendar-month-dropdown-menu-item-hovered-text-color = $menu-item-hovered-text-color;
$calendar-month-dropdown-menu-item-hovered-background-color = $menu-item-hovered-background-color;

// icons (swapped for rtl)
$calendar-icon-decrease = $icon-drop-left;
$calendar-icon-increase = $icon-drop-right;
$calendar-icon-size = 24px;

/* Color Palette */

$colorpalette-background-color = $theme-base-color;
$colorpalette-padding = $padding;
$colorpalette-border-color = $border-color;
$colorpalette-border-radius = $border-radius;

// Swatch
$colorpalette-swatch-width = 15px;
$colorpalette-swatch-height = 15px;
$colorpalette-swatch-border-color = transparent;
$colorpalette-swatch-radius = 2px;

// Hover
$colorpalette-swatch-hover-border-color = $border-color;
$colorpalette-swatch-hover-box-shadow = none;

// Active, Selected
$colorpalette-swatch-selected-border-color = $theme-base;
$colorpalette-swatch-selected-box-shadow = $shadow-depth1;

/* Editor */

$editor-background-color = $theme-base-color;
$editor-border-color = $border-color;
$editor-border-radius =$border-radius;

// Iframe container
$editor-iframe-padding = $padding $padding * 2;
$editor-iframe-border-color = transparent;

// Hover
$editor-iframe-hover-border-color = $theme-base;

// Focused
$editor-iframe-focused-border-color = $theme-base;

// Disabled
$editor-disabled-border-color = $border-color;
$editor-iframe-disabled-border-color = transparent;
$editor-iframe-disabled-background-color = $disabled-background-color;

/* Progress Bar */

// Colors
$progress-bar-color = $theme-base;
$progress-bar-alternative-colors = {
	alt-primary: $primary,
	alt-success: $success,
	alt-info: $info,
	alt-warning: $warning,
	alt-danger: $danger,
	alt-inverse: $inverse
};

$progress-bar-empty-color = $grey-light;
$progress-bar-border-radius = $border-radius;
$progress-bar-strips-image-url = "images/progressBarStrips.png";

// label
$progress-bar-text-color = $theme-base-color;
$progress-bar-font-size = 1em;
$progress-bar-text-shadow = (1em / 10) (1em / 10) 1px $grey-dark;

/* Toolbar */

$toolbar-background-color = $grey-lighter;
$toolbar-padding = $padding;

// Button (Override default djitButton styles)
$toolbar-button-border-color = transparent;
$toolbar-button-padding = $padding;
$toolbar-button-background-color = transparent;
$toolbar-button-border-radius = $border-radius;
$toolbar-button-spacing = $padding;

// Label
$toolbar-label-padding = $padding*2;

// Separator
$toolbar-separator-width = 1px;
$toolbar-separator-height = 20px;
$toolbar-separator-color = $border-color;
$toolbar-separator-margin = 0 $margin;

// Hover
$toolbar-hover-border-color = $border-color;

// Active
$toolbar-active-border-color = $border-color;

// Disabled
$toolbar-disabled-background-color = $toolbar-background-color;
$toolbar-disabled-border-bottom-color = $border-color;

/* Tree */

$tree-background-color = transparent;

// Tree row
// normal
$tree-row-padding = $padding * 2 0;
$tree-row-border-color = transparent;
$tree-row-line-height = $line-height;

// hover
$tree-row-hover-background-color = darken($theme-base-color, 5%);
$tree-row-hover-border-color = $tree-row-border-color;

// active
$tree-row-active-padding = $tree-row-padding;
$tree-row-active-background-color = darken($theme-base-color, 5%);
$tree-row-active-border-color = $tree-row-border-color;

// selected
$tree-row-selected-background-color = $theme-base;
$tree-row-selected-border-color = $tree-row-border-color;
$tree-row-selected-text-color = $theme-base-color;

// expando
$tree-expando-icon-width = $icon-size;
$tree-expando-icon-height = $icon-size;
$tree-expando-icon-color = $theme-base;
$tree-expando-margin = $margin;

// expando selected
$tree-expando-icon-selected-color = $theme-base-color;

/* Time Picker */

// normal
$timepicker-background-color = $theme-base-color;
$timepicker-padding = $padding 0;
$timepicker-border-color = $border-color;
$timepicker-border-radius = $border-radius;
$timepicker-box-shadow = $shadow-depth2;
$timepicker-item-padding = $padding * 2;

// tick (minor values)
$timepicker-tick-text-color = $grey;

// marker (major values)
$timepicker-marker-background-color = transparent;

// hover
$timepicker-item-hovered-text-color = $grey-dark;
$timepicker-item-hovered-background-color = darken($theme-base-color, 5%);

// selected
$timepicker-item-selected-text-color = $grey-dark;
$timepicker-item-selected-background-color = darken($theme-base-color, 5%);

/* Title Pane */

$titlepane-highlight-color = $theme-base;
$titlepane-has-border-radius = true;
$titlepane-border-radius = $border-radius;

// Content Pane
$titlepane-content-background-color = $theme-base-color;
$titlepane-content-border-color = $border-color;
$titlepane-content-padding = $padding * 2;

// icons
// uses common vars directly

/* Inline Edit Box */

$inlineeditbox-border-color = transparent;
$inlineeditbox-padding = $padding $padding + 2px;
$inlineeditbox-border-radius =$input-border-radius;

// hover
$inlineeditbox-hover-background-color = transparent;
$inlineeditbox-hover-border-color = $theme-base;

/* DND */

$dnd-item-border-color = transparent;

// hover
$dnd-hover-background-color = $grey-lighter;
$dnd-hover-border-radius = $border-radius;

// anchor
$dnd-anchor-background-color = transparent;
$dnd-anchor-border-color = $theme-base;
$dnd-anchor-border-radius = $border-radius;

// insert indicator color
$dnd-avatar-item-insert-indicator-color = $theme-base;

// avatar
// item
$dnd-avatar-item-background-color = $theme-base-color;
$dnd-avatar-item-padding = $padding $padding * 2;
$dnd-avatar-item-border-radius = $border-radius;
$dnd-avatar-item-box-shadow = $shadow-depth2;

// icons
$dnd-icon-drop = "\f008";
$dnd-icon-no-drop = "\f01c";