:root{
  --ss-button-diameter: 36px;
  --ss-icon-width: 16px;

  --ss-bg: black;
  --ss-fg: white;
}

.shiro-share{
  position: relative;
  display: inline-flex;
  flex-direction: column;
}
.shiro-share.open{
  z-index: 5;
}

.shiro-share .share-toggle{
  cursor: pointer;
}
.shiro-share .share-toggle svg{
  transform: rotateY(180deg) translateX(1px) !important;
}
.shiro-share.open .share-toggle{
  background-color: var(--ss-fg);
  border: 1px solid var(--ss-bg);
  border-width: 3px;
  border-style: solid;
  border-color: var(--ss-bg);
}
.shiro-share.open .share-toggle path{
  fill: var(--ss-bg);
}

.shiro-share .share-wrap{
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  display: none;
  grid-template-columns: auto;
  grid-auto-rows: auto;
  place-items: center;
  padding-top: calc( (var(--ss-button-diameter) / 2) + 10px );
  padding-bottom: 5px;
  gap: 10px;

  background-color: var(--ss-bg);
  border-bottom-left-radius: 9999px;
  border-bottom-right-radius: 9999px;
  z-index: -1;
}

.shiro-share.init .share-wrap{
  display: inline-grid;
}

.shiro-share .share-bttn {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width:  var(--ss-button-diameter);
  height: var(--ss-button-diameter);
  border-radius: 9999px;

  background-color: var(--ss-bg);
}

.shiro-share .share-bttn svg{
  display: inline-block;
  width: var(--ss-icon-width);
  pointer-events: none;
}
.shiro-share .share-bttn path{
  fill: var(--ss-fg);
}

.shiro-share .share-bttns svg {
  transition: transform .15s ease-out;
}

.shiro-share .share-bttn:hover svg {
  transform: scale(1.1);
  z-index: 5;
}

.shiro-share .share-bttn.clipboard:after {
  content: "Link copiado para a área de transferência!";
  position: absolute;
  top: 100%;
  right: 0;
  transform: translate(0, 25%);
  padding: 0.75rem;
  border-radius: 5px;
  margin-left: 10px;
  white-space: nowrap;
  pointer-events: none;
  background-color: var(--ss-bg);

  font-size: 80%;
  color: var(--ss-fg);

  z-index: 10;

  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.shiro-share .share-bttn.clipboard.copied:after {
  opacity: 1;
}