@import '../core/style/variables';
@import '../core/style/list-common';


$md-list-side-padding: 16px;
$md-list-avatar-size: 40px;
$md-list-icon-size: 24px;

// Normal list variables
$md-list-top-padding: 8px;
$md-list-font-size: 16px;
$md-list-secondary-font: 14px;
// height for single-line lists
$md-list-base-height: 48px;
// height for single-line lists with avatars
$md-list-avatar-height: 56px;
// spec requires two- and three-line lists be taller
$md-list-two-line-height: 72px;
$md-list-three-line-height: 88px;

// Dense list variables
$md-dense-top-padding: 4px;
$md-dense-font-size: 13px;
$md-dense-base-height: 40px;
$md-dense-avatar-height: 48px;
$md-dense-two-line-height: 60px;
$md-dense-three-line-height: 76px;

// This mixin provides all list-item styles, changing font size and height
// based on whether the list is in dense mode.
@mixin md-list-item-base($font-size, $base-height, $avatar-height,
  $two-line-height, $three-line-height) {

  // Prevents the wrapper `md-list-item` from collapsing due to it being `inline` by default.
  display: block;

  .md-list-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-family: $md-font-family;
    box-sizing: border-box;
    font-size: $font-size;
    height: $base-height;
    padding: 0 $md-list-side-padding;
  }

  &.md-list-avatar .md-list-item {
    height: $avatar-height;
  }

  &.md-2-line .md-list-item {
    height: $two-line-height;
  }


  &.md-3-line .md-list-item {
    height: $three-line-height;
  }

  // list items with more than 3 lines should expand to match
  // the height of its contained text
  &.md-multi-line .md-list-item {
    height: 100%;
    padding: 8px $md-list-side-padding;
  }

  .md-list-text {
    @include md-line-wrapper-base();
    padding: 0 $md-list-side-padding;

    &:first-child {
      padding: 0;
    }
  }

  [md-list-avatar] {
    flex-shrink: 0;
    width: $md-list-avatar-size;
    height: $md-list-avatar-size;
    border-radius: 50%;
  }

  [md-list-icon] {
    width: $md-list-icon-size;
    height: $md-list-icon-size;
    border-radius: 50%;
    padding: 4px;
  }
}

// This mixin provides all subheader styles, adjusting heights and padding
// based on whether the list is in dense mode.
@mixin md-subheader-base($top-padding, $secondary-size, $base-height) {
  display: block;
  box-sizing: border-box;
  height: $base-height;
  padding: $md-list-side-padding;
  margin: 0;

  font-size: $secondary-size;
  font-weight: 500;

  &:first-child {
    margin-top: -$top-padding;
  }
}

md-list, md-nav-list {
  padding-top: $md-list-top-padding;
  display: block;

  [md-subheader] {
    @include md-subheader-base(
      $md-list-top-padding,
      $md-list-secondary-font,
      $md-list-base-height
    );
  }


  md-list-item, a[md-list-item] {
    @include md-list-item-base(
      $md-list-font-size,
      $md-list-base-height,
      $md-list-avatar-height,
      $md-list-two-line-height,
      $md-list-three-line-height
    );

    @include md-line-base($md-list-secondary-font);
  }
}


md-list[dense], md-nav-list[dense] {
  padding-top: $md-dense-top-padding;
  display: block;

  [md-subheader] {
    @include md-subheader-base(
      $md-dense-top-padding,
      $md-dense-font-size,
      $md-dense-base-height
    );
  }

  md-list-item, a[md-list-item] {
    @include md-list-item-base(
      $md-dense-font-size,
      $md-dense-base-height,
      $md-dense-avatar-height,
      $md-dense-two-line-height,
      $md-dense-three-line-height
    );

    @include md-line-base($md-dense-font-size);
  }
}

md-divider {
  display: block;
  border-top-style: solid;
  border-top-width: 1px;
  margin: 0;
}

md-nav-list {
  a {
    text-decoration: none;
    color: inherit;
  }

  .md-list-item {
    cursor: pointer;

    &:hover, &.md-list-item-focus {
      outline: none;
    }
  }
}