//
// @description :
// @author      : Adarsh Pastakia
// @copyright   : 2017
// @license     : MIT

.ui-toolbar {
  z-index         : 5;
  background-color: $toolbar-bg;
  border          : 1px solid rgba($base-border-color, .25);
  border-width    : 1px 0;
  @extend .ui-pad-all;
  @include flex-auto();
  @include flexbox($direction: row, $align:center, $justify:flex-end, $wrap:false);

  &.ui-start {
    justify-content: flex-start;
  }

  &.ui-compact {
    @extend .ui-pad-all.ui-compact;
  }

  &:first-child {
    border-top: none;
  }

  &:last-child {
    border-bottom: none;
  }

  .ui-divider {
    display   : block;
    margin    : 0.2rem;
    border    : {
      left : 1px solid $dark;
      right: 1px solid $light;
    }
    align-self: stretch;
    @include transform(scaleX(.5));
  }

  > .ui-input-wrapper,
  > .ui-input-group {
    margin: 0 0.25em;
  }

  .ui-input-wrapper.ui-spring {
    width: 8em !important;
    @include transition(width 0.5s);

    &.ui-focus {
      width: 24em !important;
    }
  }

  > .ui-button,
  > .ui-button-group {
    margin: 0 0.2rem;
  }
}
@include toolbar-theme(dark, lighten($dark,5%));
@include toolbar-theme(muted, lighten($muted,15%));
@include toolbar-theme(primary, lighten($primary,5%));
@include toolbar-theme(secondary, lighten($secondary,5%));
@include toolbar-theme(info, lighten($info,5%));
@include toolbar-theme(danger, lighten($danger,5%));
@include toolbar-theme(success, lighten($success,5%));
@include toolbar-theme(warning, lighten($warning,5%));

.ui-statsbar {
  z-index         : 5;
  position        : relative;
  background-color: $statsbar-bg;
  border          : 1px solid rgba($base-border-color, .25);
  border-width    : 1px 0;
  @include flex-auto();
  @include flexbox($direction: row, $align:stretch, $justify:flex-start, $wrap:false);

  &:first-child {
    border-top: none;
  }

  &:last-child {
    border-bottom: none;
  }

  &.ui-small {
    font-size: 0.8em;
  }

  .ui-stat {
    padding: 0.25em 0.5em;
    @include flex(1 0 1em);
    @include flexbox($direction: row, $justify:center, $align:center, $wrap:false);

    &:not(:first-child) {
      @include border(start, 1px solid rgba($base-border-color, .5));
    }

    &.ui-icon-end {
      .ui-icon {
        order : 1;
        margin: 0;
        @include margin(start, 0.5em);
      }

      > div {
        order: 0;
      }
    }

    .ui-icon {
      font-size : 2em;
      text-align: center;
      margin    : 0;
      @include margin(end, 0.5em);
    }

    .ui-stat-value {
      line-height: 1;
      font-size  : 1.25em;
      text-align : center;
      font-weight: 600;
    }

    .ui-stat-label {
      color      : $muted;
      font-size  : 0.8em;
      text-align : center;
      font-weight: 600;
    }
  }

  &:not(.ui-vertical) {
    &.ui-icon-top {
      .ui-stat {
        flex-wrap: wrap;
      }

      .ui-stat > .ui-icon {
        margin: 0 0 0.5em;
      }

      .ui-stat > div {
        @include flex(1 1 100%);
      }
    }

    &.ui-icon-end {
      .ui-stat .ui-icon {
        order : 1;
        margin: 0;
        @include margin(start, 0.5em);
      }

      .ui-stat > div {
        order: 0;
      }
    }
  }

  &.ui-vertical {
    overflow      : auto;
    flex-direction: column;

    &:first-child {
      @include border(end, 1px solid rgba($base-border-color, .5));
    }

    &:last-child {
      @include border(start, 1px solid rgba($base-border-color, .5));
    }

    .ui-stat {
      max-width     : 5em;
      border        : none;
      flex-direction: column;

      &:not(:first-child) {
        border-top: 1px solid rgba($base-border-color, .5);
      }

      .ui-icon {
        margin: 0 0 0.5em;
      }

      .ui-stat-value {
        font-size: 1.25em;
      }

      .ui-stat-label {
        font-size: 0.8em;
      }
    }
  }
}
@include statsbar-theme(bg-dark, $white, $dark);
@include statsbar-theme(bg-muted, $white, $muted);
@include statsbar-theme(bg-primary, $white, lighten($primary,5%));
@include statsbar-theme(bg-secondary, $white, lighten($secondary,5%));
@include statsbar-theme(bg-info, $white, lighten($info,5%));
@include statsbar-theme(bg-danger, $white, lighten($danger,5%));
@include statsbar-theme(bg-success, $white, lighten($success,5%));
@include statsbar-theme(bg-warning, $white, lighten($warning,5%));
@include statsbar-theme(dark, $dark);
@include statsbar-theme(muted, $muted);
@include statsbar-theme(primary, lighten($primary,5%));
@include statsbar-theme(secondary, lighten($secondary,5%));
@include statsbar-theme(info, lighten($info,5%));
@include statsbar-theme(danger, lighten($danger,5%));
@include statsbar-theme(success, lighten($success,5%));
@include statsbar-theme(warning, lighten($warning,5%));