@import '../tools/mixins/core';
@import '../tools/mixins/buttons';
@import '../tools/mixins/flex';
@import '../tools/mixins/list-item';
@import '../settings/buttons';
@import '../settings/colors';
@import '../settings/icon';
@import '../settings/fonts';
@import '../settings/list-item';
@import 'list-item';

@include exports('cui-list-item--space') {
  // .#{cui} {
  .#{$list-item__class} {
    &--space {
      @include list-item-size(
        $padding: $list-item--space__padding,
        $height: $list-item--large__height,
        $section-margin: $list-item--space__section-margin-side,
        $avatar-size: $list-item--space__avatar__dimension,
        $avatar-font-size: $list-item--space__avatar__font-size
      );

      @include list-item-color(
        $background-color: $list-item--space__background,
        $color: $list-item--space__color,
        $hover-bgrd-color: $list-item--space__background--hover,
        $active-bgrd-color: $list-item--space__background--pressed,
        $header-color: $list-item--space__color--header,
        $subheader-color: $list-item--space__color--header,
        $focus-color: $list-item__color--dark
      );
      @include list-item--contrast(
        $color--contrast: $list-item__color--dark--contrast,
        $color--active--contrast: $list-item__color--dark--active--contrast,
        $subheader-color--contrast: $list-item__color--subheader--dark--contrast,
        $background-color--contrast: $list-item__background--dark--contrast,
        $background-color--hover--contrast: $list-item__background--hover--dark--contrast,
        $background-color--active--contrast: $list-item__background--active--dark--contrast
      );

      &-filter-summary {
        height: $list-item--space-overview__height;
        padding: $list-item--space-overview__padding;

        >[class$='__left'] {
          fill: $list-item--space__color;
        }

        [class*='__header'] {
          color: $list-item--space__color;
        }
      }

      &-search,
      &-filter,
      &-flag,
      &-filter-search {
        justify-content: flex-start;
        align-items: flex-start;
        height: auto;
        min-height: $list-item--search__min-height;
        max-height: $list-item--search__max-height;
        padding: $list-item__search__padding;

        >[class$='__left'] {
          height: 100%;
          padding-top: rem-calc(3);
        }

        >[class$='__center'] {
          justify-content: flex-start;
          height: auto;

          >[class*='__header'] {
            @include flex($jc: space-between);
            flex: 1 0 auto;

            >[class$='-main'] {
              flex: 1 1 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            >[class$='-secondary'] {
              flex: 1 0 auto;
              font-family: $brand-font-regular;
              line-height: rem-calc(18);
              font-size: rem-calc(12);
              color: $list-item__color--subheader--dark;
            }
          }

        }

        [class$='__result-container'] {
          @include flex;
          width: 100%;

          [class$='__attachment'] {
            font-size: rem-calc(14);
            line-height: rem-calc(22);
          }

          [class$='__attachment'] {
            width: 100%;

            [class$='__attachment--top'] {
              @include flex($jc: flex-start);

              [class$='-left'] {
                overflow: hidden;
                font: inherit;
                height: rem-calc(22);
                text-overflow: ellipsis;
                white-space: nowrap;
                color: $list-item--space__color--header;
                flex: 1 1 100%;
              }

              [class$='-right'] {
                padding-left: rem-calc(15);
                fill: $white;
              }

            }


            [class$='__attachment--bottom'] {
              fill: $white;
              font-family: $brand-font-bold;
              font-weight: bold;
              height: rem-calc(22);
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }

        [class$='__result'] {
          font-size: rem-calc(14);
          line-height: rem-calc(22);
          white-space: initial;
          height: auto;
          min-height: rem-calc(22);
          max-height: rem-calc(44);
          flex: 1 1 100%;
          color: $list-item--space__color--header;
        }

        [class$='--highlight'] {
          color: $mint-light;
        }
      }

      &-filter:not(.cui-list-item--unread),
      &-filter-search:not(.cui-list-item--unread),
      &-flag:not(.cui-list-item--unread) {

        &:active,
        &.active {
          >[class$='__center'] {
            [class$='__header'],
            [class$='__header--overview'] {
              color: $list-item--space__color--header;
            }
          }
        }

        >[class$='__center'] {
          [class$='__header'],
          [class$='__header--overview'] {
            color: $list-item--space__color--header;
          }
        }
      }

      &-filter-search {
        [class$='__result'] {
          height: rem-calc(22);
          max-height: rem-calc(22);
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
      }

      [class$='__header--overview'] {
        color: $list-item--space__color;


        >[class$='--highlight'] {
          font-family: $brand-font-bold;
        }
      }

      &.#{$list-item__class}--unread {
        .#{$list-item__class}__header {
          font-family: $brand-font-bold;
          color: $list-item--space__color;
        }
      }

      &:active,
      &.active {
        color: $list-item--space__color;

        .#{$list-item__class}__header {
          color: $list-item--space__color;
          .#{$contrast-class} & {
            color: $list-item__color--dark--active--contrast;
          }
        }
      }

      &-meeting {
        padding: $list-item--space-meeting__padding;

        .#{$button__class} {
          @include button-color-focus($color: $focus__color--dark);
        }

        &--attendees {

          @include flex;
          height: 100%;

          padding: 0 rem-calc(6) 0 rem-calc(10);
          font-size: rem-calc(14);
          line-height: rem-calc(12);
          color: $list-item--space__color--header;
          fill: $list-item--space__color--header;

          &:focus {
            box-shadow: none;
          }

          .#{$icon__class} {
            margin-left: rem-calc(2);
          }
        }

        .#{$prefix}-event-overlay__children {
          width: 240px;
          max-height: 308px;
          cursor: default;
          overflow: auto;

          .#{$list-item__class} {

            @include list-item-color(
              $background-color: $list-item__background,
              $focus-color: transparent,
              $hover-bgrd-color: $list-item__background,
              $active-bgrd-color: $list-item__background
            );

          }
        }

        .#{$button__class} {
          height: rem-calc(28);
          min-width: 0;
          padding: 0 rem-calc(14);
          font-size: rem-calc(14);
        }
      }
    }
  }
  // }
}

