.row.form-group(*ngIf="outlineHidden")
	.col-4.col-lock-box
		label.text-muted.color-label {{label}}
		check-box.lock-box(
			*ngIf="hasLock && !nonLockable" [(checked)]="locked" (checkedChange)="onLockedChange($event)"
			[icon]="lockIcon" label="Automatic color")
	.col-8
		color-picker(
			[(color)]="fill" (colorChange)="onFillChange($event)" [isDisabled]="locked" [label]="label || 'Color'"
			[indicatorColor]="indicatorColor")

.row.form-group(*ngIf="!outlineHidden")
	.col-4.col-sm-3.col-lock-box
		label.text-muted.color-label {{label}}
		check-box.lock-box(
			*ngIf="hasLock && !nonLockable" [(checked)]="locked" (checkedChange)="onLockedChange($event)"
			[icon]="lockIcon" label="Automatic color")
	.col-8.col-sm-4
		color-picker(
			[(color)]="fill" (colorChange)="onFillChange($event)" [isDisabled]="locked" [label]="label + ' fill'"
			[indicatorColor]="indicatorColor")
	.col-4.col-sm-1.col-outline
		check-box.lock-box(
			[(checked)]="outlineLocked" (checkedChange)="onOutlineLockedChange($event)" [icon]="lockIcon"
			label="Automatic outline")
	.col-8.col-sm-4.col-outline
		color-picker(
			[(color)]="outline" (colorChange)="onOutlineChange($event)" [isDisabled]="outlineLocked"
			[label]="label + ' outline'" [indicatorColor]="indicatorColor")