<div class="d-flex a-i-center j-c-center p-relative">
  @if (selectedIcon) {
    <div class="icon-{{ iconSize }} text-center fit-w fit-h">
      <i
        class="c8y-icon-duocolor"
        [c8yIcon]="selectedIcon"
        aria-hidden="true"
      ></i>
    </div>
  }

  @if (!selectedIcon) {
    <div
      class="icon-{{ iconSize }} text-muted text-center a-s-stretch fit-w"
      style="border: 2px dashed var(--c8y-root-component-border-color)"
    >
      <span class="d-flex a-i-center j-c-center text-12 fit-h">
        <em>{{ 'Auto`icon-selector: automatic / default icon`' | translate }}</em>
      </span>
    </div>
  }
  <div class="showOnHover d-flex j-c-center a-i-center p-absolute fit-h fit-w">
    @if (!selectedIcon) {
      <button
        class="btn btn-clean btn-icon btn-sm m-0"
        title="{{ 'Select icon' | translate }}"
        [attr.aria-label]="'Select icon' | translate"
        type="button"
        (click)="openIconSelector()"
      >
        {{ 'Select' | translate }}
      </button>
    }
    @if (selectedIcon) {
      <button
        class="btn-dot btn-icon m-0 fit-h"
        [attr.aria-label]="'Change icon' | translate"
        tooltip="{{ 'Change icon' | translate }}"
        placement="top"
        container="body"
        type="button"
        [delay]="500"
        (click)="openIconSelector()"
      >
        <i
          [c8yIcon]="'replace'"
          aria-hidden="true"
        ></i>
      </button>
    }
    @if (selectedIcon && canRemoveIcon) {
      <button
        class="btn-dot btn-dot--danger btn-icon fit-h m-0"
        [attr.aria-label]="'Remove icon and use default icon' | translate"
        tooltip="{{ 'Remove icon and use default icon' | translate }}"
        placement="top"
        container="body"
        type="button"
        [delay]="500"
        (click)="removeIcon()"
      >
        <i
          [c8yIcon]="'trash'"
          aria-hidden="true"
        ></i>
      </button>
    }
  </div>
</div>