//
// LIST
//

.list {
  @include background-clip(padding-box);
  @include border-radius($list-border-radius);

  padding: 0;
  cursor:pointer;

  img[src] {
    display: block;
  }
}

.list-item {
  @include background($list-background);
  list-style-type: none;
  padding: px-to-rem(10) px-to-rem(25) px-to-rem(10) px-to-rem(10);
  position: relative;
  color: $list-title-text-color;
  border: px-to-rem(1) solid $list-border-color;
  margin-top: px-to-rem(-1);
  z-index:0;
}

.list-item.active {
  @include background($list-active-background);

  * {
    color: $list-active-text-color;
  }
}

.list-item.removable:not(.track) {
  @include transition(-webkit-transform 300ms ease-out, opacity 300ms ease-out);
}

.list-item.arrow:after {
  @include transform(rotate(45deg));
  @include transform-origin(50% 50%);

  content:"";

  border-top: $list-arrow-thickness solid $list-arrow-color;
  border-right: $list-arrow-thickness solid $list-arrow-color;

  width: $list-arrow-size*2;
  height: $list-arrow-size*2;

  position: absolute;
  right: px-to-rem(16);
  top: 50%;
  margin-top: -1.5*($list-arrow-size);
}

.list-item.arrow.active:after {
  border-color: $list-active-arrow-color;
}

.list-item:first-child, .list-item:first-child a {
  @include border-radius-top($list-border-radius);
  border-top: px-to-rem(1) solid $list-border-color;
}

.list-item:last-child, .list-item:last-child a {
  @include border-radius-bottom($list-border-radius);
}

.list-item-title {
  font-size: $list-title-font-size;
  font-weight: $list-title-font-weight;
  font-style: $application-font;
}

.list-item-subtitle {
  color: $list-subtitle-text-color;
  font-weight: normal;
  font-size: $list-subtitle-font-size;
}

.list-item-image {
  margin-right: px-to-rem(8);
}

.group-item {
  @extend .list-item;
  @include background($list-group-header-background);
  @include background-clip(padding-box);
  @include sticky(0px);

  padding: px-to-rem(5) px-to-rem(25) px-to-rem(5) px-to-rem(10);
  height: $list-group-header-height;
  line-height: $list-group-header-height;
  color: $list-group-header-color;

  z-index: 10;
}

.group-item-title {
  font: $list-group-header-font;
}

.group-item-image {
  margin-right: px-to-rem(8);
}

// Special treatment of first group-item because of border-radius and sticky position.
.group-item:first-child {
  @include border-radius(0);
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
  background-color: $navigationpage-background;
  border-width: 0 !important;
}

.group-item:first-child:after {
  @extend .list-item;
  @include background($list-group-header-background);
  @include background-clip(padding-box);
  position:absolute;
  content: "";
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display:block;
  z-index: -1;
}