@import "../config/index.scss";

//------------------------------------------------------------//

// * Panels
// * 1. Panel Settings
// * 2. Base Panel
// * 3. Panel Modifiers
// * 4. Collapsable Panel Rows

// Notes:
// * also add to TeamSnap-UI sketch doc and create some rules
// around panel usage

// TODO : Create embedable version of panel for demos
// TODO : revisit theming and how that relates to panel styles
// TODO : revisit panel-footer alignment pattern
// TODO : Refactor containers and header in classic; conflicts

//------------------------------------------------------------//

///////////////////////////////////////////////////////////////
// * 1. Panel Settings
///////////////////////////////////////////////////////////////


$Panel-bg-color: $cu-foreground !default;
$Panel-text-color: $cu-info !default;
$Panel-header-text-color: $cu-info !default;


///////////////////////////////////////////////////////////////
// * 2. Base Panel
///////////////////////////////////////////////////////////////


.Panel {
  padding: 0;
  background: $Panel-bg-color;
  color: $Panel-text-color;
  margin-bottom: $su-medium;
  border: $border-width-small solid $cu-divider;
  border-radius: $border-radius-large;
  box-sizing: border-box;
}


// * .Panel-body
//
// 1. Panel body has no padding by default. Padding is set on rows and cells,
//    instead. Can be overriden in markup with spacing utilities as necessary.

.Panel-body {
  padding: 0; // 1
}


// Hide overflowing panel corners by setting border radius on corner children

.Panel-body:first-child .Panel-row:first-child .Panel-cell:first-child {
  border-top-left-radius: $border-radius-large;
}

.Panel-body:first-child .Panel-row:first-child .Panel-cell:last-child {
  border-top-right-radius: $border-radius-large;
}

.Panel-body:last-child .Panel-row:last-child .Panel-cell:first-child {
  border-bottom-left-radius: $border-radius-large;
}

.Panel-body:last-child .Panel-row:last-child .Panel-cell:last-child {
  border-bottom-right-radius: $border-radius-large;
}


// Override everything-selector that sets max width on -header, -footer, -row

.Panel-header,
.Panel-footer,
.Panel-row {
  max-width: none;
}


// By default, cells with direct descendent content have padding

.Panel-header,
.Panel-footer,
.Panel-row,
.Panel-cell {
  padding: $su-medium;
}


// * .Panel-header
//
// 1. Use flex to make sure content is always vertically center aligned
// 2. A modifier to use with the Panel-headerImage component

.Panel-header {
  border-bottom: $border-width-small solid $cu-divider;
  display: flex; // 1
  align-items: center; // 1
}

.Panel-header--withImage {
  border-bottom: none; // 2
  display: block; // 2
  padding: 0; // 2

  .Panel-title {
    padding: $su-medium;
    padding-bottom: 0;
  }

}

// * .Panel-headerImage

.Panel-headerImage {
  border-top-right-radius: $border-radius-large - 1px;
  border-top-left-radius: $border-radius-large - 1px;
  border-bottom: 1px solid $cu-divider;
  overflow: hidden;
  max-height: scaleGrid(25);

  img { 
    vertical-align: top;
    width: 100%;
  }

}

// * .Panel-title
//
// 1. Define text properties
// 2. Title should fill any extra space. Deters pseudo elements on [class=*-header]
//    from taking up space in the row
// 3. Override default heading properties

.Panel-title {
  color: $Panel-header-text-color; // 1
  font-family: $base-font-family; // 1
  font-size: $tu-base-fontSize; // 1
  font-weight: $tu-bold-fontWeight; // 1
  flex: 1 1 0%; // 2
  padding: 0; // 3
  margin: 0; // 3
}

// * .Panel-row
//
// 1. Add bottom border to all but the last child

.Panel-row:not(:last-child) {
  border-bottom: $border-width-small solid $cu-divider--light; // 1
}

// * .Panel-row--withCells (Modifier)
// * Used when .Panel-row has cell children
//
// 1. Display cells in a row
// 2. Remove padding since cells have their own padding

.Panel-row--withCells {
  display: flex; // 1
  padding: 0; // 2
}

.Panel-row--header {
  background-color: $cu-middleground;
  border-bottom: solid 1px $cu-divider--light; // 1
  font-weight: $tu-semibold-fontWeight;
}


