// Item
// --------------------------------------------------

$item-min-height:         44px !default;
$item-padding:            15px !default;


.item {
  position: relative;

  @include flex-display();
  @include flex-justify-content(space-between);
  @include flex-align-items(center);

  width: 100%;
  min-height: $item-min-height;
  margin: 0;
  padding: 0;
  border: 0;
  text-align: initial;
}

ion-primary-swipe-buttons,
.item-content {
  transition: transform 0.3s;
}

ion-primary-swipe-buttons {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  transform: translate3d(-100%,0,0);

  &:not(.open):not(.changing) {
    display: none;
  }
  &.open {
    transform: translate3d(100%, 0, 0);
  }
}


// Item Content
// --------------------------------------------------

.item-content {
  // TODO add proper bg to cover up swipe buttons
  background: white;
  transform: translate3d(0,0,0);

  position: relative;

  @include flex-display();
  @include flex(1);
  @include flex-justify-content(space-between);
  @include flex-align-items(center);

  width: 100%;
  min-height: $item-min-height;

  padding: 0;
}

.item-label {
  position: relative;

  @include flex-display();
  @include flex(1);
  @include flex-shrink(1);

  max-width: 100%;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-content {
  h1, h2, h3, h4, h5, h6 {
    align-self: flex-start;
  }
}



// Item Media (Icons, checkboxes, images, etc.)
// --------------------------------------------------

.item-media {
  @include flex-display();
  @include flex-shrink(0);
  @include flex-wrap(nowrap);
  @include flex-align-items(center);

  min-height: $item-min-height;
  padding: 0;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-media + .item-label {
  padding-left: $item-padding;
}

.item-media:last-child {
  padding-right: $item-padding;
}

.item-note {
  color: #aaa;
  font-size: 1.4rem;
}

.item-avatar {
  padding-top: ($item-padding / 2) - 1;
  padding-bottom: ($item-padding / 2) + 1;

  img {
    max-width: 40px;
    max-height: 40px;
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}

.item-full {

}