.share-buttons-toggler + .social-share {
  display: none;
}

.share-buttons-toggler {
  text-align: center;
}

.social-share {
  margin: 3em 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  align-items: center;
  text-align: center;
  contain: content;
}

@media (max-width: 568px) {
  .social-share svg {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

.social-share>.button {
  color: var(--base-3);
  flex: 33%;
  flex-grow: 1;
  flex-basis: 0;
  font-size: .9em;
  padding: .75em !important;
  border-radius: var(--border-radius);
  border-style: solid;
  border-width: 3px;
  border-color: var(--base);
}

.button:not(.button-native) .icon {
  margin-right: .2em;
  fill: var(--darker) !important;
}

.button:hover {
  border-color: var(--accent) !important;
  color: var(--darker) !important;
}

.button:hover .icon {
  fill: var(--accent) !important;
}

.button-native {
  background-color: var(--accent);
  color: var(--base-3);
  border-radius: var(--border-radius);
}

.button-native svg {
  fill: currentColor !important;
}

.button-native:hover {
  background-color: var(--base-2);
}