.active{background-color:#02a8fbc4;transition:background-color .1s linear}.active:hover{background-color:#02a8fb;transition:background-color .1s linear}.not-active{background-color:#434343c4;transition:background-color .1s linear}.not-active:hover{background-color:#02a8fb}.bases-wrapper{width:50px;height:50px;position:relative}.bases{grid-template-columns:1fr 1fr;gap:1px;width:100%;height:100%;display:grid;rotate:-45deg}.base{background-color:#ffffff26;width:100%;height:100%;position:relative}.base.active{background-color:#437fff}.base-label{color:#fff;white-space:nowrap;z-index:10;background-color:#1f2937;border:1px solid #374151;border-radius:4px;padding:2px 6px;font-size:10px;display:none;position:absolute;left:150%;transform:translate(-90%)rotate(45deg)}.base.active:hover .base-label{display:block}