@import url("./appearance.css");

.nav-container {
	height: 100%;
	background-color: #171a20;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-top: 50px;
}

.nav-container [role="tablist"] {
	width: 240px;
}

.nav {
	list-style: none;
	padding: 0;
	margin: 0;
	height: 100%;
}

.nav-anchor {
	align-self: center;
}

.nav-label {
	opacity: 0.75;
	font-size: 13px;
	font-weight: 600;
	font-stretch: normal;
	font-style: normal;
	line-height: 1.8;
	color: #fff;
	border-bottom: 1px solid white;
	width: 100%;
	margin-left: 20px;
	margin-right: 36px;
	margin-bottom: 10px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.nav-item {
	font-size: 16px;
	font-weight: normal;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	color: #fff;
	padding-top: 0;
	padding-bottom: 5px;
	margin: 0;
}

.export-method-button {
	background-color: #42a5ba;
}

.nav-anchor button {
	background-color: #42a5ba;
}

.nav-anchor button:hover {
	background-color: #36788b;
}

.nav-anchor-reset .button-container-danger button {
	color: white;
	border-color: white;
}

.nav-anchor-reset .button-container-danger button:hover {
	color: #f26666;
	border-color: #f26666;
	background-color: transparent;
}

.nav-anchor-reset .version-info {
	font-size: 13px;
	font-weight: normal;
	font-stretch: normal;
	line-height: normal;
	letter-spacing: normal;
	margin-top: 30px;
	margin-bottom: 20px;
	padding-left: 21px;
	margin-left: 0;
}

.nav-item [role="tab"] {
	margin-left: 10px;
	color: #ddd;
	display: flex;
	align-items: center;
	background-color: rgb(255 255 255 / 0%);
	text-decoration: none;
	user-select: none;
	cursor: pointer;
	white-space: nowrap;
	position: relative;
	padding-left: 10px;
}

.nav-item [role="tab"]:hover,
.nav-item [role="tab"]:focus,
.nav-item [role="tab"][aria-selected="true"] {
	color: #42a5ba;
}

.nav-item [aria-selected="true"] {
	border-left: 6px solid #42a5ba;
	border-radius: 0;
	margin-left: 0;
	padding-left: 15px;
}

.nav-item [aria-selected="false"] {
	padding-left: 21px;
	margin-left: 0;
}

.nav-error-icon {
	position: absolute;
	left: 5px;
	top: 11px;
}

.nav-section {
	width: 100%;
	margin-bottom: 20px;
}

.nav-item .finsemble-icon {
	margin-right: 4px;
}

.nav-item [role="tab"]:is(:hover, :focus) .finsemble-icon-grid {
	color: #42a5ba;
}
