/**
 * nav__sns（SNS アイコンナビ）。
 * layout=horizontal|vertical。Figma 476:45893。
 */

.sns-links {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sns-links[data-layout="horizontal"] {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0;
}

.sns-links[data-layout="vertical"] {
	flex-direction: column;
	gap: 0;
}

.sns-links__item {
	margin: 0;
	padding: 0;
}

.sns-links__link {
	/*
	 * icon-color invert 用。背景反転なしのため、
	 * --hover-invert-a = ホバー時のアイコン色（logo-blue）。
	 */
	--hover-invert-a: var(--wp--preset--color--logo-blue);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	inline-size: 2.75rem; /* 44px */
	block-size: 2.75rem;
	color: var(--wp--preset--color--base-black);
	text-decoration: none;
}

.sns-links__link:focus {
	outline: none;
}

.sns-links__link:focus-visible {
	outline: 1px solid var(--wp--preset--color--logo-blue);
	outline-offset: 2px;
}

.sns-links__link .icon {
	inline-size: 1.5rem;
	block-size: 1.5rem;
}

/* サイドバー内はややコンパクト（creator summary） */
.sidebar .sns-links__link {
	inline-size: 2rem; /* 32px */
	block-size: 2rem;
}

.sidebar .sns-links__link .icon {
	inline-size: 1.375rem;
	block-size: 1.375rem;
}