.components-clause-render {
  display: flex;
  padding: 10px 15px;
  font-size: 12px;
  line-height: 1.4;
  background-color: white;
  max-width: 750px;
  > * {
    & + * {
      margin-left: 5px;
    }
  }

  [data-clause],
  .za-document,
  .za-module {
    color: var(--theme-primary);
  }

  .clause-ele {
    flex-shrink: 0;
    position: relative;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #ddd;

    &:before {
      content: '';
      display: inline-block;
      position: absolute;
      top: -5px;
      left: -5px;
      right: -5px;
      bottom: -5px;
    }

    .icon {
      position: absolute;
      top: 50%;
      left: 50%;
      font-size: 12px;
      transform-origin: center center;
      transform: translate(-50%, -50%) scale(.9);
    }

    &:not(.checked) {
      color: transparent;
    }

    &.checked {
      color: white;
      background-color: var(--theme-primary);
      border-color: var(--theme-primary);
    }
  }
}

.modal-clause {
  padding: 15px;

  .clause-item {
    display: block;
    color: var(--theme-primary);

    & + .clause-item {
      margin-top: 10px;
    }
  }
}