.my-environment-item__list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;

  &-title {
    @include text-ellipsis;
    align-self: stretch;
    width: calc(100% - 65px); //allows for controls to fit in different flex orders
  }

  &-content {
    order: 4;
    width: 100%;
  }

  .my-environment-header +& {
    margin-top: 20px;
  }

  &.closable--closed,
  &.closable--closed > * {
    margin: 0;
    padding: 0;
    border: 0 solid transparent;
    transition: max-height $transition-duration $transition-duration,
      padding $transition-duration $transition-duration,
      margin $transition-duration $transition-duration;
  }

  @include viewport--l {
    flex-wrap: nowrap;

    &-details {
      padding-top: 0;

      &:not(last-of-type) {
        padding-bottom: 0;
      }
    }

    &-title {
      width: calc((17/43) * 100%);
    }

    &-content {
      margin-top: unset;
      order: 2;
      width: calc((20/43) * 100%)
    }

    // regulate space between free header and first list item.
    .my-environment-header +& {
      margin-top: $spacing--m;
    }

    + .my-environment-container {
      padding-top: $spacing--s;
    }
  }
}