/**
* @component space-list
* @section default
* @html
<div class="medium-4 columns">
  <div class="cui-list cui-list--vertical cui-list" role="list" style="background-color: black;">
    <div aria-current="true" class="cui-list-item cui-list-item--space" id="cui-list-110__sl-item" role="listItem" tabindex="0"
      title="Overview Item">
      <div class="cui-list-item__left">
        <div class="cui-avatar cui-avatar--medium">
          <span class="cui-avatar__icon cui-avatar__icon--overview">
            <i class="cui-icon icon icon-handset_24"></i>
          </span>
        </div>
      </div>
      <div class="cui-list-item__center">
        <div class="cui-list-item__header cui-list-item__header--overview">Overview Item</div>
        <div class="cui-list-item__subheader"></div>
      </div>
      <div class="cui-list-item__right"></div>
    </div>
    <div aria-current="false" class="cui-list-item cui-list-item--space" id="cui-list-110__sl-item" role="listItem" tabindex="-1"
      title="Header Only">
      <div class="cui-list-item__left">
        <div class="cui-avatar cui-avatar--medium" title="NA">
          <span class="cui-avatar__letter">N</span>
        </div>
      </div>
      <div class="cui-list-item__center">
        <div class="cui-list-item__header">Header Only</div>
        <div class="cui-list-item__subheader"></div>
      </div>
      <div class="cui-list-item__right"></div>
    </div>
    <div aria-current="false" class="cui-list-item cui-list-item--space  cui-list-item--unread" id="cui-list-110__sl-item" role="listItem"
      tabindex="-1" title="Bold Unread">
      <div class="cui-list-item__left">
        <div class="cui-avatar cui-avatar--medium" title="NA">
          <span class="cui-avatar__letter">N</span>
        </div>
      </div>
      <div class="cui-list-item__center">
        <div class="cui-list-item__header">Bold Unread</div>
        <div class="cui-list-item__subheader"></div>
      </div>
      <div class="cui-list-item__right">
        <i class="icon icon-unread-badge_16" style="font-size: 12px; color: rgb(7, 193, 228);"></i>
      </div>
    </div>
    <div aria-current="false" class="cui-list-item cui-list-item--space  cui-list-item--unread" id="cui-list-110__sl-item" role="listItem"
      tabindex="-1" title="Bold Mentioned">
      <div class="cui-list-item__left">
        <div class="cui-avatar cui-avatar--medium" title="NA">
          <span class="cui-avatar__letter">N</span>
        </div>
      </div>
      <div class="cui-list-item__center">
        <div class="cui-list-item__header">Bold Mentioned</div>
        <div class="cui-list-item__subheader"></div>
      </div>
      <div class="cui-list-item__right">
        <i class="cui-icon icon icon-mention_12" style="color: #07C1E4"></i>
      </div>
    </div>
    <div aria-current="false" class="cui-list-item cui-list-item--space" id="cui-list-110__sl-item" role="listItem" tabindex="-1"
      title="isAlertOn">
      <div class="cui-list-item__left">
        <div class="cui-avatar cui-avatar--medium" title="NA">
          <span class="cui-avatar__letter">N</span>
        </div>
      </div>
      <div class="cui-list-item__center">
        <div class="cui-list-item__header">isAlertOn</div>
        <div class="cui-list-item__subheader"></div>
      </div>
      <div class="cui-list-item__right">
        <i class="cui-icon icon icon-alert_12" style="color:rgba(255, 255, 255, 0.6)"></i>
      </div>
    </div>
    <div aria-current="false" class="cui-list-item cui-list-item--space" id="cui-list-110__sl-item" role="listItem" tabindex="-1"
      title="isMuted">
      <div class="cui-list-item__left">
        <div class="cui-avatar cui-avatar--medium" title="NA">
          <span class="cui-avatar__letter">N</span>
        </div>
      </div>
      <div class="cui-list-item__center">
        <div class="cui-list-item__header">isMuted</div>
        <div class="cui-list-item__subheader"></div>
      </div>
      <div class="cui-list-item__right">
        <i class="cui-icon icon icon-alert-muted_12" style="color: rgba(255, 255, 255, 0.6)"></i>
      </div>
    </div>
    <div aria-current="false" class="cui-list-item cui-list-item--space disabled" id="cui-list-110__sl-item" role="listItem"
      tabindex="-1" title="Disabled">
      <div class="cui-list-item__left">
        <div class="cui-avatar cui-avatar--medium" title="NA">
          <span class="cui-avatar__letter">N</span>
        </div>
      </div>
      <div class="cui-list-item__center">
        <div class="cui-list-item__header">Disabled</div>
        <div class="cui-list-item__subheader">subheader</div>
      </div>
      <div class="cui-list-item__right"></div>
    </div>
    <div aria-current="false" class="cui-list-item cui-list-item--space" id="cui-list-110__sl-item" role="listItem" tabindex="-1"
      title="Subheader as Node">
      <div class="cui-list-item__left">
        <div class="cui-avatar cui-avatar--medium" title="NA">
          <span class="cui-avatar__letter">N</span>
        </div>
      </div>
      <div class="cui-list-item__center">
        <div class="cui-list-item__header">Subheader as Node</div>
        <div class="cui-list-item__subheader">
          <span style="color: rgb(152, 213, 202);">Marketing</span>
        </div>
      </div>
      <div class="cui-list-item__right"></div>
    </div>
    <div aria-current="false" class="cui-list-item cui-list-item--read-only cui-list-item-header cui-list-item-header--space"
      id="cui-list-item-116" role="listItem" title="List Header-Type(space)">
      <div class="cui-list-item__center">
        <div class="cui-list-item__header">List Header-Type(space)</div>
      </div>
      <div class="cui-list-item__right">
        <a>More</a>
      </div>
    </div>
    <div aria-current="false" class="cui-list-item cui-list-item--space" id="cui-list-110__sl-item" role="listItem" tabindex="-1"
      title="Header with SearchTerm">
      <div class="cui-list-item__left">
        <div class="cui-avatar cui-avatar--medium" title="NA">
          <span class="cui-avatar__letter">N</span>
        </div>
      </div>
      <div class="cui-list-item__center">
        <div class="cui-list-item__header cui-list-item__header--overview">Header with
          <span class="cui-list-item__header--highlight">Search</span>Term</div>
        <div class="cui-list-item__subheader"></div>
      </div>
      <div class="cui-list-item__right"></div>
    </div>
    <div aria-current="false" class="cui-list-item cui-list-item--space" id="cui-list-110__sl-item" role="listItem" tabindex="-1"
      title="Both Headers w/ SearchTerm">
      <div class="cui-list-item__left">
        <div class="cui-avatar cui-avatar--medium" title="NA">
          <span class="cui-avatar__letter">N</span>
        </div>
      </div>
      <div class="cui-list-item__center">
        <div class="cui-list-item__header cui-list-item__header--overview">Both Headers w/
          <span class="cui-list-item__header--highlight">Search</span>Term</div>
        <div class="cui-list-item__subheader">Searchable subheader</div>
      </div>
      <div class="cui-list-item__right"></div>
    </div>
    <div aria-current="false" class="cui-list-item cui-list-item--space" id="cui-list-110__sl-item" role="listItem" tabindex="-1"
      title="Subheader(node)-searchTerm">
      <div class="cui-list-item__left">
        <div class="cui-avatar cui-avatar--medium" title="NA">
          <span class="cui-avatar__letter">N</span>
        </div>
      </div>
      <div class="cui-list-item__center">
        <div class="cui-list-item__header cui-list-item__header--overview">Subheader(node)-
          <span class="cui-list-item__header--highlight">search</span>Term</div>
        <div class="cui-list-item__subheader">
          <span style="color: rgb(215, 171, 225);">Searching</span>
        </div>
      </div>
      <div class="cui-list-item__right"></div>
    </div>
    <div aria-current="false" class="cui-list-item cui-list-item--space  cui-list-item--space-search" id="cui-list-110__sl-item"
      role="listItem" tabindex="-1" title="Type(search)">
      <div class="cui-list-item__left">
        <div class="cui-avatar cui-avatar--medium" title="NA">
          <span class="cui-avatar__letter">N</span>
        </div>
      </div>
      <div class="cui-list-item__center">
        <div class="cui-list-item__header cui-list-item__header--overview">
          <span class="cui-list-item__header-main">Type(search)</span>
          <span class="cui-list-item__header-secondary">16:00</span>
        </div>
        <div class="cui-list-item__center cui-list-item__result-container">
          <div class="cui-list-item__result">HighlightColor changes
            <span class="cui-list-item__subheader--highlight" style="color: white;">search</span> color</div>
        </div>
      </div>
    </div>
    <div aria-current="false" class="cui-list-item cui-list-item--space  cui-list-item--space-filter" id="cui-list-110__sl-item"
      role="listItem" tabindex="-1" title="Type(filter)">
      <div class="cui-list-item__left">
        <div class="cui-avatar cui-avatar--medium" title="NA">
          <span class="cui-avatar__letter">N</span>
        </div>
      </div>
      <div class="cui-list-item__center">
        <div class="cui-list-item__header cui-list-item__header--overview">
          <span class="cui-list-item__header-main">Type(filter)</span>
          <span class="cui-list-item__header-secondary">12/03/2018</span>
        </div>
        <div class="cui-list-item__center cui-list-item__result-container">
          <div class="cui-list-item__result">headerSecondary=string</div>
        </div>
      </div>
    </div>
    <div aria-current="false" class="cui-list-item cui-list-item--space  cui-list-item--space-filter-search" id="cui-list-110__sl-item"
      role="listItem" tabindex="-1" title="Type(filter-search)">
      <div class="cui-list-item__left">
        <div class="cui-avatar cui-avatar--medium" title="NA">
          <span class="cui-avatar__letter">N</span>
        </div>
      </div>
      <div class="cui-list-item__center">
        <div class="cui-list-item__header cui-list-item__header--overview">
          <span class="cui-list-item__header-main">Type(filter-search)</span>
          <span class="cui-list-item__header-secondary">12/03/2018</span>
        </div>
        <div class="cui-list-item__center cui-list-item__result-container">
          <div class="cui-list-item__result">For search after a
            <span class="cui-list-item__subheader--highlight">(filter)</span>
          </div>
        </div>
      </div>
    </div>
    <div aria-current="false" class="cui-list-item cui-list-item--space  cui-list-item--space-filter-summary" id="cui-list-110__sl-item"
      role="listItem" tabindex="-1" title="Type(filter-summary) (8)">
      <div class="cui-list-item__left">
        <i class="cui-icon icon icon-alert_12"></i>
      </div>
      <div class="cui-list-item__center">
        <div class="cui-list-item__header">Type(filter-summary) (8)</div>
        <div class="cui-list-item__subheader"></div>
      </div>
    </div>
    <div aria-current="false" class="cui-list-item cui-list-item--space  cui-list-item--space-flag" id="cui-list-110__sl-item"
      role="listItem" tabindex="-1" title="Type(flag)-attachments">
      <div class="cui-list-item__left">
        <div class="cui-avatar cui-avatar--medium" title="NA">
          <span class="cui-avatar__letter">N</span>
        </div>
      </div>
      <div class="cui-list-item__center">
        <div class="cui-list-item__header">
          <span class="cui-list-item__header-main">Type(flag)-attachments</span>
          <span class="cui-list-item__header-secondary">12/03/2018</span>
        </div>
        <div class="cui-list-item__center cui-list-item__result-container">
          <div class="cui-list-item__center cui-list-item__attachment">
            <div class="cui-list-item__attachment--top">
              <div class="cui-list-item__center cui-list-item__attachment--top-left">resultRight=node, attachments=[node]</div>
              <div class="cui-list-item__right cui-list-item__attachment--top-right">
                <i class="cui-icon icon icon-flag-active_12"></i>
              </div>
            </div>
            <div class="cui-list-item__attachment--bottom">
              <span>
                <i class="cui-icon" name="document_12"></i>
                <span>Ideas.pdf</span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div aria-current="false" class="cui-list-item cui-list-item--space  cui-list-item--space-flag" id="cui-list-110__sl-item"
      role="listItem" tabindex="-1" title="Type(flag)">
      <div class="cui-list-item__left">
        <div class="cui-avatar cui-avatar--medium" title="NA">
          <span class="cui-avatar__letter">N</span>
        </div>
      </div>
      <div class="cui-list-item__center">
        <div class="cui-list-item__header">
          <span class="cui-list-item__header-main">Type(flag)</span>
          <span class="cui-list-item__header-secondary">08/03/2018</span>
        </div>
        <div class="cui-list-item__center cui-list-item__result-container">
          <div class="cui-list-item__center cui-list-item__attachment">
            <div class="cui-list-item__attachment--top">
              <div class="cui-list-item__center cui-list-item__attachment--top-left">header&amp;subheader=node</div>
              <div class="cui-list-item__right cui-list-item__attachment--top-right">
                <i class="cui-icon icon icon-flag-active_12"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
*/

