@import "settings";
@import "foundation-sites/scss/components/tabs";
@import "buttons";

/// Set to false to not include tabs in the bundle
/// @type Bool
$bonsai-include-tabs: $bonsai-include-components !default;

/* --- Bonsai Variables --- */

/// Default background color on active for item in a Menu
/// @type Color
$bonsai-tab-background-active: $bonsai-white !default;

/// Default background color on hover for items in a Menu
/// @type Color
$bonsai-tab-item-background-hover: $bonsai-hover-background !default;

/// Default font size for tab label
/// @type Number
$bonsai-tab-item-font-size: $bonsai-global-font-size !default;

/// Default padding for tab item
/// @type Number | List
$bonsai-tab-item-padding: $bonsai-spacing-base * 3 $bonsai-spacing-base * 5 !default;

/// Default padding for tab content
/// @type Number | List
$bonsai-tab-content-padding: 0.875rem 0 !default;

/* --- Foundation configuration --- */

$tab-background-active: $bonsai-tab-background-active;
$tab-item-background-hover: $bonsai-tab-item-background-hover;
$tab-item-font-size: $bonsai-tab-item-font-size;
$tab-item-padding: $bonsai-tab-item-padding;
$tab-content-padding: $bonsai-tab-content-padding;

/* --- Mixins --- */

/// Adds styles for a tab container. (added to a <ul>)
@mixin bonsai-tabs-container {
  @include tabs-container;

  border: none;
}

/// Augments a tab container to have vertical tabs.
@mixin bonsai-tabs-container-vertical {
  @include tabs-container-vertical;
}

/// Adds styles for the wrapper that surrounds a tab group's content panes.
@mixin bonsai-tabs-content {
  @include tabs-content;

  border-top: solid $bonsai-light-gray;
  border-width: 1px 0 0;
}

/// Augments a tab content container to have a vertical style, by shifting the border around
@mixin bonsai-tabs-content-vertical {
  @include tabs-content-vertical;
}

/// Adds styles for an individual tab content panel within the tab content container.
@mixin bonsai-tabs-panel {
  @include tabs-panel;
}

/// Add base styling to `<a>` tag within 'tab-item'
/// @param {bool} $vertical - should the tab-item link be styled vertically?
@mixin bonsai-tab-item-link-base($vertical: false) {
  text-decoration: none;

  &:hover {
    @include breakpoint(small down) {
      @include indicator-bar(left, $bonsai-hover);
    }

    @include breakpoint(medium) {
      @include indicator-bar(if($vertical, left, bottom), $bonsai-hover);
    }
  }

  &.disabled {
    @include button-disabled(
      $background: $bonsai-button-disabled-background !important,
      $color: $bonsai-button-disabled-color !important
    );

    &:hover {
      box-shadow: none;
    }
  }
}

/// Add 'active' styling to `<a>` tag within 'tab-item'
/// @param {bool} $vertical - should the tab-item link be styled vertically?
@mixin bonsai-tab-item-link-active($vertical: false) {
  @include breakpoint(small down) {
    @include indicator-bar(left);
  }

  @include breakpoint(medium) {
    @include indicator-bar(if($vertical, left, bottom));
  }

  color: $bonsai-body-font-color;
  font-weight: bold;
  cursor: default;
}

/// Adds styles for an individual tab item
/// @param {bool} $vertical - should the tab-item be displayed vertically?
@mixin bonsai-tab-item($vertical: false) {
  @include tabs-title;

  border: $bonsai-standard-border;
  border-width: 1px 0 0 1px;

  @include breakpoint(small down) {
    float: none;
    border-right-width: 1px;
  }

  @if $vertical {
    float: none;
    border-right-width: 1px;
  }

  &:last-child {
    border-right-width: 1px;
  }

  & a {
    @include bonsai-tab-item-link-base($vertical);
  }

  &.is-active a {
    @include bonsai-tab-item-link-active($vertical);
  }
}

/// Applies general 'tabs' styles to relevant children elements
@mixin bonsai-tabs {
  @if $bonsai-include-tabs {
    .tabs {
      @include bonsai-tabs-container;

      &:not(.vertical) > li {
        @include bonsai-tab-item;
      }

      &.vertical {
        @include bonsai-tabs-container-vertical;

        > li {
          @include bonsai-tab-item($vertical: true);
        }
      }
    }

    .tabs-content {
      @include bonsai-tabs-content;

      &.vertical {
        @include bonsai-tabs-content-vertical;
      }
    }

    .tabs-panel {
      @include bonsai-tabs-panel;
    }
  }
}