@import 'settings';
@import '../avatar/settings';
@import '../../typography/settings';
@import '../forms/settings';
@import '../../settings/focus';
@import '../avatar/mixins';
@import '../../tools/mixins/flex';
@import '../../tools/mixins/focus';

@mixin list-item-section(
  $order: 0,
  $margin-left: 0,
  $margin-right: 0,
  $flex-grow: 1,
  $flex-shrink: 1,
  $flex-basis: auto
) {
  height: 100%;
  margin-right: $margin-right;
  margin-left: $margin-left;
  order: $order;
  flex: $flex-grow $flex-shrink $flex-basis;
}

@mixin list-item-size(
  $padding: $list-item__padding,
  $height: $list-item__height,
  $section-margin: $list-item__section-margin-side,
  $avatar-size: $list-item__avatar__dimension,
  $avatar-font-size: $list-item__avatar__font-size
) {
  height: $height;
  padding: $padding;

  > [class$='__left'] {
    margin-right: $section-margin;

    > .#{$prefix}-list-item__avatar {
      @include avatar-size($size: $avatar-size, $font-size: $avatar-font-size);
    }
  }

  > [class$='__right'] {
    margin-left: $section-margin;
  }
}

@mixin list-item() {
  @include flex($jc: flex-start);

  position: relative;
  width: 100%;
  font-size: $list-item__font-size;
  line-height: $list-item__line-height;
  white-space: nowrap;
  cursor: pointer;
  flex: 1 1 auto;

  > .#{$list-item__class} {
    &__center {
      @include flex($ai: flex-start, $fd: column);
      @include list-item-section($order: 1);

      width: 100%;
      overflow: hidden;
    }

    &__center-align {
      @include flex($fd: column);

      width: 100%;
      overflow: hidden;
    }

    &__left {
      @include flex;
      @include list-item-section($order: 0, $flex-shrink: 0);
    }

    &__right {
      @include flex;
      @include list-item-section($order: 2, $flex-shrink: 0);
    }
  }

  .#{$list-item__class} {
    &__header {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &__subheader {
      width: 100%;
      overflow: hidden;
      font-size: $list-item__font-size--subheader;
      line-height: $list-item__line-height--subheader;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  &:disabled,
  &.disabled {
    pointer-events: none;
  }

  &.#{$list-item__class}--separator {
    border-right: none;
    border-bottom: $list-item-separator;

    .#{$list__class}--horizontal > & {
      border-right: $list-item-separator;
      border-bottom: none;
    }
  }

  .cui-input-group {
    margin-bottom: 0;
  }
}

@mixin list-item--dark(
  $color: $list-item__color--dark,
  $subheader-color: $list-item__color--subheader--dark,
  $background-color: $list-item__background--dark,
  $background-color--hover: $list-item__background--hover--dark,
  $background-color--active: $list-item__background--pressed--dark,
  $separator-border: $list-item-separator--dark
) {
  .#{$dark-class} & {
    color: $color;
    background-color: $background-color;
  }

  .#{$list-item__class} {
    &__header {
      .#{$dark-class} & {
        color: $color;
      }
    }

    &__subheader {
      .#{$dark-class} & {
        color: $subheader-color;
      }
    }
  }

  &:hover:not(.disabled):not(.#{$list-item__class}--read-only):not(:active):not(.active),
  &:focus:not(.disabled):not(.#{$list-item__class}--read-only):not(:active):not(.active),
  &.focus:not(.disabled):not(.#{$list-item__class}--read-only):not(:active):not(.active) {
    .#{$dark-class} & {
      color: $color;
      background-color: $background-color--hover;
    }
  }

  &:active,
  &.active {
    .#{$dark-class} & {
      color: $color;
      background-color: $background-color--active;
    }
  }

  &:focus,
  &.focus {
    .#{$dark-class} & {
      @include focus-styles;
    }
  }

  &.#{$list-item__class}--separator {
    .#{$dark-class} & {
      border-right: none;
      border-bottom: $separator-border;
    }

    .#{$list__class}--horizontal > & {
      .#{$dark-class} & {
        border-right: $separator-border;
        border-bottom: none;
      }
    }
  }
}

