// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

@import "global";
@import "grid";

//
// @variables
//

$include-html-tabs-classes: $include-html-classes !default;

$tabs-navigation-padding: rem-calc(16) !default;
$tabs-navigation-bg-color: #efefef !default;
$tabs-navigation-active-bg-color: #fff !default;
$tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%) !default;
$tabs-navigation-font-color: #222 !default;
$tabs-navigation-font-size: rem-calc(16) !default;
$tabs-navigation-font-family: $body-font-family !default;

$tabs-content-margin-bottom: rem-calc(24) !default;
$tabs-content-padding: $column-gutter/2 !default;

$tabs-vertical-navigation-margin-bottom: 1.25rem !default;

@include exports("tab") {
  @if $include-html-tabs-classes {
    .tabs {
      @include clearfix;
      margin-bottom: 0 !important;
      dd {
        position: relative;
        margin-bottom: 0 !important;
        float: $default-float;
        > a {
          display: block;
          background: $tabs-navigation-bg-color;
          color: $tabs-navigation-font-color;
          padding: $tabs-navigation-padding $tabs-navigation-padding * 2;
          font-family: $tabs-navigation-font-family;
          font-size: $tabs-navigation-font-size;
          &:hover { background: $tabs-navigation-hover-bg-color; }
        }
        &.active a { background: $tabs-navigation-active-bg-color; }
      }
      &.radius {
        dd:first-child {
          a { @include side-radius($default-float, $global-radius); }
        }
        dd:last-child {
          a { @include side-radius($opposite-direction, $global-radius); }
        }
      }
      &.vertical {
        dd {
          position: inherit;
          float: none;
          display: block;
          top: auto;
        }
      }
    }

    .tabs-content {
      @include clearfix;
      margin-bottom: $tabs-content-margin-bottom;
      width: 100%;
      > .content {
        display: none;
        float: $default-float;
        padding: $tabs-content-padding 0;
        width: 100%;
        &.active { display: block; }
        &.contained { padding: $tabs-content-padding; }
      }
      &.vertical {
        display: block;
        > .content { padding: 0 $tabs-content-padding; }
      }
    }
    @media #{$medium-up} {
      .tabs {
        &.vertical {
          width: 20%;
          float: $default-float;
          margin-bottom: $tabs-vertical-navigation-margin-bottom;
        }
      }
      .tabs-content {
        &.vertical {
          width: 80%;
          float: $default-float;
          margin-#{$default-float}: -1px;
        }
      }
    }
    .no-js {
      .tabs-content > .content {
        display: block;
        float: none;
      }
    }
  }
}