/**
* @name ListItem
* @description An element that can be used to create lists within selects or dropdowns.
* @category containers
* @component list-item
* @design collaboration-design
*/

@import '../tools/mixins/list-item';
@import '../tools/mixins/flex';
@import '../settings/list-item';

@include exports('cui-list-item') {
  // .#{cui} {
  .#{$list-item__class} {
    @include list-item;
    @include list-item-size;
    @include list-item-color;
    @include list-item--dark;
    @include list-item--contrast;

    &--large,
    &--52 {
      @include list-item-size(
        $height: $list-item--large__height,
        $section-margin: $list-item--large__section-margin-side,
        $avatar-size: $list-item--large__avatar__dimension,
        $avatar-font-size: $list-item__avatar__font-size
      );
      @include list-item-color;
    }

    &--xlarge,
    &--60 {
      @include list-item-size(
        $height: $list-item--xlarge__height,
        $section-margin: $list-item--large__section-margin-side,
        $avatar-size: $list-item--large__avatar__dimension,
        $avatar-font-size: $list-item__avatar__font-size
      );
      @include list-item--dark;
      @include list-item--contrast;
    }

    &--small,
    &--36 {
      @include list-item-size(
        $padding: $list-item--small__padding,
        $height: $list-item--small__height,
        $section-margin: $list-item--small__section-margin-side
      );
      @include list-item--dark;
      @include list-item--contrast;
    }

    &-header {
      @include list-item-size(
        $padding: $list-item-header__padding,
        $height: $list-item-header__height
      );
      @include list-item-color(
        $hover-bgrd-color: $list-item__background,
        $active-bgrd-color: $list-item__background,
        $header-color: $list-item-header__color
      );

      margin: $list-item-header__margin;
      font-size: rem-calc(14);
      cursor: default;

      &:focus,
      &.focus {
        outline: none;
      }

      &--space {
        @include list-item-color(
          $background-color: $list-item__background--dark,
          $hover-bgrd-color: $list-item__background--dark,
          $active-bgrd-color: $list-item__background--dark,
          $header-color: $list-item-header__color--dark
        );
      }

      @include list-item--dark(
        $color: $list-item-header__color--dark,
        $background-color--hover: $list-item__background--dark,
        $background-color--active: $list-item__background--dark
      );
      @include list-item--contrast;
    }
  }

  .#{$list__class} {
    &--vertical {
      @include flex($fd: column, $jc: flex-start);
      width: 100%;
      height: auto;

      .#{$list-item__class} {
        flex: 0 0 auto;
      }
    }

    &--horizontal {
      @include flex();

      height: 100%;

      .#{$list-item__class} {
        width: auto;

        @include flex;
      }
    }

    &--wrap {
      flex-wrap: wrap;
      justify-content: flex-start;
      align-content: flex-start;
    }
  }
  // }
}

/**
* @name List Item States
*
* @category containers
* @component list-item
* @section states
* @hidecode true
*
* @html
  <div class="list-states">
    <div class="row default-state">
      <div class="medium-12 row">

        <div class="medium-6 columns">
          <h4 class="text-center">Normal</h4>
          <div class="cui-list cui-list--vertical">
            <div class="cui-list-item">
              <div class="cui-list-item__left">
                <div class="cui-avatar">
                  <span class="cui-avatar__letter">M</span>
                </div>
              </div>
              <div class="cui-list-item__center">Normal</div>
            </div>
            <div class="cui-list-item hover">
              <div class="cui-list-item__left">
                <div class="cui-avatar">
                  <span class="cui-avatar__letter">M</span>
                </div>
              </div>
              <div class="cui-list-item__center">Hover</div>
            </div>
            <div class="cui-list-item active">
              <div class="cui-list-item__left">
                <div class="cui-avatar">
                  <span class="cui-avatar__letter">M</span>
                </div>
              </div>
              <div class="cui-list-item__center">Pressed</div>
            </div>
            <div class="cui-list-item focus">
              <div class="cui-list-item__left">
                <div class="cui-avatar">
                  <span class="cui-avatar__letter">M</span>
                </div>
              </div>
              <div class="cui-list-item__center">Focus</div>
            </div>
            <div class="cui-list-item disabled">
              <div class="cui-list-item__left">
                <div class="cui-avatar">
                  <span class="cui-avatar__letter">M</span>
                </div>
              </div>
              <div class="cui-list-item__center">Disabled</div>
            </div>
            <div class="cui-list-item">
              <div class="cui-list-item__left">
                <div class="cui-avatar">
                  <div class="cui-avatar__letter">UI</div>
                </div>
              </div>
              <div class="cui-list-item__center">
                <div class="cui-list-item__header">Normal</div>
                <div class="cui-list-item__subheader">Subheader</div>
              </div>
            </div>
            <div class="cui-list-item">
              <div class="cui-list-item__left">
                <div class="icon icon-record_20"></div>
              </div>
              <div class="cui-list-item__center">Normal Icon</div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
*/

