$blue: #27B2D7;

$base-color: #2D2D2D;
$page-bg-color: #191919;
$base-gradient: matte;
$active-color: #444;

$include-default-icons: true;

$theme-name: 'bb10';

// Tabs
$include-top-tabs: false;
$include-tabbar-uis: false;
$tabs-bottom-radius: 0;
$tabs-bottom-icon-size: 1.1em;

// List
$list-bg-color: #2D2D2D ! default;
$list-color: #FFF ! default;
$list-header-bg-color: #F8F8F8;
$list-active-color: #eee;

// Toolbars
$include-toolbar-uis: false;

// Forms
$form-fieldset-radius: 0;

// Buttons
@mixin bb-sencha-buttons {
  // Basic button style
  .x-button {
    @include background-clip(padding-box);
    @if $include-border-radius { @include border-radius($button-radius); }
    @include display-box;
    @include box-align(center);
    @include toolbar-button(#333, $button-gradient);
    min-height: $button-height; // Why was this !important? Breaks small uis - DK
    padding: .3em .6em;
    position: relative;
    overflow: hidden;
    -webkit-user-select: none;
    z-index: 1;

    // Default icon style
    .x-button-icon {
      width: 2.1em;
      height: 2.1em;
      background-repeat: no-repeat;
      background-position: center;
      display: block;

      &.x-icon-mask {
        width: 1.1em;
        height: 1.1em;
        -webkit-mask-size: 1.1em;
      }
    }

    &.x-item-disabled .x-button-label, &.x-item-disabled .x-button-icon {
      opacity: .5;
    }
  }

  .x-button-round {
    @if $include-border-radius { @include border-radius($button-height/2); }
  }

  // Button icon alignment
  .x-iconalign-left, .x-icon-align-right {
    @include box-orient(horizontal);
  }
  .x-iconalign-top, .x-iconalign-bottom {
    @include box-orient(vertical);
  }
  .x-iconalign-bottom, .x-iconalign-right {
    @include box-direction(reverse);
  }
  .x-iconalign-center {
    @include box-pack(center);
  }
  .x-iconalign-left .x-button-label {
    margin-left: $toolbar-spacing * 1.5;
  }
  .x-iconalign-right .x-button-label {
    margin-right: $toolbar-spacing * 1.5;
  }
  .x-iconalign-top .x-button-label {
    margin-top: $toolbar-spacing * 1.5;
  }
  .x-iconalign-bottom .x-button-label {
    margin-bottom: $toolbar-spacing * 1.5;
  }

  // Button labels
  .x-button-label {
    @include box-flex(1);
    @include box-align(center);
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
    font-weight: bold;
    line-height: 1.2em;
    display: block;
    overflow: hidden;
  }

  // Toolbar button styling
  .x-toolbar .x-button {
    margin: 0 .2em;
    padding: .3em .6em;

    .x-button-label {
      font-size: .7em;
    }

    .x-button-label, .x-hasbadge .x-badge {
      line-height: 1.6em;
    }
  }

  .x-button-small, .x-toolbar .x-button-small {
    @if $include-border-radius { @include border-radius(.3em); }
    padding: .2em .4em;
    min-height: 0;

    .x-button-label {
      font-size: .6em;
    }

    .x-button-icon {
      width: .75em;
      height: .75em;

      &.x-icon-mask {
        -webkit-mask-size: .75em;
      }
    }
  }

  // Back/Forward buttons
  $shadow-width: .045em; // Space between tip and its shadow
  $overlap-width: .2em; // how far the mask is clipped

  // $mask-height: $button-height + $button-stroke-weight * 2; // Ugh, this is non-specific... borders?
  $mask-height: $button-height;
  $mask-width: $mask-height/2.23;

  $mask-offset: $button-radius - $overlap-width - $button-stroke-weight + $shadow-width - .01;

  $tip-width: $mask-width - $mask-offset + $shadow-width;

  .x-button-forward, .x-button-back {
    position: relative;
    overflow: visible;
    height: $button-height - 0.1;
    z-index: 1;
    &:before, &:after {
      @include insertion($mask-width, $mask-height, -$button-stroke-weight, auto);
      z-index: 2;
      -webkit-mask: $mask-offset 0 theme_image($theme-name, "tip2_left.png") no-repeat;
      -webkit-mask-size: $mask-width $mask-height;
      overflow: hidden;
    }
  }

  .x-button-back,
  .x-toolbar .x-button-back {
    margin-left: $tip-width - $shadow-width + $toolbar-spacing  - 0.01;
    padding-left: .4em;
    &:before {
      left: - $tip-width;
    }
    &:after {
      left: - $tip-width + $shadow-width;
    }
  }

  .x-button-forward,
  .x-toolbar .x-button-forward {
    margin-right: $tip-width - $shadow-width + $toolbar-spacing;
    padding-right: .4em;
    &:before, &:after {
      -webkit-mask: -$mask-offset 0 theme_image($theme-name, "tip2_right.png") no-repeat;
    }
    &:before {
      right: - $tip-width;
    }
    &:after {
      right: - $tip-width + $shadow-width;
    }
  }

  // Plain buttons automatically use a margin trick to have a
  // wide gradial glow for pressed state.
  .x-button.x-button-plain,
  .x-toolbar .x-button.x-button-plain {
    background: none;
    border: 0 none;
    @if $include-border-radius { @include border-radius(none); }
    min-height: 0;
    text-shadow: none;
    line-height: auto;
    height: 1.9em;
    padding: 0em 0.5em;

    & > * {
      overflow: visible;
    }

    .x-button-icon {
      -webkit-mask-size: $toolbar-icon-size;
      width: $toolbar-icon-size;
      height: $toolbar-icon-size;
    }
  }

  // SegmentedButtons
  .x-segmentedbutton .x-button {
    margin: 0;

    @if $include-border-radius {
      @include border-radius(0);

      &.x-first {
        @include border-left-radius($button-radius);
      }
      &.x-last {
        @include border-right-radius($button-radius);
      }
    }

    &:not(.x-first) {
      border-left: 0;
    }
  }

  // Badges
  $badge-size: 2em !default;
  $badge-radius: .2em !default;
  $badge-bg-color: darken($alert-color, 10%) !default;
  $badge-bg-gradient: $base-gradient !default;

  .x-hasbadge {
    overflow: visible;
    .x-badge {
      @extend .x-button-label;
      @include background-clip(padding-box);
      @if $include-border-radius { @include border-radius($badge-radius); }
      padding: .1em .3em;
      z-index: 2;
      @if $include-button-highlights {
        @include bevel-by-background($badge-bg-color);
        @include box-shadow(rgba(#000, .5) 0 .1em .1em);
      }
      overflow: hidden;
      @include color-by-background($badge-bg-color, $contrast: 50%);
      border: 1px solid darken($badge-bg-color, 10%);
      position: absolute;
      width: auto;
      min-width: $badge-size;
      line-height: 1.2em;
      font-size: .6em;
      right: 0px;
      top: -.2em;
      max-width: 95%;
      @include background-gradient($badge-bg-color, $badge-bg-gradient);
      display: inline-block;
    }
  }

  @if $include-default-icons {
    @include pictos-iconmask('action');
    @include pictos-iconmask('add');
    @include pictos-iconmask('arrow_down');
    @include pictos-iconmask('arrow_left');
    @include pictos-iconmask('arrow_right');
    @include pictos-iconmask('arrow_up');
    @include pictos-iconmask('compose');
    @include pictos-iconmask('delete');
    @include pictos-iconmask('organize');
    @include pictos-iconmask('refresh');
    @include pictos-iconmask('reply');
    @include pictos-iconmask('search');
    @include pictos-iconmask('settings');
    @include pictos-iconmask('star');
    @include pictos-iconmask('trash');
    @include pictos-iconmask('maps');
    @include pictos-iconmask('locate');
    @include pictos-iconmask('home');
  }

  @if $include-button-uis {
    @include sencha-button-ui('action', $active-color);
    @include sencha-button-ui('confirm', desaturate(darken($confirm-color, 10%), 5%));
    @include sencha-button-ui('decline', desaturate(darken($alert-color, 10%), 5%));
  }
}

@import 'sencha-touch/default/all';

// Pictos icons
@mixin pictos-iconmask($name) {
  .x-tab .x-button-icon.#{$name},
  .bb-crosscut-item .x-button-icon.#{$name},
  .x-button .x-button-icon.x-icon-mask.#{$name} {
    -webkit-mask-image: theme_image('default', "pictos/" + $name + ".png");
  }
}

@include sencha-tabs;
@include sencha-indexbar;
@include sencha-list;
@include sencha-toolbar;
@include bb-sencha-buttons;

@include sencha-layout;

@include sencha-panel;

@include sencha-sheet;
@include sencha-picker;

@include sencha-toolbar-forms;
@include sencha-carousel;

@include sencha-list-paging;
@include sencha-list-pullrefresh;
@include sencha-form;
@include sencha-msgbox;
@include sencha-loading-spinner;
@include sencha-draw;
@include sencha-charts;

.x-layout-card-item {
  color: #fff;
}

@if $include-html-style {
  .x-html {
    color: #ddd;
  }
}

body {
  font-family: "Slate Pro", "SlatePro", Arial !important;
}

// Tabs
.x-tabbar {
  background: #121212;
  border-width: 0 !important;
  height: 50px !important;
}

.x-tab {
  height: 50px;
  line-height: .9em;
}

.x-tabbar.x-docked-top .x-tab,
.x-tabbar.x-docked-bottom .x-tab {
  color: #fff;
  padding: 0;
  text-align: center;

  .x-button-icon {
    background: #EAEAEA;
    margin: .5em auto 0;
  }
}

.x-tabbar.x-docked-top {
  @extend .x-tabbar.x-docked-bottom;
  background-image: none !important;

  .x-tab-active {
    background-image: none !important;
  }
}

.x-tabbar.x-docked-bottom {
  background-image: theme_image($theme-name, "tab.png");

  .x-tab {
    border-right: 1px solid #121212;
  }

  .x-tab-active {
    background: #292929;
    background-image: theme_image($theme-name, "tab-active.png");
  }
}

// Lists
.x-list-header {
  font-size: 0.7em !important;
  padding: 0.1em .6em !important;
  color: #2B2B2B !important;
}

.x-list-item-body {
  min-height: 2em !important;
  padding: 0.4em 0.5em !important;
}

.x-list-normal .x-list-item.x-item-selected {
  border-bottom: 0 !important;
}

.x-list-disclosure {
  margin: 0.25em 0.25em 0 0 !important;
}

// Buttons
.x-button-label {
  @include box-flex(1);
  @include box-align(center);
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  font-weight: bold;
  line-height: 1.2em;
  display: block;
  overflow: hidden;
}

.x-hasbadge {
  overflow: visible;

  .x-badge {
    @extend .x-button-label;
    @include background-clip(padding-box);
    padding: .1em .3em;
    z-index: 2;
    overflow: hidden;
    @include color-by-background(#fff, $contrast: 50%);
    position: absolute;
    width: auto;
    min-width: 2em;
    line-height: 1.2em;
    font-size: .6em;
    right: -.2em;
    top: -.2em;
    max-width: 95%;
    background: #000;
    display: inline-block;
  }
}

.bb-crosscut {
  background: #121212;
  position: absolute;
}

.bb-crosscut-item {
  overflow: hidden;
  height: 54px;
  border-bottom: 1px solid #2A2A2A;

  &.x-button-pressing,
  &.x-button-pressed {
    background: $blue;
  }

  &:first-child {
    border-top: 1px solid #2A2A2A;
  }

  .x-button-icon {
    background-repeat: no-repeat;
    background-position: center;
    background: #DDDDDD;
    margin: 11px 18px;
    display: block;

    &.x-icon-mask {
      width: 32px;
      height: 32px;
      -webkit-mask-size: 32px;
    }
  }

  .x-button-label {
    color: #DDDDDD;
    margin: 0;
    text-align: left;
    line-height: 50px;
    font-weight: normal;
    font-size: 24px;
  }

  .x-button-icon,
  .x-button-label {
    
  }
}

// Toolbars
@include sencha-toolbar-ui('dark', darken($toolbar-base-color, 10%));
@include sencha-toolbar-ui('light', $toolbar-base-color);
@include sencha-toolbar-ui('neutral', lighten($toolbar-base-color, 10%));

// Forms
.x-form .x-scroll-container > .x-inner {
  padding: 0;
}

.x-form-fieldset .x-form-fieldset-inner {
  border-width: 1px 0;
}

.x-form .x-scroll-container {
  background: #F9F9F9;
}

.x-form-fieldset-title {
  color: #333333;
}

.x-form-fieldset .x-form-label {
  border-top: 0;
}



.x-field {
  .x-form-label {
    background: transparent;
    padding: 7px 7px 0 7px;

    span {
      font-weight: normal;
      font-size: 16px;
    }
  }

  > .x-component-outer {
    padding: 7px;
  }

  .x-form-field {
    border: 1px solid #ccc;
    @include border-radius(3px);
    @include box-shadow(inset 0 1px 0 #eee);

    &:focus {
      border: 2px solid $blue;
      @include box-shadow(none);
    }
  }
}

.x-field-clearable .x-field-input {
  padding: 0;
}

.x-field-search .x-field-input .x-form-field {
  margin-left: 0;
}

.x-input-search {
  padding-left: 1em;
}

.x-spinner .x-spinner-button {
  padding-top: .4em;
}

.x-toggle {
  float: right;
}

//  .x-toolbar.x-toolbar-neutral .x-toolbar-inner .x-button.x-button-pressing {
//    $mask-radial-glow: lighten($base-color, 25);
//    @include background-image(radial-gradient(fade-out($mask-radial-glow, .3), fade-out($mask-radial-glow, 1) 24px));
//    .x-button-icon.x-button-mask {
//      @include background-gradient(#fff, 'recessed');
//    }
//  }
//}