/**
* @component space-list
* @section space-list-meeting
* @html
<div class="medium-5 columns">
  <div class="cui-list cui-list--vertical cui-list" role="list" style="background-color: rgba(40, 40, 40, 0.72);">
    <div aria-current="true" class="cui-list-item cui-list-item--space active cui-list-item--space-meeting" id="cui-list-465__sl-item"
      role="listItem" title="Attendees Prop">
      <div class="cui-list-item__left">
        <div class="cui-avatar cui-avatar--medium" title="Attendees Prop">
          <span class="cui-avatar__letter">AP</span>
        </div>
      </div>
      <div class="cui-list-item__center">
        <div class="cui-list-item__header">Attendees Prop</div>
        <div class="cui-list-item__subheader">must be very long long long long long message message</div>
      </div>
      <div class="cui-list-item__right">
        <span>
          <span role="button" class="cui-list-item--space-meeting--attendees">14
            <i class="cui-icon icon icon-people_12"></i>
          </span>
        </span>
        <button class="cui-button cui-button--28 cui-button--green" alt="Now" type="button" aria-label="Now">
          <span class="cui-button__children" style="opacity: 1;">Now</span>
        </button>
      </div>
    </div>
    <div aria-current="false" class="cui-list-item cui-list-item--space cui-list-item--space-meeting cui-list-item--unread"
      id="cui-list-465__sl-item" role="listItem" title="isBold(true)">
      <div class="cui-list-item__left">
        <div class="cui-avatar cui-avatar--medium" title="isBold(true)">
          <span class="cui-avatar__letter">i</span>
        </div>
      </div>
      <div class="cui-list-item__center">
        <div class="cui-list-item__header">isBold(true)</div>
        <div class="cui-list-item__subheader">subheader</div>
      </div>
      <div class="cui-list-item__right"></div>
    </div>
    <div aria-current="false" class="cui-list-item cui-list-item--space cui-list-item--space-meeting" id="cui-list-465__sl-item"
      role="listItem" title="MeetingType(group)">
      <div class="cui-list-item__left">
        <div class="cui-avatar cui-avatar--group cui-avatar--medium" title="MeetingType(group)">
          <span class="cui-avatar__letter">M</span>
        </div>
      </div>
      <div class="cui-list-item__center">
        <div class="cui-list-item__header">MeetingType(group)</div>
        <div class="cui-list-item__subheader">subheader</div>
      </div>
      <div class="cui-list-item__right">
        <button class="cui-button cui-button--28 cui-button--green" alt="In 5 Min" type="button" aria-label="In 5 Min">
          <span class="cui-button__children" style="opacity: 1;">In 5 Min</span>
        </button>
      </div>
    </div>
    <div aria-current="false" class="cui-list-item cui-list-item--space cui-list-item--space-meeting" id="cui-list-465__sl-item"
      role="listItem" title="MeetingType(number)">
      <div class="cui-list-item__left">
        <div class="cui-avatar cui-avatar--medium" title="#">
          <span class="cui-avatar__letter">#</span>
        </div>
      </div>
      <div class="cui-list-item__center">
        <div class="cui-list-item__header">MeetingType(number)</div>
        <div class="cui-list-item__subheader">subheader</div>
      </div>
      <div class="cui-list-item__right">
        <button class="cui-button cui-button--28 cui-button--green" alt="2:25" type="button" aria-label="2:25">
          <span class="cui-button__children" style="opacity: 1;">2:25</span>
        </button>
      </div>
    </div>
    <div aria-current="false" class="cui-list-item cui-list-item--space cui-list-item--space-meeting" id="cui-list-465__sl-item"
      role="listItem" title="MeetingType(device)">
      <div class="cui-list-item__left">
        <div class="cui-avatar cui-avatar--medium">
          <span class="cui-avatar__icon">
            <i class="cui-icon icon icon-spark-board_16"></i>
          </span>
        </div>
      </div>
      <div class="cui-list-item__center">
        <div class="cui-list-item__header">MeetingType(device)</div>
        <div class="cui-list-item__subheader"></div>
      </div>
      <div class="cui-list-item__right">
        <span>
          <span role="button" class="cui-list-item--space-meeting--attendees">3
            <i class="cui-icon icon icon-people_12"></i>
          </span>
        </span>
        <button class="cui-button cui-button--28 cui-button--green" alt="30:25" type="button" aria-label="30:25">
          <span class="cui-button__children" style="opacity: 1;">30:25</span>
        </button>
      </div>
    </div>
    <div aria-current="false" class="cui-list-item cui-list-item--space cui-list-item--space-meeting" id="cui-list-465__sl-item"
      role="listItem" title="ChildrenLeft Prop">
      <div class="cui-list-item__left">
        <div class="cui-avatar cui-avatar--medium">
          <span class="cui-avatar__icon">
            <i class="cui-icon icon icon-mention_12">
            </i>
          </span>
        </div>
      </div>
      <div class="cui-list-item__center">
        <div class="cui-list-item__header">ChildrenLeft Prop</div>
        <div class="cui-list-item__subheader"></div>
      </div>
      <div class="cui-list-item__right">
        <span>
          <span role="button" class="cui-list-item--space-meeting--attendees">3
            <i class="cui-icon icon icon-people_12"></i>
          </span>
        </span>
        <button class="cui-button cui-button--28 cui-button--green" alt="30:25" type="button" aria-label="30:25">
          <span class="cui-button__children" style="opacity: 1;">30:25</span>
        </button>
      </div>
    </div>
  </div>
</div>
*/