/*
 * 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 bottom padding of main menu bar.
 * @group menubar
 */
$cuba-app-menubar-padding-bottom: round($v-unit-size/8) !default;
/**
 * The top padding of main menu bar.
 * @group menubar
 */
$cuba-app-menubar-padding-top: round($v-unit-size/8) !default;
/**
 * The font weight of main tabsheet selected tab.
 * @group maintabsheet
 */
$cuba-maintabsheet-selected-tab-font-weight: $v-font-weight !default;
/**
 * The background color of the main tabsheet tab container.
 * @group maintabsheet
 */
$cuba-maintabsheet-tabcontainer-background-color: $v-background-color !default;
/**
 * The border radius of main tabsheet items.
 * @group maintabsheet
 */
$cuba-maintabsheet-tabs-border-radius: $v-border-radius !default;
/**
 * INTERNAL
 * The left border width of main tabsheet tabs.
 * @group maintabsheet
 */
$cuba-maintabsheet-tab-border-left-width: 1px !default;
/**
 * INTERNAL
 * The top border width of main tabsheet tabs.
 * @group maintabsheet
 */
$cuba-maintabsheet-tab-border-top-width: 1px !default;
/**
 * The margin (distance) between tabs.
 * @group maintabsheet
 */
$cuba-maintabsheet-tab-margin-left: ceil($v-unit-size/10) !default;
/**
 * INTERNAL
 * The side padding of tabbar.
 * @group maintabsheet
 */
$cuba-maintabsheet-tabbar-side-padding: 0 round($v-unit-size/4) !default;
/**
 * The top padding between tabcontainer and tabs.
 * @group maintabsheet
 */
$cuba-maintabsheet-top-padding: round($v-unit-size/6) !default;
/**
 * The height of main menu bar.
 * @group menubar
 */
$cuba-menubar-height: $v-unit-size !default;
/**
 * The line height of main menu bar.
 * @group menubar
 */
$cuba-menubar-lineheight: $cuba-menubar-height - 2px !default;
/**
 * Defines whether SideMenu layout is collapsible
 * @group sidemenu
 */
$cuba-sidemenu-layout-collapse-enabled: true !default;
/**
 * The width of collapsed SideMenu panel.
 * @group sidemenu
 */
$cuba-sidemenu-layout-collapsed-width: 40px !default;
/**
 * The width of expanded SideMenu panel.
 * @group sidemenu
 */
$cuba-sidemenu-layout-expanded-width: 250px !default;
/**
 * The time of SideMenu panel animation in seconds.
 * @group sidemenu
 */
$cuba-sidemenu-layout-collapse-animation-time: .4s !default;

/**
 * Defines first submenu background color when SideMenu is placed into a side menu panel.
 * @group sidemenu
 */
$cuba-sidemenu-submenu-background-color: $cuba-sidemenu-background-color !default;

