.toppick-selective-login-container {
  font-family: var( --e-global-typography-primary-font-family );

  display: inline-flex;
  flex-direction: row;
  align-items: center;

  height: 55px;
  padding-left: 22px;
  padding-right: 22px;

  border-radius: 50px;

  background: #FFFFFF;
  box-shadow: 0px 10px 20px rgba(236, 85, 117, 0.2);
}

/* button */
.toppick-selective-login-button {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  /* identical to box height */

  /* fix flashing issue */
  white-space: nowrap;

  background: linear-gradient(90deg, #E10453 0%, #FF575A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;

  cursor: pointer;
}

/* selector */
.toppick-selective-login-selector-container {
  height: 100%;
  box-sizing: content-box;

  font-weight: 350;
  font-size: 12px;
  line-height: 18px;

  margin-left: 30px;

  display: flex;
  flex-direction: row;

  position: relative;
}

/* down arrow */
.toppick-selective-login-selector-options-down-arrow {
  content: url("data:image/svg+xml,%3Csvg width='18' height='8' viewBox='0 0 18 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2L9 6L16 2' stroke='url(%23paint0_linear_2901_9197)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_2901_9197' x1='-148.8' y1='81.7647' x2='-132.8' y2='81.7647' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23E10453'/%3E%3Cstop offset='1' stop-color='%23FF575A'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
  max-width: 18px;
  width: 18px;
  margin-left: 10px;

  /* transition: rotate 300ms ease-in-out; */
}

/* .toppick-selective-login-selector-container:hover .toppick-selective-login-selector-options-down-arrow {
  rotate: 180deg;
} */

/* active selection */
.toppick-selective-login-selector-active-option {
  line-height: 55px;

  cursor: pointer;

  /* fix flashing issue */
  inline-size: max-content;
  white-space: nowrap;

  background: linear-gradient(90deg, #E10453 0%, #FF575A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.toppick-selective-login-selector-options {
  box-sizing: content-box;
  display: none;
  position: absolute;

  inline-size: max-content;

  text-align: center;

  /* trick to center the element */
  transform: translateX(-50%);
  left: 50%;
  top: 45px;
}

.toppick-selective-login-selector-container:hover .toppick-selective-login-selector-options {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 10px;

  padding: 17px 19px 17px 19px;
  background: rgba(255, 255, 255, 0.95);

  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);

  border-radius: 10px;
}

.toppick-selective-login-selector-options>.option {
  cursor: pointer;

  /* fix flashing issue */
  inline-size: max-content;
  white-space: nowrap;

  background: linear-gradient(90deg, #E10453 0%, #FF575A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

/* hide selected element */
.toppick-selective-login-selector-options>.option[selected="true"] {
  display: none;
}