/** @component list-item */

@import 'mixins';
@import 'settings';

@include exports('cui-list-item') {
  .#{$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;
    }
  }
}