.add-ons-list {
	display: flex;
	justify-content: space-between;
	align-items: center;

	.add-ons-tabs {
		display: flex;

		.add-on-tab-title {
			display: flex;
			gap: var(--margin-2);
			align-items: center;
			justify-content: center;
			font-size: var(--font-size-xs);
			font-style: normal;
			font-weight: var(--font-weight-normal);
		}

		.tab {
			border: 1px solid var(--bg-slate-400);
			min-width: 114px;
			height: 36px;
			line-height: 36px;
		}

		.tab::before {
			background: var(--bg-slate-400);
		}

		.selected_view {
			color: var(--text-robin-500);
			border: 1px solid var(--bg-slate-400);

			display: none;
		}

		.selected_view::before {
			background: var(--bg-slate-400);
		}
	}

	.compass-button {
		width: 30px;
		height: 30px;

		border-radius: 2px;
		border: 1px solid var(--bg-slate-400);
		background: var(--bg-ink-300);
		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
	}
}

.selected-add-ons-content {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	padding-bottom: 8px;

	.add-on-content {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}
}