/*
 * Copyright (c) 2008-2016 Haulmont.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */

/**
 * The max width of range when menu toggle button caption is not shown
 * @group sidemenu
 */
$cuba-responsive-sidemenu-togglebutton-caption-disappeared-max-width-range: 500px !default;

/**
 * The max width of range when menu toggle button is shown
 * @group sidemenu
 */
$cuba-responsive-sidemenu-togglebutton-appeared-max-width-range: 800px !default;

/**
 * The max width of range when small style side menu is shown
 * @group sidemenu
 */
$cuba-responsive-sidemenu-small-style-max-width-range: 1100px !default;

/**
 * Whether use custom width for side menu, small side menu and toggled side menu
 * @group sidemenu
 */
$cuba-responsive-sidemenu-use-custom-width: false !default;

/**
 * Responsive sidemenu width
 * @group sidemenu
 */
$cuba-responsive-sidemenu-width: auto !default;

/**
 * Responsive side menu width when it is in range between $cuba-responsive-sidemenu-togglebutton-appeared-max-width-range
 * and $cuba-responsive-sidemenu-small-style-max-width-range
 * @group sidemenu
 */
$cuba-responsive-sidemenu-small-width: $v-unit-size * 3 !default;

/**
 * Responsive side menu width when it is opened using a menu toggle button
 * @group sidemenu
 */
$cuba-responsive-sidemenu-toggled-menu-width: $cuba-responsive-sidemenu-small-width !default;

@mixin side-menu-large-icons-style($primary-stylename: c-sidemenu) {
  $bg: $cuba-sidemenu-background-color;

  background-color: $bg;

  .#{$primary-stylename}-title {
    .v-label {
      line-height: 1.2;
      font-size: round($v-font-size--h2 * 0.75);
      font-weight: bold;
    }
    .v-label-undef-w {
      white-space: normal;
    }
  }

  .c-userindicator {
    padding-left: $v-layout-margin-left/2;
    padding-right: $v-layout-margin-right/2;

    .v-label {
      font-size: round($v-font-size * 0.8);
    }
  }

  .c-main-buttons {
    .v-icon {
      font-size: round($v-font-size * 1.5);
    }
    img.v-icon {
      height: round($v-font-size * 1.5);
    }
  }

  & .#{$primary-stylename}-title,
  & .#{$primary-stylename}-wrap > * {
    min-width: $v-unit-size * 3;
    max-width: $v-unit-size * 4;

    @if $cuba-responsive-sidemenu-use-custom-width {
      max-width: $cuba-responsive-sidemenu-small-width;
    }
  }

  .v-ie & {
    max-width: $v-unit-size * 4 + 18px;
    @if $cuba-responsive-sidemenu-use-custom-width {
      max-width: $cuba-responsive-sidemenu-small-width;
    }

    .#{$primary-stylename}-title,
    .#{$primary-stylename}-wrap,
    .#{$primary-stylename}-wrap > * {
      max-width: $v-unit-size * 4 + 18px;

      @if $cuba-responsive-sidemenu-use-custom-width {
        max-width: $cuba-responsive-sidemenu-small-width;
      }
    }
  }

  .#{$primary-stylename}-item-action {
    display: block;
    font-size: round($v-font-size * 1.6);
    line-height: 1;
    padding: round($v-unit-size/3);
    text-align: left;
    border-top: valo-border($color: $bg, $strength: 0.2, $border: first-number($v-border) solid v-tone);

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

    .#{$primary-stylename}-item-caption {
      display: block;
      width: auto;
      margin: .3em 0 0;
      padding: 0;
      font-size: round($v-font-size * 0.8);
      line-height: 1.3;
    }

    .v-icon {
      margin: 0;
    }

    span.v-icon {
      opacity: 0.8;
    }
  }

  .#{$primary-stylename}-item-header {
    margin: round($v-unit-size/4) 0 0;
    padding: round($v-unit-size/5) round($v-unit-size/1.5) round($v-unit-size/5) round($v-unit-size/4);
    border: none;
    overflow: hidden;
    background: darken($bg, 6%);
    box-shadow: valo-bevel-and-shadow($shadow: $v-shadow);

    .#{$primary-stylename}-item-wrap {
      line-height: 1.2;
    }

    .#{$primary-stylename}-item-caption {
      font-size: round($v-font-size * 0.9);
      text-overflow: ellipsis;
    }

    .#{$primary-stylename}-item-badge {
      right: round($v-unit-size/4);
    }

    + .#{$primary-stylename}-item {
      border-top: none;
    }
  }

  .#{$primary-stylename}-item-action.#{$primary-stylename}-item-selected {
    background: if(is-dark-color($bg), darken($bg, 3%), lighten($bg, 5%));

    .v-icon {
      opacity: 1;
    }

    .#{$primary-stylename}-item-badge {
      border-color: darken($bg, 3%);
    }
  }

  .#{$primary-stylename}-item-action .#{$primary-stylename}-item-badge {
    padding-left: round($v-unit-size/9);
    padding-right: round($v-unit-size/9);
    top: round($v-unit-size/5);
    right: round($v-unit-size/5);
    border: 2px solid $bg;
  }
}

