.list-item {
  background-color: $white;
  border: $border-width solid $border-color;
  padding-left: $spacing-xs;
  @include border-radius($border-radius);
  .btn:first-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .media {
    min-height: 40px;
    height: 100%;
  }
}

.list-item.list-item-danger {
  @extend .bg-danger;
  color: $white;
  .list-actions{
    border-left: $border-width solid $white;
  }
}

.list-item.filled {
  background-color: $gray-lighter;
  color: $black;
}

.list-item.disabled {
  cursor: not-allowed;
  opacity: 1;
  background-color: $white;
  background-image: url("@images/pattern-striped-bright.png");
  background-repeat: repeat;
  border-color: $gray-lighter;
  color: $gray-light;
  .btn.btn-primary {
    background-image: url("@images/pattern-stripes-petrol.png");
    background-repeat: repeat;
    border-color: $white-transparenter;
    color: $white-transparent;
  }
}


//////// New clean listitem ////////

.list-listitems .listitem,
.list-listitems .listitem-wrapper,
.list-listitems .listitem-with-footer {
  margin-bottom: $spacing-xs;
}

.listitem,
.listitem-wrapper .listitem-header,
details.listitem .listitem-header {
  position: relative;
  display: grid;
  grid-template-areas:  "badge title actions"
                        "badge metrics actions";
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: stretch;
  border: none;
  @include media-breakpoint-up(sm) {
    grid-template-areas:  "badge title metrics actions";
    grid-template-columns: auto 1fr auto auto;
  }
}

.listitem {
  min-height: $btn-height;
  border: $border-width solid $border-color;
  border-radius: $border-radius;
  background-color: $card-bg-gray;
}

details.listitem {
  grid: none;
}

.listitem-with-footer {
  display: grid;
}

.listitem.white {
  color: $black;
  background-color: $white;
}

a.listitem:hover {
  color: $white;
  background-color: $link-hover-color;
  border-color: $link-hover-color;
  .listitem-label {
    color: $white;
  }
  .icon {
    color: $white !important;
  }
}

.listitem[open] > .listitem-header {
  border-bottom: $border-width solid $white;
  border-radius: $border-radius $border-radius 0 0;
}

.listitem .collapse-btn {
  width: $btn-height;
  padding: $spacing-xs $spacing-xxs $spacing-xxs $spacing-xxs;
  justify-content: center;
  align-items: start;
  &:hover:after {
    background-color: $white;
  }
}

.listitem[open] > .listitem-header .collapse-btn {
  border-radius: 0;
  &:last-child {
    border-radius: 0 $border-radius 0 0;
  }
}

.listitem .collapse-btn:after {
  content: "";
  display: inline-block;
  width: $spacing-sm;
  height: $icon;
  background-color: $primary;
  mask-image: url("@images/arrow-down.svg");
  mask-repeat: no-repeat;
}

.listitem[open] > .listitem-header .collapse-btn:after {
  mask-image: url("@images/arrow-up.svg");
}

.listitem-badge {
  grid-area: badge;
  display: flex;
  align-items: start;
  justify-content: center;
  width: $btn-height;
  padding: $spacing-xs $spacing-xxs $spacing-xxs $spacing-xxs;
  color: $white;
  background-color: $black;
  border-radius: $border-radius 0 0 $border-radius;
}

.listitem-badge.success {
  background-color: $success;
}

.listitem-badge.danger {
  background-color: $danger;
}

.listitem[open] > .listitem-header .listitem-badge {
  border-bottom-left-radius: 0;
}

.listitem-badge .counter {
  width: $icon;
  height: $icon;
  margin: 0;
  color: $black;
  background-color: $white;
  border-radius: 50%;
}

.listitem-title {
  grid-area: title;
  flex-grow: 1;
  padding: $spacing-xs $spacing-sm 0 $spacing-sm;
  margin-bottom: $spacing-xs;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  line-height: 1.4;
}

.listitem-label {
  display: inline;
  margin-left: $spacing-sm;
  font-size: $font-size-label-sm;
  color: $gray-darker;
}

.listitem-metrics {
  grid-area: metrics;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  padding: 0 $spacing-sm 0 $spacing-sm;
  @include media-breakpoint-up(sm) {
    padding: $spacing-xs $spacing-sm 0 $spacing-sm;
  }
}

.listitem-metric {
  display: flex;
  margin-right: $spacing-xs;
  margin-bottom: $spacing-xs;
  & .icon {
    margin-right: $spacing-xxs;
  }
  &:last-child {
    margin-right: 0;
  }
}

.listitem-actions {
  grid-area: actions;
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  margin-top: (-$border-width);
  margin-right: (-$border-width);
}

.listitem-actions summary {
  display: contents;
}

.listitem-actions .btn {
  height: 100%;
  border-radius: 0;
  margin-left: 1px;
  &:last-child {
    border-radius: 0 $border-radius $border-radius 0;
  }
}

.listitem-actions .btn-secondary {
  padding-left: $spacing-xs;
  padding-right: $spacing-xs;
  border-color: transparent;
}

.listitem-content {
  padding: $spacing-sm;
}

