.list-item {
  &:first-child {
    margin-top: -$spacing--m; // negative margin on first-child to hide top spacing
  }
  // header
  &__header {
    @include font-style(
      $list-item-header-font-style,
      $list-item-header-font-style--l
    );
    display: inline;
  }

  &__header--badge {
    display: flex;
    flex-wrap: wrap;

    .list-item__link {
      margin-right: 10px;
    }
  }

  &__header--favorise {
    margin-right: 10px;
  }
  // title
  &__title:not(.list-item__title--split) {
    .list-item__controls {
      position: absolute;
    }
    // viewport s - m
    @include viewport--l('inversed') {
      position: relative;
    }
  }

  &__title--split {
    display: flex;
  }

  .badge {
    margin-top: 3px;
  }

  &__link {
    position: relative;
  }

  &__info {
    margin: $spacing--m 0;
  }
  // progress bar
  .progress-bar {
    margin-top: $baseline * 6.5;
  }
  // controls
  &__controls {
    flex-shrink: 0;
    margin-left: auto;
    top: -$baseline * 0.2;
    right: -10px;

    button {
      cursor: pointer;
      height: $baseline * 4;
      width: 40px;
    }

    .icon {
      top: $baseline * 0.3;
    }
  }

  &__save {
    height: $icon-size;
    top: $baseline * 0.3;

    &:focus {
      outline: 0;
    }
  }
  // description
  &__description {
    margin-top: $spacing--m;
  }

  &__description-list {
    .list-item__title + & {
      margin-top: $spacing--m;
    }
  }
  // icon toggler
  .icon__toggler:hover svg {
    fill: $color-brand--five;
  }

  // meta
  &__meta {
    .list-item__title + &,
    .progress-bar + & {
      margin-top: $spacing--s;
    }

    li {
      @include word-break;
    }
  }
  // feedback
  &__feedback {
    align-items: baseline;
    display: flex;
    margin-top: $spacing--s;

    .icon {
      margin-right: 10px;
      position: relative;
      top: $baseline * 0.2;
    }
  }
  // disabled
  &--disabled {
    .list-item__link {
      pointer-events: none;
    }
  }
  // closable
  &.closable--closed {
    border-bottom: 0 solid transparent;
    transition: max-height $transition-duration--fast $transition-duration--fast,
      border $transition-duration--fast $transition-duration--fast;

    .button--m,
    .button--clean:not([data-rs-closable]),
    .badge,
    .list-item__description,
    .list-item__feedback,
    .list-item__header,
    .list-item__link,
    .list-item__meta,
    .list-item__save {
      opacity: 0;
      transition: opacity $transition-duration--fast;
    }
  }
}

// viewport s - m
@include viewport--l('inversed') {
  .list-item {
    &:last-child {
      margin-bottom: -$baseline * 2.9; // remove addition white space at bottom of list
    }

    &__header + .distance-pin {
      margin-top: $spacing--xs;
    }

    &__controls {
      margin-top: -$baseline * 0.7;
      position: relative;
      top: $baseline * 0.3;
    }

    .list-item__info + .button {
      margin-bottom: $spacing--m;
    }

    &__title--control {
      padding-right: 30px;
    }

    &__description-list {
      dd + dt {
        margin-top: $spacing--s;
      }
    }

    &__logo {
      display: none;
    }
  }
}
// viewport l
@include viewport--l {
  .list-item {
    display: flex;
    position: relative;

    &:last-child {
      margin-bottom: -$spacing--l; // remove addition white space at bottom of list
    }

    &--l .list-item__info {
      margin-top: $spacing--l;
    }

    &--l:first-child {
      margin-top: -$spacing--l;
    }

    &--l .list-item__controls {
      top: $spacing--l;
    }
    // header
    &__header--badge .list-item__link {
      margin-right: 20px;
    }

    .badge {
      margin-top: $baseline * 0.8;
    }
    // progress bar
    .progress-bar {
      margin-top: $spacing--l;
      order: 1;
    }
    // controls & logo
    &__controls,
    &__logo {
      top: $spacing--m;
    }
    // controls
    &__controls {
      margin-top: 0;
      position: absolute;
    }

    &__save {
      &,
      .icon,
      svg {
        height: $icon-size--l;
        width: $icon-size--l;
      }
    }
    // info
    &__info {
      display: flex;
      flex: 1;
      flex-direction: column;
      margin-bottom: $spacing--l;
      max-width: 100%;
    }

    &__info + .button {
      align-self: flex-end;
      bottom: $spacing--l;
      margin-left: auto;
      position: relative;
    }
    // when there is no button
    &__info + .list-item__logo {
      margin-left: auto;
      position: inherit;
    }
    // title
    &__title {
      order: 0;
    }
    // meta
    &__meta {
      order: 2;

      .list-item__title &,
      .progress-bar + & {
        margin-top: $spacing--m;
      }

      &--row li {
        display: inline-block;
      }

      &--row li:not(:last-child) {
        margin-right: 50px;
      }
    }
    // description list
    &__description-list {
      display: flex;
      flex-wrap: wrap;

      dd,
      dt {
        margin-top: $baseline * 0.5;
      }

      dt {
        width: grid-columns(3, 8);
      }

      dd {
        margin-left: auto;
        width: grid-columns(5, 8);
      }
    }
    // description
    &__description {
      margin-top: $spacing--m;
      order: 4;

      p:last-child {
        margin-bottom: 0;
      }
    }
    // logo
    &__logo {
      max-height: $baseline * 6;
      max-width: 100px;
      overflow: hidden;
      position: absolute;
      right: 0;

      img {
        width: 100%;
      }
    }
    // distance pin
    .distance-pin {
      position: absolute;
      right: 0;
      top: $baseline * 4;
      z-index: 1;
    }

    .list-item__header + .distance-pin {
      line-height: 0;
      margin-left: 30px;
    }
    // feedback
    &__feedback {
      order: 5;
    }
  }
}

// button
// placed at bottom for cascading purposes
.list-item--button {
  &.list-item--button {
    margin-bottom: 0;
  }

  .button {
    margin-top: $spacing--m;
  }
}

// background mappings
@include list-item-background-mapping;