/**
 * The sidemenu background color.
 * @group sidemenu
 */
$cuba-sidemenu-background-color: $valo-menu-background-color !default;
/**
 * The sidemenu items font weight.
 * @group sidemenu
 */
$cuba-sidemenu-item-font-weight: $v-font-weight + 100 !default;
/**
 * Defines whether sidemenu items should have delimiters.
 * @group sidemenu
 */
$cuba-sidemenu-separate-items: true !default;
/**
 * The sidemenu timezone font weight.
 * @group sidemenu
 */
$cuba-sidemenu-timezone-font-weight: $v-font-weight !default;
/**
 * The sidemenu title font size.
 * @group sidemenu
 */
$cuba-sidemenu-title-font-size: $v-font-size--h2 !default;
/**
 * The sidemenu title font weight.
 * @group sidemenu
 */
$cuba-sidemenu-title-font-weight: $v-font-weight !default;
/**
 * Defines whether sidemenu title should have gradient.
 * @group sidemenu
 */
$cuba-sidemenu-title-gradient: true !default;
/**
 * Defines sidemenu title background color if $cuba-sidemenu-title-gradient is false
 * @group sidemenu
 */
$cuba-sidemenu-title-background-color: if(is-dark-color($cuba-sidemenu-background-color), lighten($cuba-sidemenu-background-color, 5%), darken($cuba-sidemenu-background-color, 5%)) !default;
/**
 * The top offset of mobile buttons and show/hide toggle button.
 * @group sidemenu
 */
$cuba-sidemenu-top-offset: floor(($v-unit-size - $v-unit-size * 0.8) / 2);
/**
 * The reserved height for mobile buttons and show/hide toggle button in mobile mode.
 * @group sidemenu
 */
$cuba-sidemenu-top-height: $v-unit-size + 2 * $cuba-sidemenu-top-offset;
/**
 * The sidemenu user indicator font weight.
 * @group sidemenu
 */
$cuba-sidemenu-userindicator-font-weight: $v-font-weight !default;

