#nodeshare {
  display: flex;
  gap: 0.2em;
  padding-block:var(--size-2);
  flex-direction:row-reverse;
}

#nodeshare button {
  border: 1px solid #b22164;
  background: none;
  white-space: nowrap;
  height:100%;
  cursor: pointer;
}

/* #nodeshare button {
  display: flex;
  align-items:center;
} */

#nodeshare button:active,
#nodeshare button:hover {
  color: #662644;
}

#nodeshare ul {
  padding-left: 0.5em;
  margin-bottom: 0;
  margin-right: 1em;
  font-size: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  text-align: center;
  list-style: none;
}

#CollapsingShare{
  overflow:hidden;
  overflow:clip;
}

#CollapsingShare ul{
  height:fit-content;
  overflow:hidden;
  overflow:clip;
  transform:translateY(0%);
  margin-bottom: 0%;
  transition: transform 300ms, margin-bottom 300ms;
}

[aria-expanded=false]+#CollapsingShare:not(:focus-within).close ul{
  transform:translateY(-100%);
  margin-bottom: -100%;
}

#nodeshare ul a{
  display:flex;
  align-items:center;
  border: red;
  font-family: var(--font-mono);
  letter-spacing: -0.04em;
}

#nodeshare ul a:active,
#nodeshare ul a:hover {
  color: #b22164;
}

#nodeshare li {
  border: 0;
  border-radius: 5px;
  margin: 0;
  background: #eee;
  padding-inline:var(--size-2);
}

#nodeshare .icon {
  margin: calc(-1* var(--size-1));
  margin: var(--size-00);
  margin-right: var(--size-1);
  --_icon-size:var(--size-3);
  height: var(--_icon-size);
  width: var(--_icon-size);
  background-size:cover;
  background-position:center;
  display:inline-block;
}

#nodeshare button .icon {
  --_icon-size:var(--size-4);
}

.icon-share-main{background-image:var(--icon-share-main)}
.icon-share-alt{background-image:var(--icon-share-alt)}
.icon-retweet{background-image:var(--icon-retweet)}
.icon-send{background-image:var(--icon-send)}
.icon-envelope{background-image:var(--icon-envelope)}
.icon-print{background-image:var(--icon-print)}
.icon-link{background-image:var(--icon-link)}