@import "~@cultureamp/kaizen-design-tokens/sass/color";
@import "~@cultureamp/kaizen-component-library/styles/animation";
@import "~@cultureamp/kaizen-component-library/styles/border";
@import "~@cultureamp/kaizen-component-library/styles/color";
@import "~@cultureamp/kaizen-component-library/styles/type";
@import "~@cultureamp/kaizen-component-library/styles/layout";
@import "~@cultureamp/kaizen-component-library/components/Button/styles";

$row-height: 60px;

.container {
  width: 100%;
  margin-bottom: $ca-grid * 0.5;
}

.header {
  background-color: $kz-color-ash;
  border: solid 1px $ca-border-color;
}

.headerRow {
  display: flex;
}

.headerRowCell {
  @include button-reset;
  text-overflow: ellipsis;
  overflow-x: hidden;
  white-space: nowrap;
  padding: 0 $ca-grid * 0.8;
  height: $ca-grid * 1.5;
  display: flex;
  align-items: center;
}

.headerRowCellCheckbox {
  margin-right: 10px;
}

.headerRowCellCheckboxContainer {
  display: flex;
  align-items: center;
}

.headerRowCellIcon {
  color: $kz-color-wisteria-500;
  height: 20px;

  .active & {
    color: $kz-color-wisteria-800;
  }
}

.active {
  .header & {
    background-color: $kz-color-wisteria-100;
  }
}

.card {
  @include button-reset;
  background: $kz-color-white;
  border: solid 1px $ca-border-color;
  box-shadow: $ca-box-shadow;
  transition: box-shadow $ca-duration-rapid, border-color $ca-duration-rapid,
    margin $ca-duration-rapid, padding $ca-duration-rapid,
    width $ca-duration-rapid;
  // These css properties are required for when the rows are anchor elements
  text-decoration: none;
  color: $kz-color-wisteria-800;
  display: block;
  &:hover,
  &:active,
  &:focus {
    text-decoration: none;
  }

  &:first-child {
    border-top-left-radius: $ca-border-radius;
    border-top-right-radius: $ca-border-radius;
  }

  &:not(:first-child) {
    margin-top: -1px;
  }

  &:last-child {
    border-bottom-left-radius: $ca-border-radius;
    border-bottom-right-radius: $ca-border-radius;
  }

  &:hover {
    will-change: box-shadow, border-color, margin, padding, width;
  }

  &.well {
    margin-top: ($ca-grid * 0.5);
  }
}

.row {
  display: flex;
}

.well {
  border-color: transparent;
  box-shadow: none;
  border-radius: $ca-border-radius;
  background-color: $kz-color-ash;
  margin-bottom: $ca-grid * 0.5;
}

.popout {
  box-shadow: 0 3px 10px add-alpha($kz-color-wisteria-800, 9%);
}

.expanded {
  position: relative;
  z-index: 1;
  margin-left: -$ca-grid * 0.5;
  margin-right: -$ca-grid * 0.5;
  padding-left: $ca-grid * 0.5;
  padding-right: $ca-grid * 0.5;
}

.hasHoverState {
  width: 100%;
  text-align: left;
  cursor: pointer;

  &.expanded {
    width: calc(100% + #{$ca-grid});
  }

  &:hover {
    background-color: $kz-color-stone;
  }
}

.rowCell {
  min-height: $row-height;
  padding: 0 $ca-grid * 0.8;
  display: flex;
  align-items: center;
}