/* Container */
.gr-author-icons{
  display:flex;
  gap:6px;
  align-items:center;
}

/* Knapper og links */
.gr-author-icons .gr-fi{
  all:unset;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:8px;
  background-color:#163B6B;
  color:#ffffff;
  cursor:pointer;
  text-decoration:none;
  line-height:0;
  box-sizing:border-box;
}

/* Ens udtryk i alle tilstande */
.gr-author-icons .gr-fi:link,
.gr-author-icons .gr-fi:visited,
.gr-author-icons .gr-fi:hover,
.gr-author-icons .gr-fi:active,
.gr-author-icons .gr-fi:focus,
.gr-author-icons .gr-fi:focus-visible{
  background-color:#163B6B !important;
  color:#ffffff !important;
  text-decoration:none !important;
  box-shadow:none !important;
  outline:none;
}

/* Fokusring for tilgængelighed */
.gr-author-icons .gr-fi:focus-visible{
  outline:2px solid #4f78b8 !important;
  outline-offset:2px;
}

/* Font Awesome ikon inde i knappen */
.gr-author-icons .gr-fi i{
  color:inherit !important;
  font-size:20px;
  width:1em;
  height:1em;
  display:block;
  text-align:center;
  pointer-events:none;
}

/* Finjuster link ikonet hvis det ser lidt højt ud */
.gr-author-icons .gr-fi .fa-link{
  transform: translate(-2px, 1px) rotate(-20deg);
}

/* Let hover effekt uden farveskift */
.gr-author-icons .gr-fi:hover{
  filter:brightness(.92);
}

/* Kopieret tilstand */
.gr-author-icons .gr-fi-copy.copied{
  opacity:.75;
}

/* Tooltip til kopi knappen */
.gr-author-icons .gr-fi[data-tooltip]{
  position:relative;
}
.gr-author-icons .gr-fi[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;
  bottom:calc(100% + 6px);
  left:50%;
  transform:translateX(-50%) translateY(4px);
  background:#0b1f3a;
  color:#ffffff;
  padding:5px 7px;
  border-radius:6px;
  font-size:12px;
  line-height:1;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index:5;
}
.gr-author-icons .gr-fi[data-tooltip]::before{
  content:"";
  position:absolute;
  bottom:100%;
  left:50%;
  transform:translateX(-50%);
  border:5px solid transparent;
  border-top-color:#0b1f3a;
  opacity:0;
  transition:opacity .18s ease;
  z-index:5;
}
.gr-author-icons .gr-fi.is-tooltip::after,
.gr-author-icons .gr-fi.is-tooltip::before{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* Mørk tilstand fokuskontrast */
@media (prefers-color-scheme: dark){
  .gr-author-icons .gr-fi:focus-visible{
    outline-color:#6b93d6 !important;
  }
}

/* Safari og iOS knapper */
button.gr-fi{
  appearance:none;
  -webkit-appearance:none;
}
