@use "vuepress-shared/scss/reset";

.vp-share-button {
  @include reset.button;

  display: inline-block;
  padding: 0.25em;
}

.vp-share-icon {
  width: 2em;
  height: 2em;
  color: #fff;
  transition: transform var(--vp-t-transform);

  &.plain {
    width: 1.5em;
    height: 1.5em;
    color: var(--vp-c-text-mute);

    &:hover {
      color: var(--vp-c-accent-bg);
    }
  }

  &:not(.plain):hover {
    transform: scale(1.1);
  }

  &.colorful {
    width: 1.5em;
    height: 1.5em;
    padding: 0.25em;
    border-radius: 50%;
  }

  svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentcolor;
  }
}