// Application Window styles
@mixin cuba-application-window {
  @include cuba-sidemenu-layout-collapsible();

  .v-tabsheet.c-main-tabsheet {
    & > .v-tabsheet-tabcontainer {
      padding-top: round($v-unit-size/6);
    }
  }

  .v-tabsheet.c-main-tabsheet.framed.padded-tabbar > .v-tabsheet-tabcontainer {
    background-color: $cuba-maintabsheet-tabcontainer-background-color;
    padding-top: $cuba-maintabsheet-top-padding;

    & > .v-tabsheet-tabs {
      padding: $cuba-maintabsheet-tabbar-side-padding;
    }

    & .v-tabsheet-tabitem .v-caption {
      $br: $cuba-maintabsheet-tabs-border-radius;
      border-radius: $br $br 0 0;
      border-left-width: $cuba-maintabsheet-tab-border-left-width;
      border-top-width: $cuba-maintabsheet-tab-border-top-width;
      margin-left: $cuba-maintabsheet-tab-margin-left;
    }

    & .v-tabsheet-tabitem-selected .v-caption {
      font-weight: $cuba-maintabsheet-selected-tab-font-weight;
    }
  }

  .v-tabsheet.c-main-tabsheet > .v-tabsheet-tabcontainer .v-tabsheet-caption-close {
    top: round($v-unit-size/2 - $v-font-size/2) - first-number($v-border);
  }

  .v-tabsheet.c-main-tabsheet > .v-tabsheet-content {
    border-right-width: 0;
    border-left-width: 0;
    border-bottom-width: 0;
  }

  .c-app-icon {
    height: 24px;

    img {
      @include box-defaults;
      height: 100%;
    }
  }

  .c-app-menubar {
    @include valo-border-with-gradient();
    @include valo-gradient();
    @include box-shadow(valo-bevel-and-shadow($bevel: $v-bevel, $shadow: $v-shadow, $background-color: $v-background-color, $gradient: $v-gradient));

    border-top: 0;
    padding-top: $cuba-app-menubar-padding-top;
    padding-bottom: $cuba-app-menubar-padding-bottom;

    .v-menubar {
      height: $cuba-menubar-height;
      line-height: $cuba-menubar-lineheight;
    }
  }

  .v-button.c-ftsfield-button,
  .v-button.c-logout-button,
  .v-button.c-newwindow-button {
    border: 0;
    box-shadow: none;
    padding: round($v-unit-size/6);
    background: none;

    width: auto;
    height: auto;

    &:focus:after {
      border: 0;
      box-shadow: none;
      padding: round($v-unit-size/6);
    }
  }

  .c-useractions-button {
    background: transparent;
    border: none;
    box-shadow: none;
    color: inherit;

    & > .v-menubar-menuitem {
      padding: 0 round($v-unit-size/5);
    }

    &:not(.v-menubar-submenu) > .v-menubar-menuitem .v-icon {
      margin: 0;
    }
  }

  .c-useractions-button:not(.v-menubar-submenu):hover {
    color: $cuba-menubar-menuitem-text-selected-color;
  }

  .c-app-appname-label {
    font-size: round(2*$v-unit-size/3);
    font-weight: bold;
  }

  .v-horizontallayout.c-app-titlebar {
    padding: round($v-unit-size/10) 0;

    & > .v-spacing {
      width: ceil($v-layout-spacing-horizontal/2);
    }
  }

  .c-app-full-header .c-app-menubar {
    padding-left: ceil($v-layout-spacing-horizontal/2);
  }

  .c-app-work-area-single {
    background: $v-panel-background-color;
  }

  .c-main-singlewindow {
    background-color: $v-panel-background-color;
    padding: $v-layout-margin-top / 2 $v-layout-margin-right / 2 $v-layout-margin-bottom / 2 $v-layout-margin-left / 2;
  }

  .v-splitpanel-horizontal > div > .v-splitpanel-hsplitter div:before {
    background: $v-panel-background-color;
  }

  // Padding for main tabsheet content

  .c-splitpanel-dockable-right > div > div.v-splitpanel-second-container .c-app-tabbed-window.v-margin-left,
  .c-splitpanel-dockable-left > div > div.v-splitpanel-second-container .c-app-tabbed-window.v-margin-left {
    padding-left: $cuba-splitpanel-dock-button-width + $cuba-splitpanel-splitter-width - first-number($v-border);
  }

  .c-app-window-wrap {
    @include box-defaults;
    overflow: auto;
    padding: $v-layout-spacing-vertical $v-layout-spacing-horizontal;
  }

  .v-scrollable > .v-widget.c-app-window-wrap {
    overflow: auto;
  }

  .c-app-window-wrap.c-breadcrumbs-visible {
    display: flex;
    flex-direction: column;
    padding-top: 0;
  }

  // Needed to fix wrong elements width in IE 11
  .v-ie11 & .c-app-window-wrap.c-breadcrumbs-visible > * {
    width: auto !important;
  }

  .c-welcome-text,
  .v-label.c-welcome-text {
    $base-color: scale-color($v-app-background-color, $lightness: if(color-luminance($v-app-background-color) < 10, 15%, -70%));
    color: valo-font-color($base-color, 0.5);
    font-weight: 900;
    font-size: $v-font-size--h1 * 1.5;
  }

  .c-userindicator .v-label {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-align: right;
  }

  .c-user-select-combobox {
    width: 200px;
  }

  .c-window-layout {
    min-height: 0;
  }
}

