.fcr-clickabel-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid;
  outline: none;
  position: relative;
}
.fcr-clickable-icon-large {
  border-radius: var(--fcr_cornerradius_l);
  width: 40px;
  height: 40px;
}
.fcr-clickable-icon-small {
  border-radius: var(--fcr_cornerradius_m);
  width: 30px;
  height: 30px;
}
.fcr-clickable-icon-mini {
  border-radius: var(--fcr_cornerradius_xs);
  width: 24px;
  height: 24px;
}
.fcr-clickabel-icon:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.fcr-clickabel-icon:active,
.fcr-clickabel-icon:focus {
  outline: none;
  /* background: var(--fcr_ui_scene_click); */
}

.fcr-clickabel-icon {
  border-color: var(--fcr_ui_scene_ramp_brand6);
  background: var(--fcr_ui_scene_ramp_brand6);
  --effect-color: var(--fcr_ui_scene_ramp_brand4);
}
.fcr-clickabel-icon:not(:disabled):active {
  border-color: var(--fcr_ui_scene_ramp_brand8);
  background: var(--fcr_ui_scene_click);
}

.fcr-pretest-device-icon-active {
  border-color: var(--fcr_ui_scene_ramp_purple6);
  background: var(--fcr_ui_scene_ramp_purple6);
  --effect-color: var(--fcr_ui_scene_ramp_purple4);
}
.fcr-pretest-device-icon-active:not(.fcr-pretest-device-icon-disabled):active {
  border-color: var(--fcr_ui_scene_ramp_purple8);
  background: var(--fcr_ui_scene_ramp_purple8);
}

.fcr-pretest-device-icon-inactive {
  border-color: var(--fcr_ui_scene_ramp_red6);
  --effect-color: var(--fcr_ui_scene_ramp_red4);
  background: var(--fcr_ui_scene_ramp_red6);
}
.fcr-pretest-device-icon-inactive:not(.fcr-pretest-device-icon-disabled):active {
  border-color: var(--fcr_ui_scene_ramp_red8);
  background: var(--fcr_ui_scene_ramp_red8);
}

.fcr-pretest-device-icon-idle {
  background: transparent;
  border-color: var(--fcr_ui_scene_input);
  --effect-color: var(--fcr_ui_scene_input);
}
.fcr-pretest-device-icon-idle:not(.fcr-pretest-device-icon-disabled):active {
  background: transparent;
  border-color: var(--fcr_ui_scene_input);
}

.fcr-clickabel-icon.fcr-pretest-device-icon-disabled,
.fcr-clickabel-icon.fcr-pretest-device-icon-disabled:active {
  background: transparent;
  border-color: var(--fcr_ui_scene_input);
  cursor: not-allowed;
  opacity: 0.4;
}