.op-planet-status-switcher{
  position:relative;
  min-width:260px;
}

.op-planet-status-switcher > summary{
  box-sizing:border-box;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 14px;
  align-items:center;
  gap:9px;
  min-height:40px;
  padding:7px 10px 7px 12px;
  border:1px solid rgba(125,211,252,.28);
  border-radius:11px;
  background:#0b1230;
  color:#eef6ff;
  list-style:none;
  cursor:pointer;
}

.op-planet-status-switcher > summary::-webkit-details-marker{display:none;}

.op-planet-status-switcher > summary::after{
  content:"▾";
  color:#83caff;
  font-size:10px;
  transition:transform .16s ease;
}

.op-planet-status-switcher[open] > summary::after{transform:rotate(180deg);}

.op-planet-status-current{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.op-planet-status-current strong{
  overflow:hidden;
  font-size:11px;
  font-weight:900;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.op-planet-status-current small{
  color:#7f91b8;
  font-size:8.5px;
  font-weight:800;
}

.op-planet-status-menu{
  position:absolute;
  z-index:80;
  top:calc(100% + 6px);
  right:0;
  box-sizing:border-box;
  width:min(340px,calc(100vw - 28px));
  max-height:min(390px,65vh);
  padding:6px;
  overflow:auto;
  border:1px solid rgba(83,127,235,.66);
  border-radius:12px;
  background:#080f29;
  box-shadow:0 18px 44px rgba(0,0,0,.56),inset 0 1px 0 rgba(255,255,255,.04);
}

.op-planet-status-form{margin:0;}

.op-planet-status-option{
  appearance:none;
  box-sizing:border-box;
  width:100%;
  min-height:48px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:7px 9px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:#edf5ff;
  font:inherit;
  text-align:left;
  cursor:pointer;
}

.op-planet-status-option:hover,
.op-planet-status-option:focus-visible{
  border-color:rgba(84,204,255,.36);
  background:rgba(34,92,151,.22);
}

.op-planet-status-option.is-current{
  border-color:rgba(72,219,174,.32);
  background:rgba(21,104,82,.22);
  cursor:default;
}

.op-planet-status-option-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.op-planet-status-option-copy strong{
  overflow:hidden;
  font-size:10.5px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.op-planet-status-option-copy small{
  color:#8596bb;
  font-size:8.5px;
  font-weight:800;
}

.op-planet-statuses{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  min-width:0;
}

.op-planet-status-marker{
  --planet-status-rgb:78,208,255;
  display:inline-grid;
  place-items:center;
  width:19px;
  height:19px;
  border:1px solid rgba(var(--planet-status-rgb),.52);
  border-radius:999px;
  background:rgba(var(--planet-status-rgb),.14);
  color:rgb(var(--planet-status-rgb));
  font-size:9px;
  font-weight:950;
  line-height:1;
  box-shadow:0 0 8px rgba(var(--planet-status-rgb),.11);
}

.op-planet-status-marker.is-danger{--planet-status-rgb:255,82,103;}
.op-planet-status-marker.is-warning{--planet-status-rgb:255,196,75;}
.op-planet-status-marker.is-success{--planet-status-rgb:65,226,164;}
.op-planet-status-marker.is-storage{--planet-status-rgb:180,123,255;}

.planet-menu-option .op-planet-statuses{
  grid-column:2;
}

.planet-menu-option > b{
  grid-column:3;
}

@media (max-width:700px){
  .op-planet-status-switcher{
    width:100%;
    min-width:0;
  }

  .op-planet-status-switcher > summary{
    min-height:36px;
    padding:5px 8px 5px 10px;
  }

  .op-planet-status-menu{
    right:0;
    width:min(330px,calc(100vw - 24px));
  }

  .op-planet-status-marker{
    width:18px;
    height:18px;
    font-size:8px;
  }
}