$padding: 14px;

.ui-group {
  &:not(:last-child) {
    margin-bottom: 20px;
  }


  &.control {
    > .group-title {

      .group-icon {
        transition: transform .1s ease;
        cursor: pointer;

        &.show {
          transform: rotateZ(180deg);
        }
      }
    }
    > div.group-title .group-icon.show {
      transform: translateY(-50%) rotateZ(180deg);
    }

    .group-content {
      overflow: hidden;
      &.ready {
        transition: max-height .1s ease;
      }
    }
  }

  > .group-title {
    font-size: var( --big-size);
    margin-bottom: $padding;
    color: var(--colors-color);

    .group-icon {
      display: inline-flex;
      align-items: center;
    }
  }

  > div.group-title {
    position: relative;

    .group-icon {
      position: absolute;
      width: 14px;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  > h3.group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .border-bottom {
    padding-bottom: $padding;
    border-bottom: 1px solid var(--colors-border-color);
  }
  .border-top {
    padding-top: $padding;
    border-top: 1px solid var(--colors-border-color);
  }

  > .group-content {
    font-size: var( --medium-size);

    &.border-bottom {
      margin-bottom: 0;
    }
    &.border-top {
      margin-top: 0;
    }
  }

}

.group-option {
  &:not(:last-child) {
    margin-bottom: $padding;
  }

  > .group-option-label {
    display: block;
    margin-bottom: 10px;
    color: var(--colors-content-color);
  }
}