.vm-extra-btn {
  --bg: #f5f5f5;
  --color: #8c8c8c;
  --active-bg: #fff;
  --active-color: #1677ff;
  --shadow-color: rgba(0, 0, 0, 0.2);
  &.dark {
    --bg: rgba(0, 126, 255, 0.2);
    --color: #009dff;
    --active-bg: #0168b0;
    --active-color: #fff;
    --shadow-color: rgba(0, 126, 255, 0.2);
  }

  height: 32px;
  line-height: 31px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  background: var(--bg);
  border-radius: 6px;
  padding: 2px;
  white-space: nowrap;
  &-item {
    height: 28px;
    min-width: 28px;
    text-align: center;
    &:first-child {
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
    }
    &:last-child {
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px;
    }
    padding: 0 5px;
    cursor: pointer;
    color: var(--color);
    &.active {
      border-radius: 6px;
      color: var(--active-color);
      background: var(--active-bg);
      box-shadow: 0px 0px 2px 0px var(--shadow-color);
    }
  }
}
