// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
// Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
// of the license at https://github.com/palantir/blueprint/blob/master/LICENSE
// and https://github.com/palantir/blueprint/blob/master/PATENTS

@import "../../common/variables";
@import "../../common/mixins";

/*
Tabs

Markup:
<div class="pt-tabs">
    <ul class="pt-tab-list {{.modifier}}" role="tablist">
        <li class="pt-tab" role="tab" aria-selected="true">Selected tab</li>
        <li class="pt-tab" role="tab">Another tab</li>
        <li class="pt-tab" role="tab" aria-disabled="true">Disabled tab</li>
    </ul>
    <div class="pt-tab-panel" role="tabpanel">Selected panel</div>
    <div class="pt-tab-panel" role="tabpanel" aria-hidden="true">Another panel</div>
    <div class="pt-tab-panel" role="tabpanel" aria-hidden="true">Disabled panel</div>
</div>

.pt-large - Large tabs

Styleguide pt-tabs
*/

$tab-color-selected: $pt-link-color !default;
$dark-tab-color-selected: $pt-dark-link-color !default;

$tab-indicator-width: 3px !default;

.pt-tabs.pt-vertical {
  display: flex;

  // include '>' to ensure we're only modifying
  // these tabs, not tabs that might be further
  // down the DOM hierarchy (i.e. tabs in tabs)
  > .pt-tab-list {
    flex-direction: column;
    align-items: flex-start;

    .pt-tab {
      width: 100%;
      padding: 0 $pt-grid-size;
    }

    .pt-tab-indicator-wrapper .pt-tab-indicator {
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border-radius: $pt-border-radius;
      background-color: rgba($pt-intent-primary, 0.2);
      height: auto;
    }
  }

  // same consideration here: avoid styling any
  // other tabs that might be contained in this
  // vertical tab component
  > .pt-tab-panel {
    margin-top: 0;
    padding-left: $pt-grid-size * 2;
  }
}

.pt-tab-list {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-end;
  position: relative;
  margin: 0;
  border: none;
  padding: 0;
  list-style: none;

  // this is fine.
  // stylelint-disable-next-line selector-no-universal
  > *:not(:last-child) {
    margin-right: $pt-grid-size * 2;
  }
}

.pt-tab {
  @include overflow-ellipsis();
  flex: 0 0 auto;
  position: relative;
  cursor: pointer;
  max-width: 100%;
  vertical-align: top;
  line-height: $pt-button-height;
  color: $pt-text-color;
  font-size: $pt-font-size;

  .pt-tab-indicator-wrapper ~ & {
    // the bottom border is only for static markup, therefore
    // we never want a bottom border if there's a tab indicator
    // stylelint-disable-next-line declaration-no-important
    box-shadow: none !important;
  }

  &[aria-disabled="true"] {
    cursor: not-allowed;
    color: $pt-text-color-disabled;
  }

  &[aria-selected="true"] {
    border-radius: 0;
    box-shadow: inset 0 (- $tab-indicator-width) 0 $tab-color-selected;
  }

  &[aria-selected="true"],
  &:not([aria-disabled="true"]):hover {
    color: $tab-color-selected;
  }

  &:focus {
    -moz-outline-radius: 0;
  }

  .pt-large & {
    line-height: $pt-button-height-large;
    font-size: $pt-font-size-large;
  }
}

.pt-tab-panel {
  margin-top: $pt-grid-size * 2;

  &[aria-hidden="true"] {
    display: none;
  }
}

.pt-tab-indicator-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(0), translateY(0);
  transition: height, transform, width;
  transition-duration: $pt-transition-duration * 2;
  transition-timing-function: $pt-transition-ease;
  pointer-events: none;

  .pt-tab-indicator {
    @include position(absolute, null 0 0);
    background-color: $tab-color-selected;
    height: $tab-indicator-width;
  }

  &.pt-no-animation {
    transition: none;
  }
}

.pt-dark {
  .pt-tab {
    color: $pt-dark-text-color;

    &[aria-disabled="true"] {
      color: $pt-dark-text-color-disabled;
    }

    &[aria-selected="true"] {
      box-shadow: inset 0 (- $tab-indicator-width) 0 $dark-tab-color-selected;
    }

    &[aria-selected="true"],
    &:not([aria-disabled="true"]):hover {
      color: $dark-tab-color-selected;
    }
  }

  .pt-tab-indicator {
    background-color: $dark-tab-color-selected;
  }
}

.pt-flex-expander {
  flex: 1 1;
}