:root{
  --brand-purple:   #6b21a8;
  --brand-purple-2: #8b2be2;

  --gvs-closed:       #5B3192;
  --gvs-closed-hover: #7D47C3;

  --gvs-width: 252px;
  --gvs-height: 40px;
  --gvs-gap: 4px;

  --gvs-font-size: 16px;
  --gvs-font-weight: 400;
  --gvs-text-left: 14px;

  --gvs-arrow-size: 16px;
  --gvs-arrow-left: 222px;
  --gvs-arrow-top: 12px;

  --gvs-font-size: 14px;
  --gvs-line-height: 16px;
}

.global-version-filter{
  width: var(--gvs-width);
  margin: .5rem auto 0;
  position: relative;
}

.global-version-filter .sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.global-version-filter .gvs-trigger{
  width:100%;
  height: var(--gvs-height);
  border-radius:100px;
  border:0;
  display:block;
  font-size: var(--gvs-font-size);
  font-weight: var(--gvs-font-weight);
  line-height:16px;
  padding: 12px 30px 12px var(--gvs-text-left); /* 30 = 252-222 */
  color:#fff;
  text-align:left;
  white-space:nowrap;
  position:relative;
  cursor:pointer;
  outline: none;
}

.global-version-filter .gvs-trigger::after{
  content:"";
  position:absolute;
  left: var(--gvs-arrow-left);
  top:  var(--gvs-arrow-top);
  width: var(--gvs-arrow-size);
  height: var(--gvs-arrow-size);
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
}

.global-version-filter:not(.is-open) .gvs-trigger{
  background: var(--gvs-closed);
  color:#fff;
}
.global-version-filter:not(.is-open) .gvs-trigger:hover{
  background: var(--gvs-closed-hover);
}
/* стрелка вниз */
.global-version-filter:not(.is-open) .gvs-trigger::after{
  width:16px !important; height:16px !important;
  left:222px !important; top:12px !important;
  transform:none !important;
  background: no-repeat center/100% url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>\
  <path d='M2 5 L8 11 L14 5 Z' fill='white'/>\
</svg>") !important;
}

/* селектор в открытом виде */
.global-version-filter.is-open .gvs-trigger{
  background:#fff;
  color:#2b2b2b;
  border:1.5px solid var(--brand-purple);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
/* стрелка вверх */
.global-version-filter.is-open .gvs-trigger::after{
  width:16px !important; height:16px !important;
  left:222px !important; top:12px !important;
  transform:none !important;
  background: no-repeat center/100% url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>\
  <path d='M2 11 L8 5 L14 11 Z' fill='%231f1f1f'/>\
</svg>") !important;
}

/* Menu (автовысота, фикс. ширина и отступ) */
.global-version-filter .gvs-menu{
  position:absolute; left:0; right:0;
  top: calc(100% + var(--gvs-gap));
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:6px;
  padding:6px;
  box-shadow: 0 16px 36px rgba(0,0,0,.18), 0 3px 8px rgba(0,0,0,.08);
  list-style:none; margin:0;
  box-sizing:border-box;
  z-index:1000;
  text-align:left;
}

.global-version-filter .gvs-option{
  display:block;
  width:98%;
  padding:.55rem .75rem;
  margin:.125rem;
  border-radius:10px;
  color:#2b2b2b;
  cursor:pointer;
  user-select:none;
  font-size: var(--gvs-font-size);
  line-height:1.1;
}
.global-version-filter .gvs-option:hover{
  background: rgba(0,0,0,.06);
}
.global-version-filter .gvs-option[aria-selected="true"],
.global-version-filter .gvs-option.is-selected{
  font-weight: 400;
  background: transparent;
}

/* Подсветка при наведении даже для выбранного пункта */
.global-version-filter .gvs-option[aria-selected="true"]:hover,
.global-version-filter .gvs-option.is-selected:hover{
  background: rgba(0,0,0,.06) !important;
}

.global-version-filter .gvs-trigger{
  font-size: var(--gvs-font-size) !important;
  font-weight: 400 !important;
  line-height: var(--gvs-line-height) !important;
  letter-spacing: 0 !important;
  padding: calc((var(--gvs-trigger-h, 40px) - var(--gvs-line-height))/2)
           calc(var(--gvs-arrow-size, 16px) + 1rem)
           calc((var(--gvs-trigger-h, 40px) - var(--gvs-line-height))/2)
           var(--gvs-text-left, 14px) !important;
}

/* настройка текста */
.global-version-filter .gvs-option{
  font-size: var(--gvs-font-size) !important;
  line-height: var(--gvs-line-height) !important;
  letter-spacing: 0 !important;
}
