@import "../base";
@import "./config";

.list {
  position: relative;
  display: inline-block;
  width: 100%;
  padding: $list-vertical-padding 0;
  text-align: left;
  white-space: nowrap;
  list-style: none;
}

.subheader {
  padding-left: $list-horizontal-padding;
  margin: - $list-vertical-padding 0 0;
  font-size: $list-subheader-font-size;
  font-weight: $list-subheader-font-weight;
  line-height: $list-subheader-height;
  color: $color-text-secondary;
}

.divider {
  height: $list-divider-height;
  margin: - $list-divider-height 0 0;
  background-color: $color-divider;
  border: 0;
  &.inset {
    margin-right: $list-horizontal-padding;
    margin-left: $list-content-left-spacing;
  }
  .list + & {
    margin-top: - $list-vertical-padding;
  }
  .list-item ~ & {
    margin: $list-vertical-padding 0;
  }
}

.item {
  position: relative;
  display: flex;
  min-height: $list-item-min-height;
  align-items: center;
  padding: 0 $list-horizontal-padding;
  overflow: hidden;
  color: $color-text;
  &.selectable:not(.disabled):hover {
    cursor: pointer;
    background-color: $list-item-hover-color;
  }
  &.with-legend {
    height: $list-item-min-height-legend;
  }
  &.disabled {
    pointer-events: none;
    &:not(.checkbox-item) {
      opacity: .5;
    }
    > .checkbox > [data-role='label'] {
      opacity: .5;
    }
  }
}

.checkbox {
  display: flex;
  width: 100%;
  min-height: $list-item-min-height;
  align-items: center;
  margin: 0;
  cursor: pointer;
  > [data-role='checkbox'] {
    margin-right: $list-item-right-icon-margin;
  }
  > [data-role='label'] {
    padding-left: 0;
  }
}

.ripple {
  opacity: .1;
}

.text {
  flex-grow: 1;
}

.caption {
  display: block;
  font-size: $font-size-normal;
  color: $color-text;
}

.legend {
  display: block;
  padding-top: $list-item-legend-margin-top;
  font-size: $font-size-small;
  color: $color-text-secondary;
  white-space: normal;
}

.avatar {
  display: flex;
  width: $list-item-avatar-height;
  height: $list-item-avatar-height;
  margin: $list-item-avatar-margin $list-horizontal-padding $list-item-avatar-margin 0;
  overflow: hidden;
  border-radius: 50%;
}

.right, .left {
  display: flex;
  align-items: center;
  vertical-align: middle;
  &.icon {
    font-size: $list-item-icon-font-size;
    color: $color-text-secondary;
  }
}

.right {
  margin-left: $list-horizontal-padding;
}

.left {
  &.icon {
    width: $list-item-icon-size;
    margin-right: $list-item-right-icon-margin;
  }
}