// * .Panel-cell
//
// 1. By default make cells grow to fill the space.
//    If there are multiple cells they will fill the space evenly, ie be equal width.

.Panel-cell {
  flex: 1 1 0%; // 1
  word-break: break-word;
}


// * .Panel-cell--header (Modifier)
//
// 1. Differentiate header cell from content cells

.Panel-cell--header {
  background-color: $cu-middleground; // 1
  border-right: solid 1px $cu-divider--light; // 1
  font-weight: $tu-semibold-fontWeight;
}

// * .Panel-footer
//
// 1. TODO: Does this need to be baked in to footer?

.Panel-footer {
  border-top: 1px solid $cu-divider;
  text-align: right; // 1
}


///////////////////////////////////////////////////////////////
// * 3. Panel Modifiers
///////////////////////////////////////////////////////////////


// * .Panel--striped
//
// 1. Add zebra stripes to panel rows

.Panel--striped .Panel-row:nth-child(even) {
  background-color: $cu-middleground; // 1
}


// .Panel--[bpMax]-stacked
//
// Responsive layout for 2 column tables that stacks cells up to a max screen size
//
// eg:
// + .Panel--xsMax-stacked
// + .Panel--smMax-stacked
// + .Panel--mdMax-stacked
//
// 1. Allow cells to wrap, since they are full width
// 2. Make cells full-width
// 3. Remove default right border and add bottom border instead
// 4. These children are now "inside" so they don't need a border-radius
// 5. The first and last cells are now full width, so they need
//    an extra border-radius

@if $responsive == true {
  @each $name, $value in $max-breakpoints {
    @media (max-width: $value) {
      .Panel--#{$name}-stacked {

        .Panel-row {
          flex-wrap: wrap; // 1
          border-bottom: 0;
        }

        .Panel-cell {
          flex-basis: auto; // 2
          width: 100%; // 2
        }

        .Panel-cell--header {
          border-right: 0; // 3
          padding-bottom: 0;
          background-color: inherit;
        }

        .Panel-cell--header + .Panel-cell {
          padding-top: $su-small;
        }

        .Panel-body:first-child .Panel-row:first-child .Panel-cell:last-child,
        .Panel-body:last-child .Panel-row:last-child .Panel-cell:first-child {
          border-radius: 0; // 4
        }

        .Panel-body:first-child .Panel-row:first-child .Panel-cell:first-child {
          border-top-right-radius: $border-radius-large; // 5
        }

        .Panel-body:last-child .Panel-row:last-child .Panel-cell:last-child {
          border-bottom-left-radius: $border-radius-large; // 5
        }
      }
    }
  }
}

// * 4. Collapsable Panel Rows

// 1. The child row makes up the bottom border instead of parent row
// 2. Style is nested for specificity
// 3. The Parent row needs to be targeted seperately from a static Panel row

.Panel {
  .Panel-row--parent { // 3
    border-bottom: none; // 1
  }
} // 2

.Panel-expandableControl{}

.Panel-expandableControlIcon {
  padding-right: 4px;
  .Icon {
    font-size: $tu-xsmall-fontSize;
  }
}

.Panel-expandableControl {
  &.is-expanded {
    color: $cu-highlight;
    padding-right: 4px;
    .Icon {
      transform: rotate(90deg);
    }
  }
}

.Panel-childRows {
  background: $cu-middleground;
  height: 0;
  overflow: hidden;
  .Panel-row {
    border: none;
  }
  .Panel-cell {
    font-size: $tu-small-fontSize;
    color: $cu-info--light;
    padding-top: $su-small;
    padding-bottom: $su-small;
  }
  .Panel-row:first-child {
    .Panel-cell {
      padding-top: $su-medium;
    }
  }
  .Panel-row:last-child {
    .Panel-cell {
      padding-bottom: $su-medium;
    }
  }
  &.is-expanded {
    height: auto;
    border-top: 1px solid $cu-divider--light;
  }
}

.Panel-expandableRow:not(:last-child) {
  .Panel-childRows {
    border-top: 1px solid $cu-divider--light;
    &.is-expanded {
      border-bottom: 1px solid $cu-highlight;
    }
  }
}