ul.faq-items
  padding: 0
  margin: 0
  list-style: none

  li
    padding: 0 20px 0 40px
    border-bottom: 1px solid $lighterGrey
    background-color: transparent
    cursor: pointer
    transition: background-color 0.4s, border-bottom 0.4s

    .question
      +flex(space-between, center)
      padding: 18px 0

      p
        display: block
        width: calc(100% - 45px)
        margin: 0
        font-weight: bold
        font-size: 0.8rem
        line-height: 1.2
        color: $grey
        transition: color 0.3s

      span
        position: relative
        width: 25px
        height: 25px
        &:before, &:after
          position: absolute
          content: ''
          display: block
          background-color: $lighterGrey
          transition: background-color 0.3s, opacity 0.3s

        &:before
          width: 1px
          height: 25px
          left: 12px
          top: 0

        &:after
          width: 25px
          height: 1px
          left: 0
          top: 12px


    .answer
      font-size: 0.9rem
      line-height: 1.6
      overflow: hidden
      color: $grey
      transition: max-height 0.4s

      .inner-content
        padding-bottom: 40px

      p
        margin: 0

      .button
        margin-top: 20px
        background-color: $greyBlue
        border-radius: 6px

        &:hover
          background-color: darken($greyBlue, 10%)

    &:hover
      .question
        p
          color: $orange

        span
          &:before, &:after
            background-color: $orange

      .answer
        will-change: max-height

    &[data-open='true']
      background-color: $lighterGrey2
      border-bottom-color: rgba($lightGrey, 0.5)

      .advantages-own-guiding-row &, #howItWorks &, #properties &
        background-color: lighten($lighterGrey2, 2.5%)

      .question
        p
          color: $greyBluer

        span
          &:before, &:after
            background-color: $grey

          &:before
            opacity: 0

        &:hover
          span
            &:before, &:after
              background-color: $orange



    &[data-open='false']
      .answer
        max-height: 0!important