/* wrapper */
.fcr-select-phone-wrapper-l {
  height: 48px;
}
.fcr-select-phone-wrapper-m {
  height: 36px;
}
.fcr-select-phone-wrapper-s {
  height: 32px;
}
/* fcr-select-phone */
.fcr-select-phone {
  background-color: var(--fcr_ui_scene_input);
  border-width: 1px;
  border-style: solid;
  transition: all 0.2s ease-in-out;
  border-width: 1px;
  border-style: solid;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.5;
  overflow: hidden;
  user-select: none;
  font-weight: 400;
  border-color: var(--fcr_ui_scene_line1);
  position: relative;
  z-index: 0;
}
.fcr-select-phone.fcr-select-phone-white {
  border-color: var(--fcr_web_ui_scene_line4);
  background: var(--fcr_ui_scene_input2);
}
.fcr-select-phone.fcr-select-phone--disabled {
  cursor: not-allowed;
}
.fcr-select-phone.fcr-select-phone-l {
  border-radius: var(--fcr_cornerradius_l);
}
.fcr-select-phone.fcr-select-phone-m {
  border-radius: var(--fcr_cornerradius_s);
}
.fcr-select-phone.fcr-select-phone-s {
  border-radius: var(--fcr_cornerradius_xs);
}
.fcr-select-phone:hover:not(.fcr-select-phone--disabled) {
  border-color: var(--fcr_ui_scene_ramp_brand6);
  box-shadow: 0 0 0 3px var(--fcr_ui_scene_ramp_brand3);
}

/* select phone top */
.fcr-select-phone-top {
  color: var(--fcr_ui_scene_icontext1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fcr-select-phone.fcr-select-phone-l .fcr-select-phone-top {
  padding: 11px 6px 11px 12px;
}
.fcr-select-phone.fcr-select-phone-m .fcr-select-phone-top {
  padding: 6px 12px;
}
.fcr-select-phone.fcr-select-phone-s .fcr-select-phone-top {
  padding: 3px 6px 3px 6px;
}

/* select phone - zone */
.fcr-select-phone-zone {
  width: 64px;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fcr-select-phone-zone .fcr-select-phone-zone__icon {
  transform: rotate(0deg);
  transition: transform 0.3s;
}
.fcr-select-phone-zone .fcr-select-phone-zone__icon:hover {
  color: var(--fcr_ui_scene_ramp_brand6);
}
.fcr-select-phone-zone.fcr-select-phone-zone--focused .fcr-select-phone-zone__icon {
  transform: rotate(180deg);
}

/* select phone input */
.fcr-select-phone-input {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fcr-select-phone-input .fcr-select-phone-input__icon {
  transform: rotate(0deg);
  transition: transform 0.3s;
}
.fcr-select-phone-input.fcr-select-phone-input--focused .fcr-select-phone-input__icon {
  transform: rotate(180deg);
}
.fcr-select-phone-input input {
  color: var(--fcr_ui_scene_icontext1);
  outline: none;
  width: 100%;
  height: 100%;
  border: none;
  font-size: 12px;
  background: transparent;
}
.fcr-select-phone-input input::placeholder {
  color: var(--fcr_ui_scene_icontext3);
}

/* select phone options */
.fcr-select-phone__options {
  list-style-type: none;
  padding-inline-start: 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
.fcr-select-phone__options.fcr-select-phone__options--invisible {
  display: none;
}
.fcr-select-phone.fcr-select-phone-l .fcr-select-phone__option {
  padding: 15px 6px 15px 12px;
}
.fcr-select-phone.fcr-select-phone-m .fcr-select-phone__option {
  padding: 12px;
}
.fcr-select-phone.fcr-select-phone-s .fcr-select-phone__option {
  padding: 9px 6px 9px 12px;
}
.fcr-select-phone__options .fcr-select-phone__option {
  color: var(--fcr_ui_scene_icontext1);
  transition: all 0.3s;
}
.fcr-select-phone__options .fcr-select-phone__option:hover,
.fcr-select-phone__options .fcr-select-phone__option--active {
  background-color: var(--fcr_web_ui_scene_hover);
  font-weight: var(--fcr_font_weight_x);
}
.fcr-select-phone__option .fcr-select-phone__option-zone {
  padding-right: 20px;
}
.fcr-select-phone__option .fcr-select-phone__option-phone {
  padding-left: 50px;
}
