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

/*
Panels

Markup:
<div class="#{$ns}-tabs {{.modifier}}">
  <div class="#{$ns}-heading">Panel Heading</div>
  We build products that make people better at their most important work.
</div>

.#{$ns}-elevation-0 - Ground floor. This level provides just a gentle border shadow.
.#{$ns}-elevation-1 - First. Subtle drop shadow intended for static containers.
.#{$ns}-elevation-2 - Second. An even stronger shadow, moving on up.
.#{$ns}-elevation-3 - Third. For containers overlaying content temporarily.
.#{$ns}-elevation-4 - Fourth. The strongest shadow, usually for overlay containers on top of backdrops.
.#{$ns}-interactive - On hover, increase highlight.

Styleguide tabs
*/

$tab-header-padding-x: $pt-grid-size * 3 !default;
$tab-header-top-line-height: 4px !default;
$tab-header-padding-y: $pt-grid-size * 0.5 !default;
$tab-header-font-size: $pt-font-size * 1.1 !default;

$tabs-background-color: $white !default;
$dark-tabs-background-color: $dark-gray4 !default;

$tabs-header-white: $light-gray4 !default;
$tabs-header-hover-white: $light-gray2 !default;
$tabs-header-active-white: $tabs-background-color !default;
$tabs-header-dark: $dark-gray4 !default;
$tabs-header-hover-dark: $dark-gray2 !default;
$tabs-header-active-dark: $dark-tabs-background-color !default;

$tabs-header-active-divider-white: $gray1 !default;
$tabs-header-hover-divider-white: $gray3 !default;
$tabs-header-active-divider-dark: $dark-gray3 !default;
$tabs-header-hover-divider-dark: $dark-gray4 !default;

$elevation-shadows: (
  $pt-elevation-shadow-0
  $pt-elevation-shadow-1
  $pt-elevation-shadow-2
  $pt-elevation-shadow-3
  $pt-elevation-shadow-4
);
$dark-elevation-shadows: (
  $pt-dark-elevation-shadow-0
  $pt-dark-elevation-shadow-1
  $pt-dark-elevation-shadow-2
  $pt-dark-elevation-shadow-3
  $pt-dark-elevation-shadow-4
);

.#{$ns}-tabs {
  border-radius: $pt-border-radius;
  box-shadow: $pt-elevation-shadow-0;
  background-color: $tabs-background-color;
  padding: 0;
  transition: transform ($pt-transition-duration * 2) $pt-transition-ease,
              box-shadow ($pt-transition-duration * 2) $pt-transition-ease,
              background-color ($pt-transition-duration * 2) $pt-transition-ease;

  > .#{$ns}-tabs-header {
    background-color: $tabs-header-white;
    box-shadow: 0 1px $pt-divider-black;
    transition: background-color ($pt-transition-duration * 2) $pt-transition-ease;
  
    .#{$ns}-dark & {
      background-color: $tabs-header-dark;
      box-shadow: 0 1px $pt-divider-black;
    }

    > .#{$ns}-tab-header {
      position: relative;
      margin-top: $tab-header-top-line-height;
      font-size: $tab-header-font-size;
      font-weight: 200;
      padding: $tab-header-padding-y $tab-header-padding-x $tab-header-padding-y $tab-header-padding-x;
      transition: background-color ($pt-transition-duration * 2) $pt-transition-ease;
      cursor: pointer;
      z-index: 1;

      &:not(:first-child):before {
        position: absolute;
        content: "";
        background-color: $tabs-header-hover-divider-white;
        top: 2px;
        bottom: 6px;
        right: 100%;
        width: 1px;
        z-index: 1;
        // opacity: 0;
    
        .#{$ns}-dark & {
          background-color: $tabs-header-hover-divider-dark;
        }
      }

      &:after {
        position: absolute;
        content: "";
        background-color: $tabs-header-hover-divider-white;
        top: 2px;
        bottom: 6px;
        left: calc(100% - 1px);
        width: 1px;
        z-index: 1;
    
        .#{$ns}-dark & {
          background-color: $tabs-header-hover-divider-dark;
        }
      }

      &:active, &:hover {
        background-color: $tabs-header-hover-white;
        box-shadow: 0 (-$tab-header-top-line-height) $tabs-header-hover-divider-white;

        &:before {
          top: (-$tab-header-top-line-height);
          bottom: 0;
        }

        &:after {
          top: (-$tab-header-top-line-height);
          bottom: 0;
        }
    
        .#{$ns}-dark & {
          background-color: $tabs-header-hover-dark;
        }
      }

      &.#{$ns}-tab-header-active {
        background-color: $tabs-header-active-white;
        box-shadow: 0 (-$tab-header-top-line-height) $tabs-header-active-divider-white,
                    0 1px $tabs-header-active-white;

        &:before {
          top: (-$tab-header-top-line-height);
          background-color: $tabs-header-active-divider-white;
          bottom: 0;
    
          .#{$ns}-dark & {
            background-color: $tabs-header-active-divider-dark;
          }
        }

        &:after {
          top: (-$tab-header-top-line-height);
          background-color: $tabs-header-active-divider-white;
          bottom: 0;
    
          .#{$ns}-dark & {
            background-color: $tabs-header-active-divider-dark;
          }
        }
    
        .#{$ns}-dark & {
          background-color: $tabs-header-active-dark;
          box-shadow: 0 (-$tab-header-top-line-height) $tabs-header-active-divider-dark,
                      0 1px $tabs-header-active-dark;
        }
      }
    }
  }

  &.#{$ns}-dark,
  .#{$ns}-dark & {
    box-shadow: $pt-dark-elevation-shadow-0;
    background-color: $dark-tabs-background-color;
  }
}

@for $index from 1 through length($elevation-shadows) {
  .#{$ns}-elevation-#{$index - 1} {
    box-shadow: nth($elevation-shadows, $index);

    &.#{$ns}-dark,
    .#{$ns}-dark & {
      box-shadow: nth($dark-elevation-shadows, $index);
    }
  }
}

.#{$ns}-tabs.#{$ns}-interactive {
  &:hover {
    box-shadow: $pt-elevation-shadow-3;

    > .#{$ns}-tabs-header {
      background-color: darken($light-gray4, 5%);
    
      .#{$ns}-dark & {
        background-color: darken($dark-gray4, 5%);
      }
    }

    &.#{$ns}-dark,
    .#{$ns}-dark & {
      box-shadow: $pt-dark-elevation-shadow-3;
    }
  }
}