.ias-list {
  list-style: none;
  margin: 0;
  max-width: $list-max-width;
  padding: 0;

  > li,
  > .ias-list-item {
	  border-radius: $border-radius-small;
    box-sizing: content-box;
    display: flex;
    flex-flow: row nowrap;
    height: $list-item-height;
    line-height: $list-item-height;
    padding: $spacing;

    &:focus,
    &:hover {
      background-color: $list-item-bg-color-hover;
      color: inherit;
      outline: none;
    }

    &.ias-offset {
      padding-left: (2 * $spacing) + $list-item-avatar-size;
    }

    > span {
      @include single-line;

      display: inline-block;
      flex: 1 1;
    }

    > .ias-avatar {
      flex: 0 0 $list-item-avatar-size;
      height: $list-item-avatar-size;
      width: $list-item-avatar-size;
    }

    > .ias-icon {
      font-size: $list-item-avatar-size;
    }

    > .ias-icon,
    > .ias-avatar {
      &:first-child {
        margin-right: $spacing;
      }
    }
  }
}

.ias-list-header {
  color: $list-header-text-color;
  font-size: $list-header-font-size;
  font-weight: $list-header-font-weight;
  margin: $list-header-margin;
  padding: 0;
  text-transform: $list-header-text-transform;
}

[dir="rtl"] {
  .ias-list {
    > li,
    > .ias-list-item {
      &.ias-offset {
        padding-left: $spacing;
        padding-right: (2 * $spacing) + $list-item-avatar-size;
      }

      > .ias-icon,
      > .ias-avatar {
        &:first-child {
          margin-left: $spacing;
          margin-right: 0;
        }
      }
    }
  }
}