/**
 * @package    Top
 * @subpackage Top
 * @since      1.0.0
 * @version    1.0.0
 * @author     Ehsan Zare <darksider.legend@gmail.com>
 * @link       https://code-path.com
 * @copyright  (c) 2024 Code-path web developing team
 */

/*-------------------------------------------------------------------------*/
/* Top
/*-------------------------------------------------------------------------*/
.fb-leaderboard[fb-leaderboard] {
	--gap: 16px;

	/* Tab  */
	--tab-dim: 50px;

	width: 100%;
	height: auto;

	gap: var(--gap);

	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

.fb-leaderboard[fb-leaderboard]::before {
	width: 50%;
	height: 0;

	top: 50%;
	left: 0;
	right: 0;

	margin: 0 auto;
	content: '';
	position: absolute;

	-webkit-box-shadow: 0 0 300px 150px #080b0f;
	box-shadow: 0 0 300px 150px #080b0f;
}

/* Top: Tabs
/*---------------------------------------------------------------*/
.fb-leaderboard[fb-leaderboard] .leaderboard__tabs {
	width: 100%;
	height: auto;

	gap: var(--gap);

	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;

	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;

	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
}

.fb-leaderboard[fb-leaderboard] .leaderboard__tabs .tab__item {
	width: var(--tab-dim);
	height: var(--tab-dim);

	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;

	opacity: 0.9;

	display: block;

	background-size: cover;
	background-image: var(--bg);
	background-repeat: no-repeat;
	background-position: center center;

	-webkit-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}

.fb-leaderboard[fb-leaderboard] .leaderboard__tabs .tab__item:hover,
.fb-leaderboard[fb-leaderboard] .leaderboard__tabs .tab__item:active {
	opacity: 1;
}

.fb-leaderboard[fb-leaderboard] .leaderboard__tabs .tab__item.active {
	-webkit-filter: brightness(1.3);
	filter: brightness(1.3);

	opacity: 1;
}

.fb-leaderboard[fb-leaderboard] .leaderboard__tabs .tab__item.is-pvp   {--bg: url('../images/icon/pvp.png');}
.fb-leaderboard[fb-leaderboard] .leaderboard__tabs .tab__item.is-achi  {--bg: url('../images/icon/achievements.png');}
.fb-leaderboard[fb-leaderboard] .leaderboard__tabs .tab__item.is-guild {--bg: url('../images/icon/guild.png');}

/* Top: Panels
/*---------------------------------------------------------------*/
.fb-leaderboard[fb-leaderboard] .leaderboard__panels {
	width: 100%;
	height: auto;

	gap: var(--gap);

	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

.fb-leaderboard[fb-leaderboard] .leaderboard__panels .panel__item {
	width: 100%;
	height: auto;

	gap: var(--gap);

	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;

	-webkit-box-pack: stretch;
	-ms-flex-pack: stretch;
	justify-content: stretch;

	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

.fb-leaderboard[fb-leaderboard] .leaderboard__panels .panel__item .item__block {
	width: 100%;
	height: auto;
}

/* Top: Panels: PvP
/*-----------------------------------------------------*/
.fb-leaderboard[fb-leaderboard] .leaderboard__panels .panel__item.is-pvp {}

/* Top: Panels: Achievement
/*-----------------------------------------------------*/
.fb-leaderboard[fb-leaderboard] .leaderboard__panels .panel__item.is-achi {}

/* Top: Panels: Guild
/*-----------------------------------------------------*/
.fb-leaderboard[fb-leaderboard] .leaderboard__panels .panel__item.is-guild {}

/* Top: Panels: Title
/*-----------------------------------------------------*/
.fb-leaderboard[fb-leaderboard] .leaderboard__panels .panel__item.is-title {}

.fb-leaderboard[fb-leaderboard] .leaderboard__panels .panel__item.is-title .item__block {
	gap: var(--gap);

	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;

	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;

	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
}

.fb-leaderboard[fb-leaderboard] .leaderboard__panels .panel__item.is-title .item__block [line] {
	--bg-s: transparent;
	--bg-e: #edfbff;

	width: 100%;
	height: 1px;

	opacity: 0.4;

	-webkit-box-shadow: 0 0 30px 0 var(--bg-s), 0 0 30px 0 var(--bg-e);
	box-shadow: 0 0 30px 0 var(--bg-s), 0 0 30px 0 var(--bg-e);

	background: -webkit-gradient(linear, left top, right top, from(var(--bg-s)), to(var(--bg-e)));
	background: -o-linear-gradient(left, var(--bg-s) 0%, var(--bg-e) 100%);
	background: linear-gradient(to right, var(--bg-s) 0%, var(--bg-e) 100%);
}

.fb-leaderboard[fb-leaderboard] .leaderboard__panels .panel__item.is-title .item__block [line="r"] {
	--bg-s: #edfbff;
	--bg-e: transparent;
}

.fb-leaderboard[fb-leaderboard] .leaderboard__panels .panel__item.is-title .item__block [name] {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;

	color: #edfbff;

	font-size: 1.4rem;
	font-family: var(--font-family-secondary);

	text-align: center;
	text-shadow: 0 0 16px rgba(113, 171, 255, 0.17), 0 0 6px rgba(50, 132, 255, 0.61);
	text-transform: uppercase;
}

/* Top: Realms
/*---------------------------------------------------------------*/
.fb-leaderboard[fb-leaderboard] .leaderboard__realms {
	width: 100%;
	height: auto;

	padding: 1rem;

	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;

	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;

	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;

	background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(50%, rgba(0, 0, 0, 0.5)), to(transparent));
	background: -o-linear-gradient(left, transparent 0%, rgba(0, 0, 0, 0.5) 50%, transparent 100%);
	background: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.5) 50%, transparent 100%);
}

