.root {
  display: inline-block;
  position: relative;
  padding-right: 20px;
  margin-right: 20px;

  &::after {
    content: ' ';
    display: block;
    position: absolute;
    width: 1px;
    height: 24px;
    background-color: rgba(60, 60, 60, 0.29);
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}

.popover {
  z-index: 999;

  :global(.ant-popover-inner) {
    box-sizing: border-box;
    width: 552px;
    padding: 24px 28px 14px;
    border-radius: 24px;
    background-color:  #fff;
    overflow: hidden;
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
      Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
      'Helvetica Neue', sans-serif;

    :global(.dark) & {
      background-color: var(--rp-c-bg-mute);
    }
  }
}

@media (max-width: 600px) {
  .popover {
    :global(.ant-popover-inner) {
      width: 80vw;
    }
  }
}


.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 99px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;

  &:hover {
    background-color: var(--rp-c-bg-mute);
  }
}