/*
  Share control — shared by blog posts and the market spotlight.

  Deliberately unopinionated about colour: everything inherits currentColor and
  the two custom properties below, so each surface can restyle it by setting
  --zyg-share-accent and --zyg-share-line without a second implementation.
*/

.zyg-share {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.zyg-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--zyg-share-line, rgba(255, 255, 255, 0.18));
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.zyg-share-btn:hover {
    border-color: var(--zyg-share-accent, #3aa0ff);
    color: var(--zyg-share-accent, #3aa0ff);
}

.zyg-share-btn:focus-visible {
    outline: 2px solid var(--zyg-share-accent, #7aa2ff);
    outline-offset: 2px;
}

/* Success state. Green regardless of the surface accent — "it worked" should
   not be a colour the visitor has to interpret. */
.zyg-share-btn.is-share-done {
    border-color: #4ba97f;
    color: #7fd6a8;
}

/* Inline SVG mask rather than an icon font or an extra request. Takes
   currentColor, so it turns green with the label on success. */
.zyg-share-glyph {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    background: currentColor;
    --zyg-share-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'/%3E%3Cpolyline points='16 6 12 2 8 6'/%3E%3Cline x1='12' y1='2' x2='12' y2='15'/%3E%3C/svg%3E");
    -webkit-mask: var(--zyg-share-mask) center / contain no-repeat;
    mask: var(--zyg-share-mask) center / contain no-repeat;
}

/* Shown only when neither the share sheet nor any clipboard path is available. */
.zyg-share-url {
    display: inline-block;
    width: min(100%, 380px);
    padding: 7px 10px;
    font: inherit;
    font-size: 13px;
    border: 1px solid var(--zyg-share-line, rgba(255, 255, 255, 0.18));
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: inherit;
}