/// list.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-

// Increase header line height
$list-header-line-height: 1em;

// Decrease the margin of H3 to counter the larger line height
$list-h3-margin: 0;

// Decrease default list item height
$list-item-height: 6 * $baseline-grid; // 48px

@import 'extends';

// Circle diameter of avatars
$sg-avatar-width: 40px;

// Circle diamter of color chips
$sg-color-chip-width: 16px;

md-list-item {
  &.md-with-secondary {
    &.md-accent.md-bg {
      .md-button {
        // List items with a secondary button must have a transparent background when highlighted
        // in order to honor the contrast color
        background-color: transparent;
      }
    }
  }

  .md-list-item-inner {
    flex-grow: 1; // use all column space
    overflow: hidden;

    // Gain some space since we want small list items
    & > md-checkbox {
      margin-top: 0px;
    }
  }
  md-icon,
  .md-button md-icon {
    margin-left: 0;
  }

  .sg-item-name {
    font-size: sg-size(button);
    max-width: 75%; // leave some place for a secondary button
    text-transform: initial;
    overflow: hidden;
    align-items: flex-start;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sg-inline-list-icon-label {
    text-transform: uppercase;
  }
}

.md-sidenav-left {
  md-list {
    padding: 0;
  }

  // Remove padding of input fields in the sidenav for better transitions between read and edit mode of a folder
  md-input-container {
    margin: 0;
    padding: 0;
    .md-input {
      padding-left: 0;
    }
  }

  md-list-item {
    .md-button {
      margin: 0;
      transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function;
    }
    // Gain some space on the right side of the folder icon
    .md-list-item-inner > md-icon:first-child,
    .md-list-item-inner > md-checkbox:first-child {
      margin-right: $bl * 2;
    }
  }
}

// Add some padding to the first icon in a list item
//.md-list-item-inner {
//  > i:first-child {
//    margin-left: $mg;
//  }
//}

// The right tile for a list item.
// ----------------------------------------------------------------------------
.md-tile-right {
  padding-right: $item-padding-right;
}
// The right tile for a list item (avatar container)
// ----------------------------------------------------------------------------

.md-tile-left,
.md-tile-right {
  display: block;
  border-radius: 50%;
  padding: $layout-gutter-width;
  padding: $baseline-grid * 1.5;
  padding: ($sg-md-grid-pitch - $sg-avatar-width) / 2;
  width: $sg-md-grid-pitch;
  height: $sg-md-grid-pitch;
  //line-height: $sg-md-grid-pitch + $baseline-grid;
  background-clip: content-box;
  md-icon {
    font-size: $sg-md-grid-pitch + $baseline-grid - 2 * $layout-gutter-width;
  }
}
.md-tile-right {
  margin-right: -$layout-gutter-width;
}
// Overqualifying to override a rule in source
div.md-tile-left {
  min-width: $sg-md-grid-pitch + $baseline-grid;
}

.sg-section-list {
  md-list-item {
    &.md-button-wrap {
      > .md-button:first-child {
        .md-list-item-inner {
          // Expect the container to include a sg-tile-icons
          padding-right: 0px;
        }
      }
    }
  }
}

.sg {
  &-color-chip {
    display: block;
    border-radius: 50%;
    margin: 0 $bl;
    border-color: white;
    border-style: solid;
    width: $sg-color-chip-width;
    height: $sg-color-chip-width;
  }

  &-tile-content {
    flex: 1;
    overflow: hidden; // required in Firefox
    .sg-tile-date {
      font-size: sg-size(body);
      font-weight: $sg-font-light;
      line-height: $sg-line-height-2;
      flex-shrink: 0;
    }
    .#{$md}-subhead {
      @extend .#{$md}-body-1;
      font-size: initial;
    }
    .#{$md}-body {
      @extend .#{$md}-caption;
    }
    .#{$md}-subhead,
    .#{$md}-body {
      display: flex;
      justify-content: space-between;
      align-items: center;
      > * {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  // Small tile of vertically-aligned icons
  &-tile-icons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    width: (2 * $mg);
    height: (2 + $sg-font-size-1) * 4; // (vertical padding + icon size) * max number of icons
  }

  &-counter-badge {
    border-left-width: 1px;
    border-left-color: $colorGrey500;
    border-style: solid;
    margin: 0;
    padding: 0 rem(0.500);
    font-size: $sg-font-size-1;
    font-weight: $sg-font-medium;
    text-transform: uppercase;
  }

  &-tile-content,
  &-tile-icons {
    md-icon {
      font-size: $sg-font-size-1;
      //color: $colorGray;
      margin: 1px 2px;
    }
  }

  /* Classes for ng-sortable */
  &-sortable-grip {
    &:hover {
      cursor: move;
    }
  }

  &-sortable-ghost {
    opacity: 0.5;
  }

  &-sortable-chosen {
    background-color: white;
  }
}

