.fcr-drop-menu {
  --drop-menu-padding: 10px;
  box-sizing: border-box;
  background-color: var(--fcr_mobile_ui_scene_color_popup_fill2);
  border: 1px solid var(--fcr_ui_scene_line1);
  box-shadow: var(--fcr_web_light_dropup_l);
  border-radius: var(--fcr_cornerradius_l);
  width: 100%;
  padding: var(--drop-menu-padding);
}

.fcr-drop-menu-option {
  border-radius: var(--fcr_cornerradius_xxs);
  width: 100%;
  display: flex;
  align-content: center;
  flex-direction: row-reverse;
  align-items: center;
  flex-wrap: nowrap;
  min-height: 32px;
  color: var(--fcr_ui_scene_icontext1);
  cursor: pointer;
  padding: 4px 8px;
}

.fcr-drop-menu-options {
  display: flex;
  flex-direction: column;
}

.fcr-drop-menu-option-disabled {
  color: var(--fcr_ui_scene_icontext1);
  cursor: not-allowed;
  opacity: 0.5;
}

.fcr-drop-menu-title-disabled {
  color: var(--fcr_ui_scene_icontext1);
  cursor: not-allowed;
  opacity: 0.5;
}
.fcr-drop-menu-group-disabled {
  color: var(--fcr_ui_scene_icontext1);
  cursor: not-allowed;
  opacity: 0.5;
}

.fcr-drop-menu-option-primary:hover,
.fcr-drop-menu-option-primary:active {
  background-color: var(--fcr_web_ui_scene_hover);
  color: var(--fcr_web_ui_scene_mainicon2);
}
.fcr-drop-menu-option-primary:hover .fcr-checkbox-label {
  color: var(--fcr_web_ui_scene_mainicon2);
}

.fcr-drop-menu-title {
  font-size: 12px;
  color: var(--fcr_ui_scene_icontext1);
  padding: 0 10px;
  height: 32px;
  display: flex;
  align-items: center;
}

.fcr-drop-menu-option-danger {
  border-radius: var(--fcr_cornerradius_xxs);
  width: 100%;
  display: flex;
  align-content: center;
  flex-direction: row-reverse;
  align-items: center;
  flex-wrap: nowrap;
  color: var(--fcr_ui_scene_icontext5);
  padding: 0 8px;
}

.fcr-drop-menu-option-danger .fcr-drop-menu-option-text,
.fcr-drop-menu-option-danger .fcr-checkbox-label {
  color: var(--fcr_ui_scene_ramp_red6);
}

.fcr-drop-menu-option-danger svg path {
  /* fill: var(--fcr_web_ui_scene_mainicon1); */
  fill: var(--fcr_ui_scene_ramp_red6);
}

.fcr-drop-menu-option-danger:hover {
  background-color: var(--fcr_ui_scene_ramp_red1);
  color: var(--fcr_ui_scene_ramp_red6);
}

.fcr-drop-menu-option-danger:hover svg path {
  fill: var(--fcr_ui_scene_ramp_red6);
}

.fcr-drop-menu-option-text {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fcr-drop-menu-option-content {
  display: flex;
  align-items: center;
}
.fcr-drop-menu-option-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fcr_ui_scene_icontext2);
}

.fcr-drop-menu-line {
  width: calc(100% + (var(--drop-menu-padding) * 2));
  height: 1px;
  background-color: var(--fcr_ui_scene_line1);
  margin: 8px calc(-1 * var(--drop-menu-padding));
}

.fcr-drop-menu svg.fcr-drop-menu-item-icon {
  width: 16px;
  height: 16px;
}

.fcr-drop-menu svg.fcr-drop-menu-item-icon path {
  fill: rgb(172, 172, 172);
}

.fcr-drop-menu .fcr-drop-menu-item-loading {
  animation: loadingCircle 1s infinite linear;
}

@keyframes loadingCircle {
  100% {
    transform: rotate(360deg);
  }
}