/*!
 * jQuery UI CSS Framework 1.8.21
 *
 * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 *
 * To view and modify this theme, visit http://jqueryui.com/themeroller/
 */


/* Component containers
----------------------------------*/
.ui-widget { @include fontSize($fsDefault); }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget-content { border: 1px solid $borderColorContent;
  background: $bgColorContent;
  color: $fcContent;
}
.ui-widget-header { @include ui-widget-header-bg-and-text; }
.ui-widget-header a { color: $fcHeader }

/* Interaction states
----------------------------------*/

.ui-state-default,
// this was here but if you enable it it will break blue icons in dialogs, maybe we can just make the .btn-primary selector more specific?
//.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default { border: 1px solid $borderColorDefault; color: $fcDefault; font-weight: normal;
  @include vertical-gradient(white, #e6e6e6);
  border-bottom-color: #bbb;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight  {border: 1px solid $borderColorHighlight; background: $bgColorHighlight; color: $fcHighlight;
  @include vertical-gradient(#fceec1, #eedc94);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  border-color: #eedc94 #eedc94 #e4c652; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: $fcHighlight; }

.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: $fcDefault; text-decoration: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid $borderColorHover; font-weight: normal;
  // enabling this breaks button focus in dialogs
  // color: $fcHover;
}
.ui-state-hover a, .ui-state-hover a:hover { color: $fcHover; text-decoration: none; }
// remove `.ui-widget-content .ui-state-active`, because it caused these styles to override styles we actually want (like btn) ... otherwise you get ugly blue kylemenus when activated inside another widget (e.g tabs)
.ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid $borderColorActive; color: $fcActive; background: $bgColorActive;
  @include vertical-gradient($gradientTopActive, $gradientBottomActive);
}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: $fcActive; text-decoration: none; }
.ui-widget :active { outline: none; }

/* Interaction Cues
----------------------------------*/

.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid $borderColorError; background: $bgColorError; color: $fcError;
  @include vertical-gradient(#ee5f5b, #c43c35);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #c43c35 #c43c35 #882a25;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: $fcError; }
.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: $fcError; }
.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary,  .ui-widget-header .ui-priority-secondary { opacity: 0.7; font-weight: normal; }
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: $ic-opacity-disabled; background-image: none; }

// instructure additions
.ui-state-success, .ui-state-warning,
.dialog-warning .ui-dialog-titlebar, .dialog-success .ui-dialog-titlebar {
  border-width: 1px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  color: $ic-color-danger;
}
.ui-state-success, .dialog-success .ui-dialog-titlebar {
  @include vertical-gradient($btnSuccessBackground, $btnSuccessBackgroundHighlight);
}
.ui-state-warning, .dialog-warning .ui-dialog-titlebar {
  @include vertical-gradient($btnWarningBackground, $btnWarningBackgroundHighlight);
}


/* Icons
----------------------------------*/

/* states and images */
.ui-icon { width: 16px; height: 16px; background-image: $iconsContent; }
.ui-widget-content .ui-icon {background-image: $iconsContent; }
.ui-widget-header .ui-icon {background-image: $iconsHeader; }
.ui-state-default .ui-icon { background-image: $iconsDefault; }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: $iconsHover; }
.ui-state-active .ui-icon {background-image: $iconsActive; }
.ui-state-highlight .ui-icon {background-image: $iconsHighlight; }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background: $iconsError
  -16px 0 no-repeat !important;
}

.ui-state-highlight .ui-icon, .ui-state-error .ui-icon { margin-top: -1px; }

/* positioning */
.ui-icon-carat-1-e { background-position: -32px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.ui-icon-triangle-1-se { background-position: -48px -16px; }
.ui-icon-triangle-1-s { background-position: -64px -16px; }
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
.ui-icon-triangle-1-w { background-position: -96px -16px; }
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
.ui-icon-extlink { background-position: -32px -80px; }
.ui-icon-pencil { background-position: -64px -112px; }
.ui-icon-wrench { background-position: -176px -112px; }
.ui-icon-minus { background-position: -48px -128px; }
.ui-icon-close { background-position: -248px -546px; }
.ui-icon-closethick { background-position: -96px -128px; }
.ui-icon-alert { background-position: 0 -144px; }
.ui-icon-info { background: url(/images/jqueryui/icon_sprite.png) 0 0 no-repeat !important; }
.ui-icon-check { background-position: -50px -546px; }
.ui-icon-seek-first { background-position: -80px -160px; }
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
.ui-icon-circle-triangle-s { background-position: -182px -480px; }
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }

// flip all the arrows around in RTL
@if $direction == 'rtl' {
  .ui-icon-carat-1-e,
  .ui-icon-triangle-1-ne,
  .ui-icon-triangle-1-e,
  .ui-icon-triangle-1-se,
  .ui-icon-triangle-1-sw,
  .ui-icon-triangle-1-w,
  .ui-icon-triangle-1-nw,
  .ui-icon-triangle-2-n-s,
  .ui-icon-triangle-2-e-w,
  .ui-icon-arrowrefresh-1-w,
  .ui-icon-circle-triangle-e,
  .ui-icon-circle-triangle-w, {
    transform: scale(-1, 1);
  }
}
.ui-icon-radio-off { background: none !important; }
.ui-icon-radio-on {
  background: url(/images/icon-checkmark.svg) 0 50% no-repeat !important;
  background-size: 14px;
}
.ui-icon-sections { background: url(/images/jqueryui/ui-icon-sections.png) 0 0 no-repeat !important; }
.ui-icon-cog { background: url(/images/jqueryui/ui-icon-cog.png) 0 0 no-repeat !important; }

.ui-icon {
  &.ui-icon-check, &.ui-icon-calendar, &.ui-icon-clock, &.ui-icon-close, &.ui-icon-circle-triangle-s {
    background-image: url(/images/blue/canvas-icons-16x16-dkgrey.png)
  }
}
/* Misc visuals
----------------------------------*/

/* Corner radius */
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { border-top-#{direction(left)}-radius: $baseBorderRadius; }
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { border-top-#{direction(right)}-radius: $baseBorderRadius; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { border-bottom-#{direction(left)}-radius: $baseBorderRadius; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-bottom-#{direction(right)}-radius: $baseBorderRadius; }

/* Overlays */
.ui-widget-overlay {
  background: rgba($ic-color-dark, 0.75);
}
.ui-widget-shadow { margin: direction-sides(-8px 0 0 -8px); padding: 8px; background: $bgColorShadow; opacity: $opacityShadow; border-radius: $cornerRadiusShadow; }


//make progressbar blue instead of default header color
.ui-progressbar .ui-widget-header {
  @extend .ui-state-active;
}