@mixin list-item--contrast(
  $color--contrast: $list-item__color--contrast,
  $color--dark--contrast: $list-item__color--dark--contrast,
  $color--active--contrast: $list-item__color--contrast,
  $color--dark--active--contrast: $list-item__color--dark--active--contrast,
  $subheader-color--contrast: $list-item__color--subheader--contrast,
  $subheader-color--dark--contrast: $list-item__color--subheader--dark--contrast,
  $background-color--contrast: $list-item__background--contrast,
  $background-color--dark--contrast: $list-item__background--dark--contrast,
  $background-color--hover--contrast: $list-item__background--hover--contrast,
  $background-color--hover--dark--contrast:
    $list-item__background--hover--dark--contrast,
  $background-color--active--contrast: $list-item__background--active--contrast,
  $background-color--active--dark--contrast:
    $list-item__background--active--dark--contrast
) {
  .#{$contrast-class} & {
    color: $color--contrast;
    background-color: $background-color--contrast;
  }

  .#{$contrast-class}.#{$dark-class} &,
  .#{$contrast-class} .#{$dark-class} & {
    color: $color--dark--contrast;
    background-color: $background-color--dark--contrast;
  }

  .#{$list-item__class} {
    &__header {
      .#{$contrast-class} & {
        color: $subheader-color--contrast;
      }

      .#{$contrast-class}.#{$dark-class} &,
      .#{$contrast-class} .#{$dark-class} & {
        color: $subheader-color--dark--contrast;
      }
    }

    &__subheader {
      .#{$contrast-class} & {
        color: $subheader-color--contrast;
      }

      .#{$contrast-class}.#{$dark-class} &,
      .#{$contrast-class} .#{$dark-class} & {
        color: $subheader-color--dark--contrast;
      }
    }
  }

  &:hover:not(.disabled):not(.#{$list-item__class}--read-only):not(:active):not(.active),
  &:focus:not(.disabled):not(.#{$list-item__class}--read-only):not(:active):not(.active),
  &.focus:not(.disabled):not(.#{$list-item__class}--read-only):not(:active):not(.active) {
    .#{$contrast-class} & {
      color: $color--contrast;
      background-color: $background-color--hover--contrast;
    }

    .#{$contrast-class}.#{$dark-class} &,
    .#{$contrast-class} .#{$dark-class} & {
      color: $color--dark--contrast;
      background-color: $background-color--hover--dark--contrast;
    }
  }

  &:active,
  &.active {
    .#{$contrast-class} & {
      color: $color--active--contrast;
      background-color: $background-color--active--contrast;
    }

    .#{$contrast-class}.#{$dark-class} &,
    .#{$contrast-class} .#{$dark-class} & {
      color: $color--dark--active--contrast;
      background-color: $background-color--active--dark--contrast;
    }
  }
}

@mixin list-item-color(
  // Color must stay at top for hoisting reasons
  $color: $list-item__color,
  $active-color: $color,
  $hover-color: $color,
  $active-bgrd-color: $list-item__background--pressed,
  $active-section-left-color: $active-color,
  $active-section-right-color: $active-color, 
  $background-color: $list-item__background,
  $disabled-opacity: $list-item__opacity--disabled,
  $focus-color: $color,
  $header-color: $color,
  $hover-bgrd-color: $list-item__background--hover,
  $includeFocus: true,
  $section-left-color: $color,
  $section-right-color: $color, 
  $subheader-color: $list-item__color--subheader
) {
  color: $color;
  background-color: $background-color;

  .#{$list-item__class} {
    &__header {
      color: $header-color;
    }

    &__subheader {
      color: $subheader-color;
    }

    &__left {
      color: $section-left-color;
      fill: $section-left-color;      
    }

    &__right {
      color: $section-right-color;
      fill: $section-right-color;
    }
  }

  &:hover:not(.disabled):not(.#{$list-item__class}--read-only):not(:active):not(.active),
  &:focus:not(.disabled):not(.#{$list-item__class}--read-only):not(:active):not(.active),
  &.focus:not(.disabled):not(.#{$list-item__class}--read-only):not(:active):not(.active) {
    color: $hover-color;
    background-color: $hover-bgrd-color;
  }

  &:active,
  &.active {
    color: $active-color;
    background-color: $active-bgrd-color;

    .#{$list-item__class} {
      &__left {
        color: $active-section-left-color;
        fill: $active-section-left-color;      
      }
  
      &__right {
        color: $active-section-right-color;
        fill: $active-section-right-color;
      }
    }
  }

  @if $includeFocus {
    &:focus,
    &.focus {
      @include focus-styles;
    }
  }

  &:disabled,
  &.disabled {
    opacity: $list-item__opacity--disabled;
  }
}