@import "../../styles/_variables";
@import "../../styles/_mixins";

.settings-panel {
	flex-shrink: 0;
	overflow: auto;
	font-size: 0.8125rem;
	display: flex;
	border-right: 1px solid var(--sl-border);
	background-color: var(--sl-color-bg-nav);

	.fields {
		width: 250px;
		height: 100%;
		overflow: auto;
	}
}

.settings-tab-buttons {
	display: flex;
	gap: 10px;
}

.settings-tab {
	overflow: auto;

	section {
		padding: 10px;
	}

	input[type="checkbox"] {
		margin-right: 10px;
	}

	select,
	input[type="number"] {
		width: 120px;
	}

	select,
	input[type="number"],
	.input-container {
		margin-left: auto;
	}

	.input-container {
		display: flex;
		flex-direction: column;
		flex-shrink: 0;
		width: auto;
	}

	select {
		@mixin button;
		border-radius: 6px;
		padding: 2px 6px;
		color: inherit;
		border: 1px solid var(--sl-color-gray-5);

		:root[data-theme="dark"] & {
			border: 1px solid var(--sl-color-gray-4);

			& option {
				background-color: var(--sl-color-gray-6);
			}
		}

		@media (prefers-color-scheme: dark) {
			:root[data-theme="auto"] & {
				border: 1px solid var(--sl-color-gray-4);

				& option {
					background-color: var(--sl-color-gray-6);
				}
			}
		}
	}

	input[type="text"],
	input[type="number"] {
		border-radius: 6px;
		border: 1px solid var(--sl-color-gray-5);
		padding: 0 10px;

		:root[data-theme="dark"] & {
			color: inherit;
			background-color: transparent;
		}

		@media (prefers-color-scheme: dark) {
			:root[data-theme="auto"] & {
				color: inherit;
				background-color: transparent;
			}
		}
	}

	button {
		@mixin button;
		border: 1px solid var(--sl-color-gray-5);
		padding: 2px 6px;
		color: inherit;
		border-radius: 6px;
		cursor: pointer;

		&:disabled {
			opacity: 0.5;
			font-weight: bold;
		}
	}

	.button-group button {
		border-radius: 0;

		&:disabled:not(:last-child) {
			border-right: none;
		}

		&:not(:first-child):not(&:disabled + button) {
			border-left: none;
		}

		&:first-child {
			border-top-left-radius: 6px;
			border-bottom-left-radius: 6px;
		}

		&:last-child {
			border-top-right-radius: 6px;
			border-bottom-right-radius: 6px;
		}
	}

	.field-row {
		display: flex;
		line-height: 25px;
		margin-bottom: 10px;

		label {
			width: 100%;
		}

		&.disabled {
			opacity: 0.4;

			/* biome-ignore lint/style/noDescendingSpecificity: false positive */
			&,
			* {
				cursor: not-allowed;
			}
		}
	}
}

.react-tabs__tab-panel .settings-panel {
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.1) !important;
}

.file-view {
	padding-bottom: 10px;

	.files-heading {
		display: flex;
		align-items: center;

		button {
			margin-left: auto;
		}
	}

	> input[type="text"] {
		display: block;
		padding: 5px;
		margin: 5px;
		margin-bottom: 0;
	}

	.files-list {
		padding-top: 10px;

		li {
			display: flex;
			align-items: center;
			padding: 0 10px;
			cursor: pointer;
			line-height: 30px;
			height: 30px;

			&.active {
				font-weight: bold;
				background-color: var(--sl-color-gray-6);

				:root[data-theme="dark"] & {
					background-color: var(--sl-color-gray-5);
				}

				@media (prefers-color-scheme: dark) {
					:root[data-theme="auto"] & {
						background-color: var(--sl-color-gray-5);
					}
				}
			}

			button {
				margin-left: auto;

				&:hover {
					display: block;
					opacity: 0.8;
					background: rgba(0, 0, 0, 0.05);
				}
			}
		}
	}
}