@mixin halo-cuba-sidemenu($primary-stylename: c-sidemenu) {
  $bg: $v-app-background-color;

  .#{$primary-stylename}-user {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: valo-font-color($bg, 0.33);

    &:hover {
      color: valo-font-color($bg, 1);
    }
  }

  .#{$primary-stylename}-layout .c-main-tabsheet > .v-tabsheet-tabcontainer {
    border: 0;
  }

  .#{$primary-stylename}-wrap {
    font-size: 0;

    & > * {
      font-size: $v-font-size;
    }
  }

  .#{$primary-stylename}-title {
    $font-color: valo-font-color($cuba-sidemenu-title-background-color, 0.9);
    @if $cuba-sidemenu-title-gradient {
      @include valo-gradient($color: $v-selection-color);
      border-bottom: valo-border($color: $v-selection-color);
      $font-color: valo-font-color($v-selection-color, 0.9);
    } @else {
      background: $cuba-sidemenu-title-background-color;
    }

    color: $font-color;
    font-size: $cuba-sidemenu-title-font-size;
    line-height: $cuba-sidemenu-title-font-size * 1.4;
    font-weight: $cuba-sidemenu-title-font-weight;

    text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $v-selection-color);
    padding: round($v-unit-size/3) round($v-unit-size/2);

    @include box-shadow(valo-bevel-and-shadow($shadow: $v-shadow));

    text-align: center;
    width: 100%;
  }

  .#{$primary-stylename} {
    overflow-x: hidden;
    outline: 0;

    color: valo-font-color($bg, 0.7);
    font-size: round($v-font-size * 0.9);
    line-height: round($v-unit-size * 0.8);
    white-space: nowrap;

    font-size: $v-font-size;
  }

  .#{$primary-stylename}.v-has-height {
    overflow-y: auto;
  }

  .#{$primary-stylename}.v-has-width {
    .#{$primary-stylename}-item-caption {
      max-width: initial;
    }
  }

  .#{$primary-stylename}-item {
    @include valo-menu-item-style($bg);

    span.v-icon {
      -webkit-mask-image: none;
      mask-image: none;
    }

    .#{$primary-stylename}-item-caption {
      width: 100%;
    }

    .#{$primary-stylename}-item-badge {
      position: absolute;
      right: round($v-unit-size/2);
      top: ($v-unit-size - round($v-font-size * 0.9) - round($v-unit-size/9) * 2) / 2;
    }

    &:hover {
      color: valo-font-color($v-selection-color, 0.1);
    }

    .v-icon {
      font-size: 1.2em;
    }
  }

  .#{$primary-stylename}-item-thumbnail,
  .#{$primary-stylename}-item-thumbnail-icon {
    display: none;
    vertical-align: middle;
  }

  .#{$primary-stylename}-item-thumbnail-icon {
    font-family: FontAwesome;
    font-size: 1.2em;
    font-weight: 400;
  }

  .#{$primary-stylename}-item-header {
    color: valo-font-color($bg, 0.7);
    margin: round($v-unit-size/5) 0;

    @if $cuba-sidemenu-separate-items {
      border-bottom: valo-border(
              $color: $bg,
              $strength: 0.5,
              $border: first-number($v-border) solid v-tone);
    } @else {
      border-bottom: none;
    }

    .#{$primary-stylename}-item-badge {
      background: transparent;
      color: mix(valo-font-color($bg), $v-selection-color);
    }
  }

  .#{$primary-stylename}-item-wrap {
    cursor: pointer;
    display: block;
    line-height: $v-unit-size;

    .v-icon {
      margin-right: round($v-unit-size / 2);
      min-width: 1em;
    }
  }

  .#{$primary-stylename}-submenu {
    overflow:hidden;
    max-height:0;
    opacity: 0;

    .#{$primary-stylename}-item-header {
      padding-left: 0;
      margin-left: round($v-unit-size / 2);
    }

    & > * {
      margin-left: round($v-unit-size / 2);
    }
  }

  .#{$primary-stylename}-submenu-open {
    max-height: 2000px;
    opacity: 1;

    @if $v-animations-enabled {
      @include transition (max-height 900ms ease-in-out);
    }
  }

  .#{$primary-stylename}-item-focused {
    color: valo-font-color($v-selection-color, 0.1);

    .v-ch & span.v-icon {
      color: valo-font-color($v-selection-color, 0.1);
    }
  }

  .#{$primary-stylename}-item-selected {
    $active-color: $v-selection-color;

    color: valo-font-color($bg, 1);
    background: if(is-dark-color($bg), darken($bg, 3%), lighten($bg, 5%));

    .v-icon {
      color: $active-color;
    }

    .#{$primary-stylename}-item-badge {
      @include valo-badge-style($states: active, $active-color: $active-color);
    }
  }

  .#{$primary-stylename}-toggle,
  .#{$primary-stylename}-mobile-buttons {
    display: none;
    position: fixed;
    z-index: 200;
  }

  .#{$primary-stylename}-toggle {
    top: $cuba-sidemenu-top-offset;
    left: $cuba-sidemenu-top-offset;
    min-width: 0;
  }

  .#{$primary-stylename}-mobile-buttons {
    top: $cuba-sidemenu-top-offset;
    right: 0;

    .v-button {
      color: valo-font-color($v-selection-color, 1);
    }
  }

  .#{$primary-stylename}-responsive {
    .#{$primary-stylename}-panel {
      padding-bottom: $v-unit-size;
      overflow: auto;
      height: 100%;
    }

    .c-app-icon {
      margin: $v-layout-spacing-vertical auto;
    }

    .c-userindicator > .v-label {
      overflow: hidden;
      word-wrap: normal;
      white-space: nowrap;
    }

    .c-userindicator > .v-label,
    .c-app-icon,
    .c-welcome-text,
    .c-user-timezone-label,
    .c-main-buttons {
      text-align: center;
    }

    .#{$primary-stylename}-panel > .#{$primary-stylename}-title,
    .#{$primary-stylename}-panel > .#{$primary-stylename}-wrap {
      display: block;
    }

    .#{$primary-stylename}-wrap {
      & > .#{$primary-stylename},
      & > .c-app-icon,
      & > .c-userindicator,
      & > .c-user-timezone-label,
      & > .c-ftsfield,
      & > .c-main-buttons {
        display: block;
      }
    }

    @include width-range($min: $cuba-responsive-sidemenu-togglebutton-appeared-max-width-range + 1px, $max: $cuba-responsive-sidemenu-small-style-max-width-range) {
      .#{$primary-stylename}-panel {
        @include side-menu-large-icons-style;

        @if $cuba-responsive-sidemenu-use-custom-width {
          width: $cuba-responsive-sidemenu-small-width;
        }
      }
    }

    @include width-range($max: $cuba-responsive-sidemenu-togglebutton-appeared-max-width-range) {
      padding-top: $cuba-sidemenu-top-height;

      .#{$primary-stylename}-panel {
        overflow: visible;
        width: 0;
        border-right: 0;
      }

      .#{$primary-stylename}-toggle,
      .#{$primary-stylename}-mobile-buttons {
        display: inline-block;
      }

      .c-main-buttons {
        display: none;
      }

      .#{$primary-stylename}-title {
        position: fixed;
        z-index: 100;
        top: 0;
        left: 0;
        right: 0;
        height: $cuba-sidemenu-top-height !important;
        padding-top: 0;
        padding-bottom: 0;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;

        .v-label {
          line-height: $v-unit-size;
        }

        @if ($cuba-sidemenu-title-gradient == false) {
          background: $cuba-sidemenu-title-background-color;
        }
      }

      .#{$primary-stylename}-wrap {
        @include valo-menu-style($bg: $cuba-sidemenu-background-color);

        position: fixed;
        z-index: 9000;
        top: $cuba-sidemenu-top-height;
        bottom: 0;
        height: auto;
        max-width: 100%;
        overflow: auto;
        padding: round($v-unit-size / 2) 0;
        @include transform(translatex(-100%));

        @if $v-animations-enabled {
          @include transition(transform 300ms);
        }

        @if $cuba-responsive-sidemenu-use-custom-width {
          width: $cuba-responsive-sidemenu-toggled-menu-width;
        }

        .v-edge & {
          @include transition(none);
        }
      }

      .#{$primary-stylename}-panel.#{$primary-stylename}-open .#{$primary-stylename}-wrap {
        @include transform(translatex(0%));
      }
    }

    @include width-range($max: $cuba-responsive-sidemenu-togglebutton-caption-disappeared-max-width-range) {
      .#{$primary-stylename}-toggle .v-button-caption {
        display: none;
      }
    }

    @if $cuba-responsive-sidemenu-use-custom-width {
      .#{$primary-stylename}-panel {
        width: $cuba-responsive-sidemenu-width;

        .#{$primary-stylename}-item [class*="caption"] {
          max-width: initial;
        }
      }
    }
  }

  .#{$primary-stylename}-panel {
    @include valo-menu-style($cuba-sidemenu-background-color);

    $bg: $cuba-sidemenu-background-color;

    .#{$primary-stylename} {
      background: transparent none;
    }

    .#{$primary-stylename}.v-has-width .#{$primary-stylename}-item-caption {
      max-width: initial;
      width: 100%;
    }

    .c-userindicator {
      font-weight: $cuba-sidemenu-userindicator-font-weight;
    }

    .c-ftsfield-button,
    .c-newwindow-button,
    .c-logout-button {
      color: valo-font-color($bg, 0.5);

      &:hover {
        color: valo-font-color($bg, 1);
      }
    }

    .c-user-timezone-label {
      color: valo-font-color($bg, 0.5);
      font-weight: $cuba-sidemenu-timezone-font-weight;
    }

    .c-app-icon {
      height: 64px;
    }

    .v-button.c-ftsfield-button,
    .v-button.c-logout-button,
    .v-button.c-newwindow-button {
      height: $v-unit-size;
      padding: ceil($v-unit-size/10) ceil($v-unit-size/5);
    }

    .c-ftsfield {
      padding-left: $v-layout-margin-left;
      padding-right: $v-layout-margin-right + $v-unit-size;
      padding-bottom: $v-layout-margin-bottom;
    }

    .#{$primary-stylename} {
      color: valo-font-color($bg, 0.5);
    }

    .#{$primary-stylename}-item {
      @include valo-menu-item-style;

      span.v-icon {
        mask-image: none;
        -webkit-mask-image: none;
      }

      font-weight: $cuba-sidemenu-item-font-weight;

      &:hover {
        color: valo-font-color($bg, 1);
      }
    }

    .#{$primary-stylename}-item-header {
      color: valo-font-color($bg, 0.5);

      @if $cuba-sidemenu-separate-items {
        border-bottom: valo-border(
                $color: $bg,
                $strength: 0.5,
                $border: first-number($v-border) solid v-tone);
      } @else {
        border-bottom: none;
      }
    }

    .#{$primary-stylename}-item-focused {
      color: valo-font-color($bg, 1);

      .v-ch & span.v-icon {
        color: valo-font-color($bg, 1);
      }
    }
  }
}