/**
* @name List Item Contrast States
*
* @category containers
* @component list-item
* @section contrast-states
* @hidecode true
*
* @html
  <div class="list-states cui--contrast">
    <div class="row default-state">
      <div class="medium-12 row">

        <div class="medium-6 columns">
          <h4 class="text-center">Normal</h4>
          <div class="cui-list cui-list--vertical">
            <div class="cui-list-item">
              <div class="cui-list-item__left">
                <div class="cui-avatar">
                  <span class="cui-avatar__letter">M</span>
                </div>
              </div>
              <div class="cui-list-item__center">Normal</div>
            </div>
            <div class="cui-list-item hover">
              <div class="cui-list-item__left">
                <div class="cui-avatar">
                  <span class="cui-avatar__letter">M</span>
                </div>
              </div>
              <div class="cui-list-item__center">Hover</div>
            </div>
            <div class="cui-list-item active">
              <div class="cui-list-item__left">
                <div class="cui-avatar">
                  <span class="cui-avatar__letter">M</span>
                </div>
              </div>
              <div class="cui-list-item__center">Pressed</div>
            </div>
            <div class="cui-list-item focus">
              <div class="cui-list-item__left">
                <div class="cui-avatar">
                  <span class="cui-avatar__letter">M</span>
                </div>
              </div>
              <div class="cui-list-item__center">Focus</div>
            </div>
            <div class="cui-list-item disabled">
              <div class="cui-list-item__left">
                <div class="cui-avatar">
                  <span class="cui-avatar__letter">M</span>
                </div>
              </div>
              <div class="cui-list-item__center">Disabled</div>
            </div>
            <div class="cui-list-item">
              <div class="cui-list-item__left">
                <div class="cui-avatar">
                  <div class="cui-avatar__letter">UI</div>
                </div>
              </div>
              <div class="cui-list-item__center">
                <div class="cui-list-item__header">Normal</div>
                <div class="cui-list-item__subheader">Subheader</div>
              </div>
            </div>
            <div class="cui-list-item">
              <div class="cui-list-item__left">
                <div class="icon icon-record_20"></div>
              </div>
              <div class="cui-list-item__center">Normal Icon</div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
*/

