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

/*
Panels

Markup:
<div class="#{$ns}-panel {{.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 panel
*/

$panel-background-color: $white !default;
$dark-panel-background-color: $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}-panel {
  border-radius: $pt-border-radius;
  box-shadow: $pt-elevation-shadow-0;
  background-color: $panel-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}-panel-header {
    background-color: $light-gray4;
    box-shadow: 0 1px $pt-divider-black;
    transition: background-color ($pt-transition-duration * 2) $pt-transition-ease;
  
    .#{$ns}-dark & {
      background-color: $dark-gray4;
      box-shadow: 0 1px $pt-divider-black;
    }
  }

  &.#{$ns}-dark,
  .#{$ns}-dark & {
    box-shadow: $pt-dark-elevation-shadow-0;
    background-color: $dark-panel-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}-panel.#{$ns}-interactive {
  &:hover {
    background-color: darken($panel-background-color, 5%);
    box-shadow: $pt-elevation-shadow-3;

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

    &.#{$ns}-dark,
    .#{$ns}-dark & {
      background-color: darken($dark-panel-background-color, 5%);
      box-shadow: $pt-dark-elevation-shadow-3;
    }
  }
}