/**
 * Icon Links Widget Styles
 */

/* Container - uses CSS custom properties for dynamic values */
.icon-links-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--icon-gap, 12px);
    align-items: center;
}

/* Icon link */
.icon-links-container .icon-link {
    font-size: var(--icon-size, 20px);
    line-height: 1;
    color: var(--icon-color, #374151);
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
}

.icon-links-container .icon-link:hover,
.icon-links-container .icon-link:focus {
    color: var(--icon-hover-color, var(--color-primary, #2563eb));
    transform: translateY(-2px);
}

.icon-links-container .icon-link:focus {
    outline: 2px solid var(--icon-hover-color, var(--color-primary, #2563eb));
    outline-offset: 2px;
    border-radius: 2px;
}

/* Ensure icon displays correctly */
.icon-links-container .icon-link i {
    display: block;
}