/**
 * 友情链接页 — 页面主体、分类导航与提交表单。
 *
 * @package Jio
 */

.links-page-container {
	margin-bottom: 20px;
}

.links-box {
	display: flex;
	flex-wrap: wrap;
	margin: -5px;
}

.links-box.links-style-image {
	flex-wrap: wrap;
	margin: calc(0px - var(--this-margin, 10px));
	margin-bottom: calc(20px - var(--this-margin, 10px));
}

.links-cat-box {
	margin-bottom: 20px;
}

.jio-links-submit-status {
	margin: 10px 0;
	font-size: 0.92em;
}

.jio-links-submit-status.text-success {
	color: var(--c-green, #22a06b);
}

.jio-links-submit-status.text-danger {
	color: var(--c-red, #ff5473);
}

.jio-links-submit-status.text-muted {
	color: var(--muted-2-color);
}

.links-card .avatar-dest {
	display: block;
	font-style: normal;
}

.link-page-search-cover .page-mask {
	background-color: rgba(0, 0, 0, 0.2);
}

/* Category nav sits inside the fixed-wrap column on desktop. */
.links-page-container .links-cat-box .title-theme {
	position: relative;
	padding-left: 1.2em;
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 6px;
}

.links-page-container .links-cat-header {
	padding: 0 15px 10px;
}

.fixed-wrap .link-nav-box .nav {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fixed-wrap .link-nav-box .nav > li {
	display: block;
}

.fixed-wrap .link-nav-box .nav > li > a {
	display: block;
	padding: 6px;
	margin: 1px 0;
	font-size: 16px;
	color: var(--muted-2-color);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-decoration: none;
}

.fixed-wrap .link-nav-box .nav > li > a:hover {
	color: var(--main-color);
}

.fixed-wrap .link-nav-box .nav > li:before {
	display: none;
}

.link-nav-submit,
.link-cat-submit {
	margin-top: 10px;
}

.link-cat-submit {
	display: none;
}

@media (min-width: 768px) {
	.fixed-wrap {
		position: relative;
		--fixed-width: 120px;
	}

	.fixed-wrap > .fixed-wrap-nav {
		position: absolute;
		width: var(--fixed-width);
	}

	.fixed-wrap > .fixed-wrap-nav + .fixed-wrap-content {
		margin-left: calc(var(--fixed-width) + 15px);
	}

	.fixed-wrap > .fixed-wrap-nav ~ .affix-clone {
		display: none;
	}

	.fixed-wrap-nav.affix {
		position: fixed;
		left: auto;
		right: auto;
		transition: top 0.1s;
	}
}

@media (min-width: 992px) {
	.links-box .links-card {
		width: calc(25% - 10px);
		margin: 5px;
		box-sizing: border-box;
	}

	.fixed-wrap .tab-nav-theme.mini-scrollbar {
		display: flex;
		flex-direction: column;
		overflow: auto;
		max-height: 70vh;
		text-align: center;
		border-bottom: none;
		padding: 0;
		margin: 0;
	}

	.fixed-wrap .tab-nav-theme.mini-scrollbar > li > a {
		padding: 6px;
		margin: 1px 0;
		display: block;
		font-size: 16px;
		color: var(--muted-2-color);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.fixed-wrap .tab-nav-theme.mini-scrollbar > li > a:hover {
		color: var(--main-color);
	}

	.fixed-wrap .tab-nav-theme.mini-scrollbar > li.active > a {
		color: var(--focus-color);
		font-weight: 500;
		background: var(--focus-color-opacity05);
		border-radius: var(--mini-radius);
	}

	.fixed-wrap .tab-nav-theme.mini-scrollbar > li::before {
		display: none;
	}

	.link-nav-submit {
		display: block;
	}
}

@media (max-width: 991px) {
	.link-nav-submit {
		display: none;
	}

	.link-cat-submit {
		display: block;
	}

	.link-nav-box > .jio-panel {
		background: transparent;
		border-radius: 0;
		box-shadow: none;
		padding: 0;
		margin: 0;
	}

	.link-nav-box:not(.affix) {
		margin-bottom: 10px;
	}

	.link-nav-box .nav {
		margin: 0;
		display: flex;
		gap: 8px;
		overflow-x: auto;
		padding: 0;
		list-style: none;
	}

	.link-nav-box .nav > li {
		display: inline-block;
		flex: 0 0 auto;
	}

	.link-nav-box .nav > li > a {
		padding: 2px;
		font-size: 1.2em;
		white-space: nowrap;
	}

	.link-nav-box .nav > li > a:hover,
	.link-nav-box .nav > .active > a {
		background: 0;
	}
}

@media (max-width: 640px) {
	.links-box .links-card {
		width: calc(50% - 10px);
		margin: 5px;
	}

	.link-page-search-cover .tab-nav-theme li a {
		padding: 0 3px;
		font-size: 14px;
	}
}

@media (max-width: 480px) {
	.link-nav-box.affix-bottom,
	.link-nav-box.affix {
		margin-left: -5px;
		margin-right: -5px;
	}

	.links-page-container .fixed-wrap {
		overflow: hidden;
	}
}

#submit-links-modal .preview-square {
	width: 120px;
	height: 120px;
	display: block;
	border-radius: 4px;
	overflow: hidden;
}

#submit-links-modal .preview-square img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 1px dashed var(--main-border-color);
	border-radius: 4px;
}

#submit-links-modal .edit-footer {
	margin-top: 5px;
}

#submit-links-modal .modal-title .toggle-radius {
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}