.square {
  width: 28px;
  height: 28px;
  display: block;
  padding: 8px;
  border: 1px solid #34363f;
  border-radius: 1px;
  background-color: #181a24;
  cursor: pointer;

  .control,
  .balance {
    border-radius: 1px;
    display: block;
    width: 100%;
    height: 100%;
  }
  .control {
    background:
      conic-gradient(
        from 135deg at 50% 50%,
        #fa2506 0deg,
        #ff8a10 48.04152309894562deg,
        #6bff0c 102.49471664428711deg,
        #13fdfe 167.0967936515808deg,
        #053cff 236.0360884666443deg,
        #a212ff 289.88945960998535deg,
        #fc0d08 360deg
      ),
      linear-gradient(0deg, rgba(255, 0, 170, 0.5) 0%, rgba(255, 0, 170, 0.5) 100%);
  }
}
.square:hover {
  border: 1px solid #3a89fe;
}
.modal {
  position: fixed;
  width: 290;
  padding: 12px 16px;
}
