.ds-share-link {
  color: var(--ds-color-london-85);
  cursor: pointer;
  display: block;
  font-family: var(--ds-type-system-sans-lining);
  font-size: var(--ds-type-scale-0);
  font-weight: 400;
  height: 2rem;
  line-height: var(--ds-type-leading-lower);
  text-decoration: none;
  width: 2rem;
  .path-background {
    fill: var(--ds-color-london-20);
    transition: fill-opacity var(--ds-interactions-transition);
    will-change: fill-opacity;
  }
  &:hover {
    .path-background {
      fill: var(--ds-color-london-5);
    }
  }
  &:focus {
    outline: solid transparent;
    .path-background {
      stroke: var(--ds-color-hong-kong-55);
      stroke-width: 2;
    }
  }
  &:active {
    .path-background {
      fill: var(--ds-color-london-5);
      stroke: var(--ds-color-hong-kong-55);
      stroke-width: 2;
    }
  }
  &.ds-share-link--inverse {
    .path-background {
      fill: var(--ds-color-london-100);
    }
    .path-foreground {
      fill: var(--ds-color-london-20);
    }
    &:hover {
      .path-background {
        fill-opacity: 0.85;
      }
    }
    &:focus {
      .path-background {
        fill-opacity: 1;
        stroke: var(--ds-color-hong-kong-55);
        stroke-width: 2;
      }
    }
    &:active {
      .path-background {
        fill-opacity: 0.85;
        stroke: var(--ds-color-hong-kong-55);
        stroke-width: 2;
      }
    }
  }
}