// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

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

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

$tab-indicator-width: $pt-spacing * 0.75 !default;

.#{$ns}-tabs:not(.#{$ns}-vertical).#{$ns}-fill {
  height: 100%;

  .#{$ns}-tab-list {
    height: 100%;
  }
}

.#{$ns}-tabs.#{$ns}-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)
  > .#{$ns}-tab-list {
    align-items: flex-start;
    flex-direction: column;

    .#{$ns}-tab {
      align-items: center;
      border-radius: $pt-border-radius;
      display: flex;
      padding: 0 ($pt-spacing * 2);
      width: 100%;

      &[aria-selected="true"] {
        background-color: rgba($pt-intent-primary, 0.2);
        box-shadow: none;

        @media (forced-colors: active) and (prefers-color-scheme: dark) {
          background-color: $pt-high-contrast-mode-active-background-color;
          color: $black;
        }
      }
    }

    .#{$ns}-tab-indicator-wrapper .#{$ns}-tab-indicator {
      background-color: rgba($pt-intent-primary, 0.2);
      border-radius: $pt-border-radius;
      height: auto;
      inset: 0;
    }
  }

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

.#{$ns}-tab-list {
  align-items: flex-end;
  border: none;
  column-gap: $pt-spacing * 5;
  display: flex;
  flex: 0 0 auto;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;

  .#{$ns}-tabs:not(.#{$ns}-vertical) > .#{$ns}-flex-expander {
    // offset column-gap from parent component above
    // since flex-expander is taking up _available_ space, we don't want to add a double gap
    // between the elements before and after the expander
    margin-right: $pt-spacing * -5;
  }
}

.#{$ns}-tab {
  @include overflow-ellipsis;
  align-items: center;
  align-self: stretch;
  color: $pt-text-color;
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  font-size: $pt-font-size;
  line-height: $pt-button-height;
  max-width: 100%;
  position: relative;
  vertical-align: top;

  // support for links in tab titles #363
  a {
    color: inherit;
    display: block;
    text-decoration: none;
  }

  .#{$ns}-tab-indicator-wrapper ~ & {
    // these properties are only for static markup, therefore
    // we never want them if there's a tab indicator
    /* stylelint-disable declaration-no-important */
    background-color: transparent !important;
    box-shadow: none !important;
    /* stylelint-enable declaration-no-important */
  }

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

    @media (forced-colors: active) and (prefers-color-scheme: dark) {
      // Windows High Contrast dark theme
      color: $pt-high-contrast-mode-disabled-text-color;
    }
  }

  &[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;

    @media (forced-colors: active) and (prefers-color-scheme: dark) {
      // Windows High Contrast dark theme
      color: $pt-high-contrast-mode-active-text-color;
    }
  }

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

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

.#{$ns}-tab-panel {
  margin-top: $pt-spacing * 5;

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

.#{$ns}-tab-icon {
  margin-right: $pt-spacing * 2;
}

.#{$ns}-tab-tag {
  margin-left: $pt-spacing * 2;
}

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

  .#{$ns}-tab-indicator {
    background-color: $tab-color-selected;
    bottom: 0;
    height: $tab-indicator-width;
    left: 0;
    position: absolute;
    right: 0;

    @media (forced-colors: active) and (prefers-color-scheme: dark) {
      // Windows High Contrast dark theme
      background-color: $pt-high-contrast-mode-active-background-color;
    }
  }

  &.#{$ns}-no-animation {
    transition: none;
  }

  .#{$ns}-tabs:not(.#{$ns}-vertical) & {
    height: 100%;
  }
}

.#{$ns}-dark {
  .#{$ns}-tab {
    color: $pt-dark-text-color;

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

      @media (forced-colors: active) and (prefers-color-scheme: dark) {
        // Windows High Contrast dark theme
        color: $pt-high-contrast-mode-disabled-text-color;
      }
    }

    &[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;

      @media (forced-colors: active) and (prefers-color-scheme: dark) {
        // Windows High Contrast dark theme
        color: $pt-high-contrast-mode-active-text-color;
      }
    }
  }

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

    @media (forced-colors: active) and (prefers-color-scheme: dark) {
      // Windows High Contrast dark theme
      background-color: $pt-high-contrast-mode-active-background-color;
    }
  }
}

.#{$ns}-flex-expander {
  flex: 1 1;
}