/**
 * Share Buttons Component CSS.
 * 3 stil: colored, outline, mono.
 * 3 sekil: square, rounded, pill.
 *
 * @package Necox
 * @since   2.67.0
 */

.necox-share {
    display: flex;
    align-items: center;
    gap: var(--necox-share-gap, 4px);
    flex-wrap: wrap;
}

.necox-share__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--necox-share-size, 32px);
    height: var(--necox-share-size, 32px);
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 0.15s ease, opacity 0.15s;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    background: none;
    padding: 0;
}

.necox-share__btn:hover {
    transform: scale(1.12);
    text-decoration: none;
}

.necox-share__icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Sekiller ── */
.necox-share--square  .necox-share__btn { border-radius: 4px; }
.necox-share--rounded .necox-share__btn { border-radius: 8px; }
.necox-share--pill    .necox-share__btn { border-radius: 50%; }

/* ── Renkli Stil ── */
.necox-share--colored .necox-share__btn {
    background: var(--nc-share-color, #6b7280);
    color: #fffffffff;
    border-color: transparent;
}

.necox-share--colored .necox-share__btn--copy {
    background: var(--necox-bg);
    color: var(--necox-muted);
}

.necox-share--colored .necox-share__btn--native {
    background: var(--necox-bg);
    color: var(--necox-muted);
}

/* ── Outline Stil ── */
.necox-share--outline .necox-share__btn {
    background: transparent;
    color: var(--nc-share-color, #6b7280);
    border-color: var(--nc-share-color, #e5e7eb);
}

.necox-share--outline .necox-share__btn--copy,
.necox-share--outline .necox-share__btn--native {
    color: var(--necox-muted);
    border-color: var(--necox-border);
}

/* ── Tek Renk Stil ── */
.necox-share--mono .necox-share__btn {
    background: var(--necox-bg);
    color: var(--necox-muted);
    border-color: var(--necox-border);
}

.necox-share--mono .necox-share__btn:hover {
    background: var(--necox-border);
}