.fb-leaderboard[fb-leaderboard] .leaderboard__realms .toggler-group {
	position: relative;
}

/* Top: Nice table
/*---------------------------------------------------------------*/
.fb-leaderboard[fb-leaderboard] .nice_table {}

.fb-leaderboard[fb-leaderboard] .nice_table::before {
	width: 1px;
	height: 100%;

	top: 0;
	right: 0;

	z-index: 9;
	content: '';
	position: absolute;

	background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), to(rgba(170, 215, 255, 0.5)));
	background: -o-linear-gradient(top, transparent 50%, rgba(170, 215, 255, 0.5) 100%);
	background: linear-gradient(to bottom, transparent 50%, rgba(170, 215, 255, 0.5) 100%);
}

.fb-leaderboard[fb-leaderboard] .nice_table::after {
	width: 100%;
	height: 1px;

	left: 0;
	bottom: 0;

	z-index: 9;
	content: '';
	position: absolute;

	background: -webkit-gradient(linear, left top, right top, color-stop(50%, transparent), to(rgba(170, 215, 255, 0.5)));
	background: -o-linear-gradient(left, transparent 50%, rgba(170, 215, 255, 0.5) 100%);
	background: linear-gradient(to right, transparent 50%, rgba(170, 215, 255, 0.5) 100%);
}

/* Top: Cols
/*---------------------------------------------------------------*/
.fb-leaderboard[fb-leaderboard] [col='1'] {width: 0%;}
.fb-leaderboard[fb-leaderboard] [col='2'] {width: 0%;}
.fb-leaderboard[fb-leaderboard] [col='3'] {width: 33.333%;}
.fb-leaderboard[fb-leaderboard] [col='4'] {width: 33.333%;}
.fb-leaderboard[fb-leaderboard] [col='5'] {width: 33.333%;}

/* Top: Rank
/*---------------------------------------------------------------*/
.fb-leaderboard[fb-leaderboard] [rank] {
	--color-idle: inherit;
	--color-active: inherit;
}

.fb-leaderboard[fb-leaderboard] [rank='1'] {
	--color-idle: #cbad6a;
	--color-active: #c39851;
}

.fb-leaderboard[fb-leaderboard] [rank='2'] {
	--color-idle: #bcb3a6;
	--color-active: #827569;
}

.fb-leaderboard[fb-leaderboard] [rank='3'] {
	--color-idle: #d07c42;
	--color-active: #c86135;
}

/* Top: Data
/*---------------------------------------------------------------*/
.fb-leaderboard[fb-leaderboard] [data] {
	color: var(--color-idle);
}

.fb-leaderboard[fb-leaderboard] [data] a {
	color: var(--color-idle);
}

.fb-leaderboard[fb-leaderboard] [data] a:hover,
.fb-leaderboard[fb-leaderboard] [data] a:active {
	color: var(--color-active);
}

.fb-leaderboard[fb-leaderboard] [data] img {
	border: 1px solid var(--color-idle);
}

.fb-leaderboard[fb-leaderboard] [data='rank'] {
	text-align: center;
}

.fb-leaderboard[fb-leaderboard] [data='rank'] img {
	border: none;
}

.fb-leaderboard[fb-leaderboard] [data='icon'] {
	text-align: center;
}

.fb-leaderboard[fb-leaderboard] [data='icon'] img {}

.fb-leaderboard[fb-leaderboard] [data='icon'] img + img {
	margin: 0 0 0 -1px;
}

.fb-leaderboard[fb-leaderboard] [data='name'] {
	text-align: left;
}

.fb-leaderboard[fb-leaderboard] [data='point'] {
	text-align: right;
}

.fb-leaderboard[fb-leaderboard] [data='altname'] {
	text-align: left;
}

/* Top: Responsive
/*---------------------------------------------------------------*/
@media screen and (min-width: 992px) { /* Desktop */
	.fb-leaderboard[fb-leaderboard] {
		--tab-dim: 80px;
	}

	/* Top: Panels
	/*---------------------------------------------------------------*/
	.fb-leaderboard[fb-leaderboard] .leaderboard__panels {}

	.fb-leaderboard[fb-leaderboard] .leaderboard__panels .panel__item {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
	}

	/* Top: Panels: Title
	/*-----------------------------------------------------*/
	.fb-leaderboard[fb-leaderboard] .leaderboard__panels .panel__item.is-title {}

	.fb-leaderboard[fb-leaderboard] .leaderboard__panels .panel__item.is-title .item__block [name] {
		font-size: 2.1rem;
	}
}