/*
 * 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 width of split panel splitter.
 * @group splitpanel
 */
$cuba-splitpanel-splitter-width: 3px !default;

/**
 * The width of split panel dock button.
 * @group splitpanel
 */
$cuba-splitpanel-dock-button-width: round($v-unit-size / 3) !default;

@mixin halo-splitpanel($primary-stylename: v-splitpanel) {
  .#{$primary-stylename}-horizontal > div > .#{$primary-stylename}-hsplitter {
    width: $cuba-splitpanel-splitter-width;
  }

  .#{$primary-stylename}-vertical > div > .#{$primary-stylename}-vsplitter {
    height: $cuba-splitpanel-splitter-width;
  }

  .#{$primary-stylename}-horizontal > div > .#{$primary-stylename}-second-container {
    margin-left: $cuba-splitpanel-splitter-width;
  }

  $border-color: first-color(valo-border($strength: 1.2));
  $border-width: first-number($v-border);
  $border-radius: $v-border-radius;
  $button-color: valo-font-color($v-app-background-color, .5);

  .c-splitpanel-dock-button {
    cursor: pointer;
    width: $cuba-splitpanel-dock-button-width;
    background: $v-panel-background-color;
    border: $border-width solid $border-color;
    font-family: FontAwesome;
    color: $button-color;
    font-size: 12px;
    text-align: center;
    padding-top: round($v-unit-size/3);
    padding-bottom: round($v-unit-size/3);
    display: inline-block;
  }

  .c-splitpanel-dock-button-vertical {
      cursor: pointer;
      height: round($v-unit-size/3);
      line-height: round($v-unit-size/3);
      background: $v-panel-background-color;
      border: $border-width solid $border-color;
      font-family: FontAwesome;
      color: $button-color;
      font-size: 12px;
      text-align: center;
      padding-left: round($v-unit-size/2);
      padding-right: round($v-unit-size/2);
      display: block;
    }

  .c-splitpanel-dock-button-left {
    border-right-color: $v-panel-background-color;
    margin-left: -($cuba-splitpanel-splitter-width - $border-width);
    border-radius: $border-radius 0 0 $border-radius;
  }

  .c-splitpanel-dock-button-right {
    border-left-color: $v-panel-background-color;
    margin-left: $cuba-splitpanel-splitter-width - $border-width;
    border-radius: 0 $border-radius $border-radius 0;
  }

  .c-splitpanel-dock-button-up {
    border-bottom-color: $v-panel-background-color;
    margin-top: 0;
    border-radius: $border-radius $border-radius 0 0;
  }

  .c-splitpanel-dock-button-down {
    border-top-color: $v-panel-background-color;
    margin-top: 0;
    border-radius: 0 0 $border-radius $border-radius;
  }

  .c-splitpanel-dock-button-left:after {
    content: "\f053";
  }

  .c-splitpanel-dock-button-right:after {
    content: "\f054";
  }

  .c-splitpanel-dock-button-up:after {
    content: "\f077";
  }

  .c-splitpanel-dock-button-down:after {
    content: "\f078";
  }
}