/*
 * 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.
 *
 */

/**
 * INTERNAL.
 * It is a copy of the "$cuba-maintabsheet-top-padding" variable.
 * @group managedTabsheet
 */
$cuba-main-managed-tabsheet-top-padding: round($v-unit-size/6) !default;

$c-managed-tabsheet-tabbar-height:
        $v-unit-size +
        $cuba-main-managed-tabsheet-top-padding +
        first-number($v-border);

@mixin managed-tabsheet($primary-stylename: c-managed-tabsheet) {
  // we rarely hide first tab but often hide other tabs
  // unlike Vaadin we always show margin between tabs
  .#{$primary-stylename}-tabitemcell[aria-hidden="true"] + td .v-caption {
    margin-left: round($v-unit-size/2);
  }

  .#{$primary-stylename}-tabitemcell .v-caption .v-icon + .v-captiontext {
    margin-left: ceil($v-unit-size/10);
  }

  .#{$primary-stylename} > .v-tabsheet {
    .v-tabsheet-content {
      display: none;
    }

    .v-tabsheet-deco {
      display: none;
    }
  }

  .#{$primary-stylename} {
    & > .c-managed-tab {
      background-color: $v-panel-background-color;
      height: auto !important;
    }

    .hidden-tab {
      display: none;
    }

    .visible-tab {
      display: block;
    }
  }

  .#{$primary-stylename}.v-has-width.v-has-height {
    position: relative !important;

    .c-sidemenu-layout & {
      $c-managed-tabsheet-tabbar-height: $c-managed-tabsheet-tabbar-height - 1;
    }

    .c-managed-tab {
      top: $c-managed-tabsheet-tabbar-height;
      left: 0;
      right: 0;
      bottom: 0;
      position: absolute;

      &.hidden-tab {
        display: block;
        visibility: hidden;
      }

      &.hidden-tab svg {
        display: none;
      }

      &.visible-tab {
        display: block;
        visibility: visible;
      }
    }
  }
}