.listitem-card {
  position: relative;
  margin-bottom: $spacing-md;
  padding: $spacing-sm;
  background-color: $white;
  border-radius: $border-radius;
  &:last-child {
    margin-bottom: 0;
  }
}

.listitem-card img {
  max-width: 100%;
}

.listitem-subheadline {
  margin-bottom: $spacing-xs;
  font-size: $font-size-label;
  font-weight: 600;
  text-transform: uppercase;
}

.listitem[open] > .listitem-header .listitem-actions .btn {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.listitem .section-collapsable {
  margin-bottom: $spacing-md;
}

.listitem .section-header::after {
  border-bottom-color: $gray-light;
}

.listitem .section-header .section-title {
  background-color: $card-bg-gray;
}

////// Nested listitems, Styles for white listitems //////

.listitem-content .listitem {
  background-color: $white;
}

.listitem-content .listitem[open] > .listitem-header,
.listitem.white[open] > .listitem-header {
  border-bottom: $border-width solid $card-bg-gray;
}

.listitem-content .listitem .listitem-card,
.listitem.white .listitem-card {
  background-color: $gray-lightest;
}

.listitem-content .listitem .section-header::after,
.listitem.white .section-header::after {
  border-bottom-color: $border-color;
}

.listitem-content .listitem .section-header .section-title,
.listitem.white .section-header .section-title {
  background-color: $white;
}

//////// Listitem selectable ////////

.listitem-check input {
  display: none;
}

.listitem-check {
  grid-area: badge;
  display: flex;
  align-items: center;
  justify-content: center;
  width: $btn-height;
}

.listitem-check label {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 100%;
  height: 100%;
  margin-bottom: 0;
  background-color: transparent;
  border-radius: $border-radius 0 0 $border-radius;
  border-right: $border-width solid $white;
}

.listitem-check label::after {
  content: "";
  display: inline-block;
  height: $spacing-md;
  width: $spacing-md;
  background-color: $white;
  border: $border-width solid $primary;
  border-radius: $border-radius;
}

.listitem-check input:checked + label {
  background-color: $info;
}

.listitem-check input:checked + label::after {
  border: none;
}

.listitem-check input:checked + label::before {
  content: "";
  position: absolute;
  display: inline-block;
  height: $spacing-md;
  width: $spacing-md;
  mask-image: url("@images/checkbox-background-white.svg");
  mask-repeat: no-repeat;
  background-color: $info;
}

.listitem[open] .listitem-check label {
  border-bottom-left-radius: 0;
}

////// Listitem with action footer //////

.listitem-with-footer .listitem {
  margin-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.listitem-with-footer .listitem-badge {
  border-bottom-left-radius: 0;
}

.listitem-with-footer .listitem-actions .btn:last-child {
  border-bottom-right-radius: 0;
}

.listitem-with-footer .listitem .listitem-content {
  border-radius: 0;
}

.listitem-with-footer .listitem-footer,
.listitem-actionbar {
  display: flex;
  width: 100%;
}

.listitem-actionbar {
  padding: $spacing-xs $spacing-sm; 
  background-color: $actionbar;
  border-bottom-left-radius: $border-radius;
  border-bottom-right-radius: $border-radius;
}

.listitem-actionbar > .btn {
  margin-right: $spacing-xs;
}

.listitem-actionbar .btn.disabled, 
.listitem-actionbar .btn:disabled {
  border-color: $white-transparenter;
  color: $white-transparent;
  background-color: $petrol;
  background-image: url("@images/pattern-stripes-petrol.png");
  .icon {
    color: $white-transparent;
  }
}

.listitem-with-footer .listitem-footer .btn {
  padding-left: $spacing-sm;
  padding-right: $spacing-sm;
  margin: 0;
  border-radius: 0;
  border-left: $border-width solid $white;

  &:first-child {
    border-bottom-left-radius: $border-radius;
    border-left: none;
  }

  &:last-child {
    border-bottom-right-radius: $border-radius;
  }
}

.listitem-with-footer .listitem-footer .dropdown-actions .btn {
  border-left: $border-width solid $white;
  border-bottom-left-radius: 0;
}

.listitem-with-footer .listitem-footer .btn-primary {
  flex-grow: 1;
}

.listitem-with-footer .listitem-footer .btn-secondary {
  flex: 1;
  color: $white;
  background-color: $primary;
  border-top: none;
  border-right: none;
  border-bottom: none;
  &:hover, &:focus, &:active {
    background-color: $link-hover-color;
  }
}

.listitem-with-footer .listitem-footer .btn-square {
  flex: auto;
  flex-grow: 0;
  flex-shrink: 0;
}

// Non collapsable list item with separate header and content areas

.listitem-wrapper {
  display: flex;
  flex-direction: column;
  background-color: transparent;
}

.listitem-wrapper .listitem-header {
  border-radius: $border-radius $border-radius 0 0;
  margin-bottom: 1px;
  background-color: $card-bg-gray;
}

.listitem-wrapper .listitem-content {
  background-color: $card-bg-gray;
}

.listitem-wrapper .listitem-content:last-child {
  border-radius: 0 0 $border-radius $border-radius;
}

.listitem-wrapper .list-actions .btn {
  border-bottom-right-radius: 0;
}