.collection {
  border: 1px solid $separator-color;
  border-radius: $base-border-radius;
  overflow: hidden;
  position: relative;

  .collection-item {

    background-color: #fff;
    line-height: 1.5rem;
    padding: 10px 20px;
    margin: 0;
    border-bottom: 1px solid $separator-color;

    &:last-child {
      border-bottom: none;
    }

    &.active {
      background-color: $collection-active-bg-color;
      color: $collection-active-color;
    }

  }
  a.collection-item {
    display: block;
    color: $base-font-color;
    transition: .17s;
    &:not(.active) {
      &:hover {
        background-color: $collection-hover-bg-color;
      }
    }
  }

  a.collection-item.disabled {
    background-color: $disabled-bg-color;
    color: $disabled-color;
    cursor: default;
    pointer-events: none;
    &:not(.active) {
      &:hover {
        background-color: $disabled-bg-color;
      }
    }
  }

  &.with-header {
    .collection-header {
      background-color: #fff;
      border-bottom: 1px solid $separator-color;
      padding: 10px 20px;
    }
    .collection-item {
      padding-left: 30px;
    }
  }

}