@import '~styles/config';

.listItems {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: $gutter;

  .imageContainer {
    display: none;

    @media (min-width: $min-tablet) {
      display: block;
    }
    margin-left: -$gutter;
    width: 25%;
  }

  &__title {
    @include responsive-font(30,24);

    margin-bottom: $gutter;

    font-family: $font-heading;
    font-weight: 600;
  }

  &__list {
    width: 100%;
  }
}

.listItem {

  display: flex;

  padding: $gutter*0.5 0;
  border-bottom: 1px solid $color-grey100;

  transition: background-color 300ms ease-in-out;

  &.clickable {
    cursor: pointer;
  }

  &__wrapper {
    display: flex;
    justify-content: space-between;

    width: calc(100% - 40px);
  }

  &__value {
    font-weight: 500;
    color: $color-dark;
  }

  &__edit {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    height: 24px;
    width: 40px;

    &SVG {
      @include colorify('fill');
      transform: rotate(270deg);

      &.isOpen {
        transform: rotate(360deg);
      }
    }
  }
}