/*
 * Copyright (c) 2018 Eclipse Foundation, Inc.
 * 
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 * 
 * Contributors:
 *   Christopher Guindon <chris.guindon@eclipse-foundation.org>
 *   Edouard Poitras <edouard@eclipse.org>
 * 
 * SPDX-License-Identifier: EPL-2.0
*/

// Drupal Tab styles

.nav-tabs.solstice-tabs{
  margin-bottom:0;
  border-bottom:0;
  background-color: @solstice-tabs-background;
  + .region-content {
    padding: 20px;
    border: @solstice-tabs-border;
    border-top:none;
    background-color:@solstice-tabs-pane-background-color;
  }
  li {
    margin-bottom: 0px;
    strong{
      font-weight: @solstice-tabs-font-weight;
    }
    .solstice-tabs-item {
      display:block;
    }
    a, .solstice-tabs-item {
      position:relative;
      border: 1px solid @solstice-tabs-background;
      border-right:none;
      margin: 0px;
      padding: 15px;
      border-radius: 0;
      font-weight: @solstice-tabs-font-weight;
      color: @solstice-tabs-color;
      background-color: @solstice-tabs-background;
    }
    a:hover {
      border: 1px solid @solstice-tabs-background;
      border-right:none;
      color:  @solstice-tabs-hover-color;
      background-color: @solstice-tabs-hover;
    }
    &.active > a,
    &.selected a,
    a.active,
    a.active:hover{
      border: 1px solid @solstice-tabs-background;
      border-right:none;
      font-weight: @solstice-tabs-active-font-weight;
      color: @solstice-tabs-active-color;
      background-color: @solstice-tabs-active-hover;
      strong{
        font-weight: @solstice-tabs-active-font-weight;
      }
    }
    a:focus {
      border: 1px solid @solstice-tabs-hover;
      border-right:none;
      color: @solstice-tabs-hover-color;
      background-color: @solstice-tabs-active-hover;
    }
  }
  
  &.tabs--secondary{
    background-color: darken(@solstice-tabs-background, 10%);
    position:relative;
    z-index:9;
    li {
      a{
        border: 1px solid darken(@solstice-tabs-background, 10%);
        border-right:none;
        background-color: darken(@solstice-tabs-background, 10%);
        &:hover {
          background-color: @solstice-tabs-background;
        }
      }
      &.active > a,
      &.selected a,
      a.active,
      a.active:hover{
        border: 1px solid darken(@solstice-tabs-background, 10%);
        border-right:none;
        font-weight: @solstice-tabs-active-font-weight;
        color: @solstice-tabs-active-color;
        background-color: @solstice-tabs-active-hover;
        strong{
          font-weight: @solstice-tabs-active-font-weight;
        }
      }
      a:focus {
        border: 1px solid darken(@solstice-tabs-background, 10%);
        border-right:none;
        color: @solstice-tabs-hover-color;
        background-color: @solstice-tabs-active-hover;
      }
    }
  }
  
  &.solstice-tabs-dark {
    background-color: @solstice-tabs-dark-background;
    + .region-content {
      border: @solstice-tabs-dark-border;
      border-top:none;
      background-color:@solstice-tabs-dark-pane-background-color;
    }
    li {
      a {
        border: 1px solid @solstice-tabs-dark-background;
        border-right:none;
        font-weight: @solstice-tabs-font-weight;
        color: @solstice-tabs-color;
        background-color: @solstice-tabs-dark-background;
        &:hover {
          border: 1px solid @solstice-tabs-dark-background;
          border-right:none;
          color:  @solstice-tabs-hover-color;
          background-color: @solstice-tabs-dark-hover;
        }
      }
      &.active > a,
      &.selected a,
      a.active,
      a.active:hover{
        border: 1px solid @solstice-tabs-dark-background;
        border-right:none;
        font-weight: @solstice-tabs-active-font-weight;
        color: @solstice-tabs-active-color;
        background-color: @solstice-tabs-active-hover;
        strong{
          font-weight: @solstice-tabs-active-font-weight;
        }
      }
      a:focus {
        border: 1px solid @solstice-tabs-dark-background;
        border-right:none;
        color: @solstice-tabs-hover-color;
        background-color: @solstice-tabs-active-hover;
      }
    }
  }
}


