@import "../../styles/variables.scss";

.listItem {
  padding: $m-spacing $m-spacing;
  position: relative;
  border-radius: $base-border-radius;
  margin-top: -$base-border-width;

  &:not(:last-child):after {
    position: absolute;
    content: '';
    padding: 0 $m-spacing;
    bottom: 0;
    transform: translateX(-50%);
    left: 50%;
  }
}

.nearWhite {
  &:not(:last-child):after {
    border-bottom: $base-border-width solid $brand-nearWhite;
  }
}

.lightGrey {
  &:not(:last-child):after {
    border-bottom: $base-border-width solid $brand-lightGrey;
  }
}

.fullBorder {
  &:not(:last-child):after {
    width: 100%;
  }
}

.shortBorder {
  &:not(:last-child):after {
    width: calc(100% - #{$m-spacing});
  }
}

.listItem.itemHover:hover {
  background-color: $brand-nearWhite;
  border: none;
  cursor: pointer;
}

.listGroup {
  display: block;
}