.conversation {
  border-top: 1px solid $brand-border;

  &:first-child {
    border-top: none;
    padding-top: 1px;
  }

  &:hover,
  &.hover {
    background-color: white;
  }

  &.is-collapsed {
    .conversation-actions {
      display: none;
    }
  }

  &.is-expanded {
    background-color: white;
    border-top: none;
    border-radius: $border-radius-base;
    box-shadow: inset 0 0 0 1px $brand-border;
    padding-top: 1px;

    &+ .conversation {
      border-top: none;
      padding-top: 1px;
    }
  }

  &:hover .conversation-actions,
  &.hover .conversation-actions {
    display: block;
  }
}

.conversation-header {
  color: $gray-darker;
  cursor: pointer;
  padding: 20px 40px;
  position: relative;

  > .status {
    left: 15px;
    top: 55px;
    z-index: 1;
    position: absolute;
  }

  > .avatar {
    float: left;
    margin-right: $padding-xs-horizontal;
  }

  > .person {
    color: $gray-dark;
  }

  .tag-label {
    padding-right:5px;
  }
}


.conversation-subject {
  padding-top: $padding-small-vertical;

  strong {
    font-size: 18px;
    font-weight: 600;
  }
}

.conversation-preview {
  padding-top: $padding-small-vertical;
}

.conversation-response {
  border-top: 1px solid $brand-border;
  padding: 20px 40px;

  .form-control {
    height: auto !important;
  }
}
