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

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

$item-divider-bg:                 #f5f5f5 !default;
$item-divider-color:              #222 !default;
$item-divider-padding:            5px 15px !default;



.item {
  position: relative;

  display: flex;
  justify-content: space-between;
  align-items: center;

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

.item-group {
}
.item-group-title {
  display: block;
  padding: $item-padding;
  padding-top: ceil($item-padding / 2);
  padding-bottom: ceil($item-padding / 2);
  min-height: 30px;
  background-color: $item-divider-bg;
  color: $item-divider-color;
  font-weight: 500;

  width: 100%;
  z-index: 100;

  &.sticky {
    position: -webkit-sticky;
  	top: 0;
  }
}

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;

  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;

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

  padding: 0;
}

.item-label {
  position: relative;

  display: flex;
  flex: 1;
  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 {
  display: flex;
  flex-shrink: 0;
  flex-wrap: nowrap;
  align-items: center;

  max-width: 100%;
  min-height: $item-min-height;
  padding: 0;

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

  img {
    max-width: 100%;
  }
}

.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 {

}