// SideMenu Layout styles
@mixin cuba-sidemenu-layout-collapsible {

  .c-sidemenu-layout.v-csslayout {
    display: flex;

    // Have to override explicit width to make collapsing work correctly
    .c-main-tabsheet > .v-tabsheet-content,
    .c-main-tabsheet > .v-tabsheet-content > .v-tabsheet-tabsheetpanel,
    .c-main-tabsheet > .v-tabsheet-content > .v-tabsheet-tabsheetpanel > .v-scrollable {
      width: 100% !important;
    }

    .c-workarea {
      flex-grow: 1;
      flex-shrink: 1;
      z-index: 0;
      min-width: 100px;
    }

    .c-sidemenu-container {
      flex-shrink: 0;

      width: $cuba-sidemenu-layout-expanded-width;
      @if $v-animations-enabled {
        @include transition(width $cuba-sidemenu-layout-collapse-animation-time ease-in-out);
      }

      z-index: 1;
    }

    .c-sidemenu-container.collapsed {
      width: $cuba-sidemenu-layout-collapsed-width;
    }

    .c-sidemenu-panel {
      position: fixed;
      z-index: 10;

      flex-grow: 1;

      display: flex;
      flex-direction: column;

      overflow: hidden;

      width: $cuba-sidemenu-layout-expanded-width;
      @if $v-animations-enabled {
        @include transition(width $cuba-sidemenu-layout-collapse-animation-time ease-in-out);
      }

      border-right: 0;

      .c-sidemenu .c-sidemenu-submenu.c-sidemenu-submenu-open {
        background: $cuba-sidemenu-submenu-background-color;
      }

      @include cuba-sidemenu-collapsed(false);
    }

    .c-sidemenu-panel > * {
      flex-shrink: 0;
    }

    .c-sidemenu-panel > .c-sidemenu {
      flex-grow: 1;
      flex-shrink: 1;
    }

    .c-sidemenu-panel.collapsed {
      @if $cuba-sidemenu-layout-collapse-enabled {
        width: $cuba-sidemenu-layout-collapsed-width !important;
        @include cuba-sidemenu-collapsed(true);
      }
    }

    .c-sidemenu-panel.collapsed:hover {
      @if $cuba-sidemenu-layout-collapse-enabled {
        width: $cuba-sidemenu-layout-expanded-width !important;
        @include cuba-sidemenu-collapsed(false);
      }
    }

    .c-sidemenu-title {
      $logo-size: 20px;

      display: flex;
      flex-wrap: nowrap;
      align-items: center;

      height: 40px;
      // consider 1px right border
      padding: 0 floor(($cuba-sidemenu-layout-collapsed-width - $logo-size) / 2);

      .c-app-icon {
        height: $logo-size;
        width: $logo-size;
        flex-shrink: 0;

        margin-right: $v-layout-spacing-horizontal;
      }

      .c-app-title {
        width: $cuba-sidemenu-layout-expanded-width -
        3 * $v-layout-spacing-horizontal - $logo-size;

        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .c-user-timezone-label {
      padding: round($v-layout-spacing-vertical / 2) $v-layout-spacing-vertical;
      text-align: center;
    }

    .c-sidemenu-controls {
      display: flex;
      align-items: center;

      overflow: hidden;

      height: $cuba-sidemenu-layout-collapsed-width;
      background-color: #3b3b3b;

      & > * {
        flex-shrink: 0;

        border-radius: 0;
      }
    }

    .c-sidemenu-collapse-button {
      $bg-color: #2b2b2b;

      width: $cuba-sidemenu-layout-collapsed-width;
      height: $cuba-sidemenu-layout-collapsed-width;
      margin-right: auto;
      padding: 0;

      font-size: 2em;
      color: valo-font-color($bg-color, 0.40);

      border: none;
      border-radius: 0;
      background: $bg-color;
      box-shadow: none;

      &:hover {
        color: $cuba-menubar-menuitem-text-selected-color;
      }

      &::before {
        height: 100%;
      }

      &::after {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }

      @if $cuba-sidemenu-layout-collapse-enabled == false {
        display: none;
      }
    }

    $buttons-width: 30px;

    .c-userindicator {
      width: $cuba-sidemenu-layout-expanded-width
        - $cuba-sidemenu-layout-collapsed-width
        - 2 * $buttons-width;
      padding: 0 round($v-layout-spacing-horizontal / 2);

      font-size: 1.1em;
      text-align: center;

      & > .v-label {
        width: 100%;
        overflow: hidden;
        text-align: center;
      }

      @if $cuba-sidemenu-layout-collapse-enabled == false {
        width: $cuba-sidemenu-layout-expanded-width - 2 * $buttons-width;
      }
    }

    .c-sidemenu-controls .c-userindicator .c-user-select-combobox {
      width: 100%;
    }

    .c-settings-button,
    .c-logout-button,
    .c-login-button {
      width: $buttons-width;
      height: $cuba-sidemenu-layout-collapsed-width;

      padding: 0;

      color: $cuba-menubar-text-color;

      background: none;
      border: none;
      box-shadow: none;

      &::after {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }

      &:hover {
        color: $cuba-menubar-menuitem-text-selected-color;
      }
    }

    .c-settings-button,
    .c-logout-button {
      display: none;
    }

    .c-logout-button,
    .c-login-button {
      margin-left: auto;
    }

    // show settings and logout button only when user indicator is visible i.e. when user is authenticated
    .c-userindicator ~ .c-settings-button,
    .c-userindicator ~ .c-logout-button {
      display: block;
    }

    .c-userindicator ~ .c-login-button {
      display: none;
    }
  }
}

// Collapsible SideMenu layout style
@mixin cuba-sidemenu-collapsed($collapsed: false) {
  @if $collapsed {
    .c-sidemenu {
      overflow-y: hidden;
    }

    .c-sidemenu > .c-sidemenu-item {
      padding: 0;

      .c-sidemenu-item-wrap {
        width: $cuba-sidemenu-layout-collapsed-width;
        text-align: center;
      }

      .c-sidemenu-item-caption,
      .v-icon {
        display: none;
      }

      .c-sidemenu-item-thumbnail,
      .c-sidemenu-item-thumbnail-icon {
        display: inline-block;
      }
    }

    .c-sidemenu-submenu.c-sidemenu-submenu-open {
      max-height: 0;
      overflow: hidden;
      opacity: 0;

      @if $v-animations-enabled {
        @include transition(max-height $cuba-sidemenu-layout-collapse-animation-time ease-in-out);
      }
    }

    .c-ftsfield {
      visibility: hidden;
    }

    .c-user-timezone-label {
      visibility: hidden;
    }
  } @else {
    .c-sidemenu {
      overflow-y: auto;
    }

    .c-sidemenu > .c-sidemenu-item {
      padding: 0 $v-unit-size 0 round($v-unit-size / 2);

      .c-sidemenu-item-wrap {
        width: 100%;
        text-align: left;
      }

      .c-sidemenu-item-caption,
      .v-icon {
        display: inline-block;
      }

      .c-sidemenu-item-thumbnail,
      .c-sidemenu-item-thumbnail-icon {
        display: none;
      }
    }

    .c-sidemenu-submenu.c-sidemenu-submenu-open {
      max-height: 2000px;
      opacity: 1;

      @if $v-animations-enabled {
        @include transition (max-height .9s ease-in-out);
      }
    }

    .c-ftsfield {
      visibility: visible;
    }

    .c-user-timezone-label {
      visibility: visible;
    }
  }
}
