/** Toggle Block Styles */

.wp-block-hb-toggle {
  position: relative;
  margin: 1em 0;

  &.wp-block-hb-toggle--active {

    .wp-block-hb-toggle__title {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;

      &::before {
        background-image: url('../../img/minus-circle.svg');
      }

    }

    .wp-block-hb-toggle__content {
      max-height: 9999px;
      opacity: 1;
    }

  }

  .wp-block-hb-toggle__title {
    background: #f0f2f5;
    padding: 1em 1em 1em 45px;
    font-weight: bolder;
    line-height: 1;
    color: #333;
    position: relative;
    border-radius: 5px;

    &::before {
      position: absolute;
      top: 50%;
      left: 15px;
      margin-top: -10px;
      background-image: url('../../img/plus-circle.svg');
      background-repeat: no-repeat;
      background-position: center  center;
      background-size: 20px;
      display: block;
      width: 20px;
      height: 20px;
      content: '';
    }

    &:hover {
      cursor: pointer;
    }

  }

  .wp-block-hb-toggle__content {
    border: 1px solid #f0f2f5;
    border-top: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all .3s ease;

    .wp-block-hb-toggle__contentwrap {
      padding: 20px;

      p {

        &:last-child {
          margin-bottom: 0;
        }

      }

    }

  }

}