@use "../../../../scss/admin/variables";

.sidebar {
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 32px;
	right: 0;
	width: 500px;
	max-width: 100vw;
	height: calc(100vh - 32px);
	background: #fff;
	box-shadow: -4px 2px 8px 0 rgba(0, 0, 0, 0.12);
	z-index: 99999;

	&.secondary {
		width: 406px;
		right: 500px;
		z-index: 9998;
	}

	* {
		box-sizing: border-box;
	}

	p {
		color: var(--text-text-tertiary, variables.$text-text-tertiary);
		font-size: 12px !important;
		font-weight: 400;
		margin-top: variables.$spacing-sm !important;
		margin-bottom: variables.$spacing-md !important;
		line-height: 16.8px !important;
	}
}

.sidebarHeader {
	display: flex;
	align-items: center;
	padding: 16px 20px;
	border-bottom: 1px solid variables.$surface-surface-divider;
	background: #fff;
	gap: 10px;
}

.sidebarTitle {
	font-size: 18px;
	font-weight: 500;
	color: variables.$text-text-title;
}

.sidebarClose {
	margin-left: auto;
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	width: 32px;
	transition: color 0.2s;

	svg > path {
		fill: variables.$text-text-icon;
	}

	&:hover,
	&:focus {

		svg > path {
			fill: variables.$text-text-icon--hover;
		}
	}
}

.sidebarBack {
	background: none;
	border: none;
	cursor: pointer;
	margin-right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: 50%;
	height: 32px;
	width: 32px;
	transition: background 0.2s;

	// stylelint-disable-next-line no-descending-specificity
	svg > path {
		fill: variables.$text-text-icon;
	}

	&:hover,
	&:focus {

		svg > path {
			fill: variables.$text-text-title;
		}
	}
}

.sidebarBody {
	flex: 1 1 auto;
	overflow-y: auto;
}

.sidebarContainer {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.sidebarTabs {
	display: flex;
	align-items: center;
	padding: 0 variables.$spacing-md;
	background: #fff;
	border-bottom: 1px solid variables.$surface-surface-divider;
}

.sidebarTab {
	padding: 11px variables.$spacing-md;
	margin-bottom: -1px;
	font-size: variables.$text-font-size-s;
	line-height: 20px;
	font-weight: 400;
	color: variables.$text-text-tertiary;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	transition: color variables.$transitions-transition-normal, border-color variables.$transitions-transition-normal;

	&:hover,
	&:focus {
		color: variables.$text-text-icon--hover;
	}
}

.sidebarTabActive {
	color: variables.$text-text-title;
	border-bottom: 2px solid variables.$buttons-button-primary-background;
}

.sidebarContent {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: variables.$spacing-md;
	min-height: 0; // Important for Firefox

	form {
		min-height: calc(100% - 67px);
	}
}

.sidebarFooter {
	min-height: 59px;
	padding: 11px variables.$spacing-md;
	border-top: 1px solid variables.$surface-surface-divider;
	display: flex;
	flex-shrink: 0;
}