/**
 * Creates a visual theme for a Toolbar.
 * @param {String} $ui
 * The name of the UI
 *
 * @param {color} [$background-color=$toolbar-background-color]
 * The background color of the toolbar
 *
 * @param {string/list} [$background-gradient=$toolbar-background-gradient]
 * The background gradient of the toolbar
 *
 * @param {color} [$border-color=$toolbar-border-color]
 * The border color of the toolbar
 *
 * @param {number} [$border-width=$toolbar-border-width]
 * The border-width of the toolbar
 *
 * @param {string} [$scroller-cursor=$toolbar-scroller-cursor]
 * The cursor of Toolbar scrollers
 *
 * @param {string} [$scroller-cursor-disabled=$toolbar-scroller-cursor-disabled]
 * The cursor of disabled Toolbar scrollers
 *
 * @param {number} [$scroller-opacity-disabled=$toolbar-scroller-opacity-disabled]
 * The opacity of disabled Toolbar scrollers
 *
 * @param {string} [$tool-background-image=$toolbar-tool-background-image]
 * The sprite to use for {@link Ext.panel.Tool Tools} on a Toolbar
 *
 * @member Ext.toolbar.Toolbar
 */
@mixin extjs-toolbar-ui(
$ui,

$background-color: $toolbar-background-color,
$background-gradient: $toolbar-background-gradient,

$border-color: $toolbar-border-color,
$border-width: $toolbar-border-width,
$scroller-cursor: $toolbar-scroller-cursor,
$scroller-cursor-disabled: $toolbar-scroller-cursor-disabled,
$scroller-opacity-disabled: $toolbar-scroller-opacity-disabled,
$tool-background-image: $toolbar-tool-background-image
) {
  .#{$prefix}toolbar-#{$ui} {
    border-color: $border-color;
    border-width: $border-width;

    @include background-gradient($background-color, $background-gradient);

    .#{$prefix}box-scroller {
      cursor: $scroller-cursor;
    }

    .#{$prefix}box-scroller-disabled {
      @if $scroller-opacity-disabled != 1 {
        @include opacity($scroller-opacity-disabled);
      }
      @if not is-null($scroller-cursor-disabled) {
        cursor: $scroller-cursor-disabled;
      }
    }

    @if $include-ext-panel-tool {
      .#{$prefix}tool-img {
        @if not is-null($toolbar-tool-background-image) {
          background-image: theme-background-image($toolbar-tool-background-image);
        }
        @if is-null($background-gradient) {
          // EXTJSIV-8846: partially transparent png images do not display correctly
          // in winXP/IE8m when the image element has a transparent background.
          // to fix this, we give the element the same background-color as the toolbar.
          background-color: $background-color;
        }
      }
    }
  }

  @if $include-slicer-gradient and not is-null($background-gradient) {
    .#{$prefix}nlg {
      .#{$prefix}toolbar-#{$ui} {
        background-image: slicer-background-image(toolbar-#{$ui}, 'toolbar/toolbar-#{$ui}-bg') !important;
        background-repeat: repeat-x;
      }
    }
    $stretch: slicer-background-stretch(toolbar-#{$ui}, bottom);
  }

  @include x-slicer(toolbar-#{$ui});
}

.#{$prefix}toolbar {
  font-size: $toolbar-font-size;
  border-style: $toolbar-border-style;
  padding: $toolbar-vertical-spacing 0 $toolbar-vertical-spacing $toolbar-horizontal-spacing;
}

// Item padding
.#{$prefix}toolbar-item {
  margin: 0 $toolbar-horizontal-spacing 0 0;
}


@if $include-rtl {
  .#{$prefix}rtl.#{$prefix}toolbar {
    padding: $toolbar-vertical-spacing $toolbar-horizontal-spacing $toolbar-vertical-spacing 0;
  }

  .#{$prefix}rtl.#{$prefix}toolbar-item {
    margin: 0 0 0 $toolbar-horizontal-spacing;
  }
}

.#{$prefix}toolbar-text {
  margin: $toolbar-text-margin;
  color: $toolbar-text-color;
  line-height: $toolbar-text-line-height;
  font-family: $toolbar-text-font-family;
  font-size: $toolbar-text-font-size;
  font-weight: $toolbar-text-font-weight;
}

