@import '~tc-ui/src/styles/tc-includes';

.list-container {
  max-width: 960px;
  margin: 20px auto;
  border: 1px solid $tc-gray-30;
  box-shadow: 0px 1px 2px 0px $tc-gray-30;
}

.list-header {
  background-color: $tc-gray-20;
  @include tc-label;
  font-weight: 400;
  padding: 11px 15px;

  .header-text {
    color: $tc-gray-70;
  }

  .highlighted {
    font-weight: bold;
  }

  .list-count {
    color: $tc-gray-70;
    opacity: 0.5;
  }
}

// ReactCSSTransitionGroup transitions
.list-container-appear {
  opacity: 0.01;

  &.list-container-appear-active {
    opacity: 1;
    transition: opacity .25s ease-in;
  }
}

.list-container-leave {
  opacity: 1.0;

  &.list-container-leave-active {
    opacity: 0;
    transition: opacity .25s ease-out;
  }
}