/**
* @name Dark List Item States
*
* @category containers
* @component list-item
* @section dark-states
* @hidecode true
*
* @html
  <div class="list-states cui--dark">
    <div class="row default-state">
      <div class="medium-12 row">

        <div class="medium-6 columns">
          <h4 class="text-center">Normal</h4>
          <div class="cui-list cui-list--vertical" style="background-color:rgba(40,40,40,0.72);">
            <div class="cui-list-item">
              <div class="cui-list-item__left">
                <div class="cui-avatar">
                  <span class="cui-avatar__letter">M</span>
                </div>
              </div>
              <div class="cui-list-item__center">Normal</div>
            </div>
            <div class="cui-list-item hover">
              <div class="cui-list-item__left">
                <div class="cui-avatar">
                  <span class="cui-avatar__letter">M</span>
                </div>
              </div>
              <div class="cui-list-item__center">Hover</div>
            </div>
            <div class="cui-list-item active">
              <div class="cui-list-item__left">
                <div class="cui-avatar">
                  <span class="cui-avatar__letter">M</span>
                </div>
              </div>
              <div class="cui-list-item__center">Pressed</div>
            </div>
            <div class="cui-list-item focus">
              <div class="cui-list-item__left">
                <div class="cui-avatar">
                  <span class="cui-avatar__letter">M</span>
                </div>
              </div>
              <div class="cui-list-item__center">Focus</div>
            </div>
            <div class="cui-list-item disabled">
              <div class="cui-list-item__left">
                <div class="cui-avatar">
                  <span class="cui-avatar__letter">M</span>
                </div>
              </div>
              <div class="cui-list-item__center">Disabled</div>
            </div>
            <div class="cui-list-item">
              <div class="cui-list-item__left">
                <div class="cui-avatar">
                  <div class="cui-avatar__letter">UI</div>
                </div>
              </div>
              <div class="cui-list-item__center">
                <div class="cui-list-item__header">Normal</div>
                <div class="cui-list-item__subheader">Subheader</div>
              </div>
            </div>
            <div class="cui-list-item">
              <div class="cui-list-item__left">
                <div class="icon icon-record_20"></div>
              </div>
              <div class="cui-list-item__center">Normal Icon</div>
            </div>
          </div>

      </div>
    </div>
  </div>
*/

/**
* @name Dark List Contrast Item States
*
* @category containers
* @component list-item
* @section dark-contrast-states
* @hidecode true
*
* @html
  <div class="list-states cui--dark cui--contrast">
    <div class="row default-state">
      <div class="medium-12 row">

        <div class="medium-6 columns">
          <h4 class="text-center">Normal Contrast</h4>
          <div class="cui-list cui-list--vertical" style="background-color:rgba(40,40,40,0.72);">
            <div class="cui-list-item">
              <div class="cui-list-item__left">
                <div class="cui-avatar">
                  <span class="cui-avatar__letter">M</span>
                </div>
              </div>
              <div class="cui-list-item__center">Normal Contrast</div>
            </div>
            <div class="cui-list-item hover">
              <div class="cui-list-item__left">
                <div class="cui-avatar">
                  <span class="cui-avatar__letter">M</span>
                </div>
              </div>
              <div class="cui-list-item__center">Hover Contrast</div>
            </div>
            <div class="cui-list-item active">
              <div class="cui-list-item__left">
                <div class="cui-avatar">
                  <span class="cui-avatar__letter">M</span>
                </div>
              </div>
              <div class="cui-list-item__center">Pressed</div>
            </div>
            <div class="cui-list-item focus">
              <div class="cui-list-item__left">
                <div class="cui-avatar">
                  <span class="cui-avatar__letter">M</span>
                </div>
              </div>
              <div class="cui-list-item__center">Focus</div>
            </div>
            <div class="cui-list-item disabled">
              <div class="cui-list-item__left">
                <div class="cui-avatar">
                  <span class="cui-avatar__letter">M</span>
                </div>
              </div>
              <div class="cui-list-item__center">Disabled</div>
            </div>
            <div class="cui-list-item">
              <div class="cui-list-item__left">
                <div class="cui-avatar">
                  <div class="cui-avatar__letter">UI</div>
                </div>
              </div>
              <div class="cui-list-item__center">
                <div class="cui-list-item__header">Normal</div>
                <div class="cui-list-item__subheader">Subheader</div>
              </div>
            </div>
            <div class="cui-list-item">
              <div class="cui-list-item__left">
                <div class="icon icon-record_20"></div>
              </div>
              <div class="cui-list-item__center">Normal Icon</div>
            </div>
          </div>

      </div>
    </div>
  </div>
*/