//- Read only mode
.color-selector(ng-if="!vm.userCanChangeColor()")
    .tag-color.disabled.e2e-open-color-selector(
        ng-class="{'empty-color': !vm.color}"
        ng-style="{'background': vm.color}"
    )

//- Read & Edit mode
.color-selector(ng-if="vm.userCanChangeColor()")
    .tag-color.e2e-open-color-selector(
        ng-click="vm.toggleColorList()"
        ng-class="{'empty-color': !vm.color}"
        ng-style="{'background': vm.color}"
    )
    .color-selector-dropdown(ng-if="vm.displayColorList")
        ul.color-selector-dropdown-list.e2e-color-dropdown
            li.color-selector-option(
                ng-repeat="color in vm.colorList"
                ng-style="{'background': color}"
                ng-title="color"
                ng-click="vm.onSelectDropdownColor(color)"
            )
            li.empty-color(
                ng-if="!vm.isColorRequired"
                ng-click="vm.onSelectDropdownColor(null)"
            )
        .custom-color-selector
            .display-custom-color.empty-color(
                ng-if="!vm.customColor"
            )
            .display-custom-color-wrapper
                .display-custom-color(
                    ng-if="vm.customColor"
                    ng-style="{'background': vm.customColor}"
                    ng-click="vm.onSelectDropdownColor(vm.customColor)"
                )
            input.custom-color-input(
                type="text"
                maxlength="7"
                placeholder="Type hex code"
                ng-model="vm.customColor"
                ng-keydown="vm.onKeyDown($event)"
            )