.#{$prefix}toolbar-separator-horizontal {
  margin: $toolbar-separator-horizontal-margin;
  height: $toolbar-separator-horizontal-height;
  border-style: $toolbar-separator-horizontal-border-style;
  border-width: $toolbar-separator-horizontal-border-width;
  border-left-color: $toolbar-separator-color;
  border-right-color: $toolbar-separator-highlight-color;
}

.#{$prefix}toolbar-footer {
  background: $toolbar-footer-background-color;
  border: $toolbar-footer-border-width;
  margin: $toolbar-footer-margin;

  padding: $toolbar-footer-vertical-spacing 0 $toolbar-footer-vertical-spacing $toolbar-footer-horizontal-spacing;

  .#{$prefix}toolbar-item {
    margin: 0 $toolbar-footer-horizontal-spacing 0 0;
  }
}

.#{$prefix}toolbar-spacer {
  width: $toolbar-spacer-width;
}

// Background for overflow button inserted by the Menu box overflow handler within a toolbar
.#{$prefix}toolbar-more-icon {
  background-image: theme-background-image('toolbar/more') !important;
  background-position: center center !important;
  background-repeat: no-repeat;
}

@if $include-toolbar-default-ui {
  @include extjs-toolbar-ui(
  $ui: 'default'
  );
}

.#{$prefix}toolbar-scroll-left {
  width: $toolbar-scroller-width;
  height: $toolbar-scroller-height;
  padding: $toolbar-scroller-padding;
  border-style: solid;
  border-color: $toolbar-scroller-border-color;
  border-width: $toolbar-scroller-border-width;
  margin-top: $toolbar-scroller-margin-top;

  @include fa-icon($toolbar-scroller-fa-icon-left);
  font-size: 16px;
  line-height: 16px;
  color: $gray-light;
}

.#{$prefix}toolbar-scroll-right {
  width: $toolbar-scroller-width;
  height: $toolbar-scroller-height;
  padding: $toolbar-scroller-padding;
  border-style: solid;
  border-color: $toolbar-scroller-border-color;
  border-width: $toolbar-scroller-border-width;
  margin-top: $toolbar-scroller-margin-top;

  @include fa-icon($toolbar-scroller-fa-icon-right);
  font-size: 16px;
  line-height: 16px;
  color: $gray-light;
}

.#{$prefix}toolbar-scroll-left-hover,
.#{$prefix}toolbar-scroll-right-hover {
  color: $gray;
}

.#{$prefix}toolbar-scroll-left-pressed,
.#{$prefix}toolbar-scroll-right-pressed {
  color: $gray-dark;
}

.#{$prefix}toolbar-scroll-left.#{$prefix}box-scroller-disabled,
.#{$prefix}toolbar-scroll-right.#{$prefix}box-scroller-disabled {
  color: transparent;
}

.#{$prefix}toolbar .#{$prefix}box-menu-after {
  margin: 0 $toolbar-horizontal-spacing;
}

.#{$prefix}toolbar-vertical {
  padding: $toolbar-vertical-spacing $toolbar-horizontal-spacing 0 $toolbar-horizontal-spacing;

  .#{$prefix}toolbar-item {
    margin: 0 0 $toolbar-vertical-spacing 0;
  }

  .#{$prefix}toolbar-text {
    margin: rotate90($toolbar-text-margin);
  }

  .#{$prefix}toolbar-separator-vertical {
    margin: $toolbar-separator-vertical-margin;
    border-style: $toolbar-separator-vertical-border-style;
    border-width: $toolbar-separator-vertical-border-width;
    border-top-color: $toolbar-separator-color;
    border-bottom-color: $toolbar-separator-highlight-color;
  }

  .#{$prefix}box-menu-after {
    margin: $toolbar-vertical-spacing 0;
  }
}

@if $include-rtl {
  .#{$prefix}rtl.#{$prefix}toolbar-vertical {
    padding: $toolbar-vertical-spacing $toolbar-horizontal-spacing 0 $toolbar-horizontal-spacing;
  }
}
