.c-list {
  $self: #{&};

  $item: #{$self}-item;
  $item-start: #{$item}__start;
  $item-body: #{$item}__body;
  $item-end: #{$item}__end;

  @at-root {

    #{$self} {
      display: block;
      width: 100%;
      max-width: 100%;
    }

    /*
    ** Item
    */
    #{$item} {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      max-width: 100%;
      margin-bottom: 6px;
      padding: 6px 12px;
      border-radius: $g-border-radius;
      cursor: pointer;

      &:hover,
      &:focus,
      &.is-active {
        background-color: $color-primary;
        color: #fff;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }
    #{$item-start},
    #{$item-end} {
      flex: 0 0 auto;
    }

    #{$item-start} {
      margin-right: 10px;
    }

    #{$item-body} {
      flex: 1 1 auto;
    }

    #{$item-end} {
      margin-left: 10px;
    }

  }

}