.card-picture {
  .md-avatar {
    display: block;
    // From md-list-item > .md-avatar:first-child
    width: $list-item-primary-avatar-width;
    height: $list-item-primary-avatar-width;
    margin-top: $baseline-grid;
    margin-bottom: $baseline-grid;
    margin-right: $list-item-primary-width - $list-item-primary-avatar-width;
    border-radius: 50%;
    box-sizing: content-box;
    img {
      width: initial !important;
    }
  }
}

sg-avatar-image {
  img {
    border-radius: 50%;
  }
}

// Avatar placeholder
// ------------------------------------
.md-avatar:before,
.md-avatar md-icon,
sg-avatar-image md-icon,
.sg-avatar-list {
  font-family: 'Material Icons';
  font-size: $sg-avatar-width;
  color: rgba(0, 0, 0, 0.26);
}
.sg-avatar-list {
  &:before {
    content: "\e7ef"; // group
  }
}
.sg-avatar-public {
  &:before {
    content: "\e80b"; // public
  }
}
.sg-avatar-selected {
  &:before {
    content: "\e5ca"; // check
  }
}
//.md-tile-left-accepted:before {
//  @extend .md-tile-left;
//  background-color: rgba(0, 255, 0, 0.3) !important;
//  content: "\e5ca"; // check
//  color: rgba(0, 0, 0, 0.5);
//}
//.md-tile-left-declined:before {
//  @extend .md-tile-left;
//  background-color: rgba(255, 0, 0, 0.3) !important;
//  content: "\e15b"; // remove
//  color: rgba(0, 0, 0, 0.5);
//}
//.md-tile-left-delegated:before {
//  @extend .md-tile-left;
//  background-color: rgba(192, 192, 192, 0.3) !important;
//  content: "\e5c8"; // arrow-forward
//  color: rgba(0, 0, 0, 0.5);
//}
//.md-tile-left-needs-action:before {
//  @extend .md-tile-left;
//  background-color: rgba(255, 255, 0, 0.3) !important;
//  content: "?";
//}
//.md-tile-left-tentative:before {
//  @extend .md-tile-left;
//  background-color: rgba(255, 255, 0, 0.3) !important;
//  content: "\e7fd"; // person
//}
//.sg-avatar {
//  @extend .md-tile-left-card;
//  margin-right: 0;
//  margin-left: 0;
//}
//.sg-list-avatar {
//  @extend .md-tile-left-list;
//  margin-right: 0;
//  margin-left: 0;
//}
//.sg-selected-avatar {
//  @extend .md-tile-left-selected;
//  margin-right: 0;
//  margin-left: 0;
//}
//.sg-accepted {
//  @extend .md-tile-left-accepted;
//  margin-right: 0;
//  margin-left: 0;
//}
//.sg-declined {
//  @extend .md-tile-left-declined;
//  margin-right: 0;
//  margin-left: 0;
//}
//.sg-delegated {
//  @extend .md-tile-left-delegated;
//  margin-right: 0;
//  margin-left: 0;
//}
//.sg-needs-action {
//  @extend .md-tile-left-needs-action;
//  margin-right: 0;
//  margin-left: 0;
//}
//.sg-tentative {
//  @extend .md-tile-left-tentative;
//  margin-right: 0;
//  margin-left: 0;
//}