@import "../common/colors";
@import "../common/mixins";
@import "../common/media_querys";

/// <reference path="../common/colors" />
/// <reference path="../common/defaults" />
/// <reference path="../common/media_querys" />

/* core-bar */
$color-app-bar: $color-primary !default;
$b-app-bar-box-shadow: true !default;
$bm-color-bg: $color-primary !default;
$bm-height: 56px !default;
$bm-native-height: 28px !default;
$bm-hover-color-bg: $color-primary-800 !default;
$bm-mobile-top-padding: 10px !default;

core-bar {
  height: $bm-height + $bm-native-height;
  width: 100%;
  z-index: 20;
}

.core-bar {

  .core-bar-bg
  {
    z-index: -1;
    position: fixed;
    height: 0px;
    display: block;
    width: 100%;
    top: 0;

    -webkit-transition: all 1s cubic-bezier(1.000, 0.010, 0.625, 1.000);
    transition: all 1s cubic-bezier(1.000, 0.010, 0.625, 1.000); /* custom */

    &.visible
    {
      height: 340px;
    }
  }

  .core-bar-native{
    height: $bm-native-height;
    z-index: 2;
    -webkit-app-region: drag;
  }


  &.color-transparent {
    background: rgba(0, 0, 0, 0.2);
    .core-bar-item {
      &:hover {
        background: rgba(255, 255, 255, 0.2);;
      }
    }

  }

  ////prepare animation
  //-webkit-transition: all 0.5s cubic-bezier(1.000, 0.010, 0.625, 1.000);
  //-moz-transition: all 0.5s cubic-bezier(1.000, 0.010, 0.625, 1.000);
  //-o-transition: all 0.5s cubic-bezier(1.000, 0.010, 0.625, 1.000);
  //transition: all 0.5s cubic-bezier(1.000, 0.010, 0.625, 1.000); /* custom */
  //
  ////initial transfom
  //-webkit-transform: translate3d(0, - ($bm-height + $bm-native-height), 0);
  //-ms-transform: translate3d(0, - ($bm-height + $bm-native-height), 0);
  //-moz-transform: translate3d(0, - ($bm-height + $bm-native-height), 0);
  //-o-transform: translate3d(0, - ($bm-height + $bm-native-height), 0);
  //transform: translate3d(0, - ($bm-height + $bm-native-height), 0);

  &.hasDropShadow {
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  }

  .core-bar-content {
    //overflow: hidden;
    height: 100%;
    width: 100%;
    height: $bm-height;

    -webkit-app-region: no-drag;

    z-index: 3;
  }

  &.hide {
  }



  &.visible {

    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  .core-bar-item {

    height: $bm-height;
    position: relative;
    // @media #{$medium-up} {
    &:hover {
      cursor: pointer;

      i:before {
        cursor: pointer;
        //color: $color-primary !important;
      }

    }

    &:active {
      /* background-color: rgba(0, 0, 0, 0.10);*/
    }

    &.core-bar-item-size-sm {
      height: 30px;
      width: 30px;
    }
    i {

      &[class*=icon] {
        line-height: 50px;
        width: 60px;
        z-index: 1;

        &:before {
          vertical-align: middle;
        }
      }

      &[class*=status] {
        position: absolute;
        top: 10px;
        left: 4px;
        width: 10px;
        height: 10px;
        border: solid 0 transparent;
        border-radius: 100%;
        z-index: 2;
        display: none;

        &.show {
          display: block;
        }
      }
    }
  }

}

.core-foot-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  max-height: 50px;
  z-index: 20;
  -webkit-transform: translate3d(0, 50px, 0);
  -moz-transform: translate3d(0, 50px, 0);
  -ms-transform: translate3d(0, 50px, 0);
  -o-transform: translate3d(0, 50px, 0);
  transform: translate3d(0, 50px, 0);
}

/* top bar and foot bar */

.core-bar-menu-container {

  > .core-bar-menu {
    list-style-type: none;
    margin: 0;
    /*  core-bar-menu-item */
    .core-bar-menu-item {
      color: transparent;
      cursor: pointer;
      line-height: 24px;
      padding: 16px;
      height: 56px;

      &:hover {
        background: $color-accent;
        color: #fff;
        > [class *='icon']:before {
          color: #fff !important;
        }
      }
      /*[class|='icon']*/
      span {
        display: inline-block;
        margin-left: 12px;
      }
    }
  }
}