@use '../../shared/styles/utils';
@use './theme';
@use './scrollbars';
@use './tokens';

:root {
	--gitlens-scrollbar-gutter-width: 10px;
	--gitlens-tree-foreground: var(--vscode-sideBar-foreground, var(--vscode-foreground));
}

@include utils.dark-theme {
	--color-background--level-05: var(--color-background--lighten-05);
	--color-background--level-075: var(--color-background--lighten-075);
	--color-background--level-10: var(--color-background--lighten-10);
	--color-background--level-15: var(--color-background--lighten-15);
	--color-background--level-30: var(--color-background--lighten-30);
}

@include utils.light-theme {
	--color-background--level-05: var(--color-background--darken-05);
	--color-background--level-075: var(--color-background--darken-075);
	--color-background--level-10: var(--color-background--darken-10);
	--color-background--level-15: var(--color-background--darken-15);
	--color-background--level-30: var(--color-background--darken-30);
}

// generic resets
html {
	// box-sizing: border-box;
	font-family: var(--font-family);
	font-size: 62.5%;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	padding: 0;
	font-family: var(--font-family);
	font-size: var(--font-size);
	color: var(--color-foreground);
}

@include scrollbars.scrollableBase;

a {
	text-decoration: none;

	&:hover {
		text-decoration: underline;
	}
}

ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

.bulleted {
	padding-left: 1.2em;
	list-style: disc;

	> li + li {
		margin-top: 0.25em;
	}
}

.button--busy {
	&[aria-busy='true'] {
		opacity: 0.5;
	}

	&:not([aria-busy='true']) {
		code-icon {
			display: none;
		}
	}
}

.button-container {
	max-width: 30rem;
	margin: 1rem auto 0;
	text-align: left;
	transition: max-width var(--gl-duration-medium) var(--gl-ease-out);
}

@media (width >= 640px) {
	.button-container {
		max-width: 100%;
	}
}

.button-group {
	display: inline-flex;
	gap: 0.1rem;

	&--single {
		width: 100%;
		max-width: 30rem;
	}

	> *:not(:first-child),
	> *:not(:first-child) gl-button {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}

	> *:not(:last-child),
	> *:not(:last-child) gl-button {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
}

.section {
	padding: 0 var(--gitlens-scrollbar-gutter-width) 1.5rem var(--gitlens-gutter-width);

	> :first-child {
		margin-top: 0;
	}

	> :last-child {
		margin-bottom: 0;
	}
}

.section--message {
	padding: 0 var(--gitlens-scrollbar-gutter-width) 1rem var(--gitlens-scrollbar-gutter-width);
}

.section--empty {
	> :last-child {
		margin-top: 0.5rem;
	}
}

.section--skeleton {
	padding: {
		top: 1px;
		bottom: 1px;
	}
}

.message-block {
	position: relative;
	padding: 0.5rem;
	font-size: var(--gl-font-base);
	background: var(--vscode-input-background);
	border: var(--gl-border-width) solid var(--vscode-input-border, transparent);
	border-radius: var(--gl-radius-xs) var(--gl-radius-xs) 0 0;

	&__text {
		max-height: 9rem;
		margin: 0;
		overflow: hidden auto;

		strong {
			font-size: var(--gl-font-lg);
			font-weight: 600;
		}
	}

	&__copy {
		position: absolute;
		right: 0.4rem;
		bottom: 0.4rem;
		z-index: 1;
		color: var(--vscode-descriptionForeground);
		opacity: 0.7;
		transition: opacity var(--gl-duration-fast) ease;

		&:hover,
		&:focus-within {
			color: var(--vscode-foreground);
			opacity: 1;
		}
	}
}

.message-block-row,
.message-block-group {
	display: flex;
	flex-direction: row;
	gap: var(--gl-space-6);
}

.message-block-row {
	justify-content: space-between;
}

.message-block-row--actions {
	padding: var(--gl-space-2);
	font-size: var(--gl-font-base);
	color: var(--color-foreground--65);
	background: var(--color-background--level-075);

	&:last-child {
		border-radius: 0 0 var(--gl-radius-xs) var(--gl-radius-xs);
	}

	&:first-of-type:last-child {
		border-radius: var(--gl-radius-xs);
	}

	gl-action-chip::part(icon),
	gl-autolink-chip::part(icon) {
		--code-icon-size: 1.3rem;
	}

	.reachability-summary code-icon,
	.reachability-summary gl-action-chip::part(icon) {
		--code-icon-size: 12px;
	}

	gl-action-chip.error {
		background-color: var(--color-alert-errorBackground);
	}

	gl-action-chip.warning {
		background-color: var(--color-alert-warningHoverBackground);
	}
}

// Reachability styles
.reachability-summary {
	display: flex;
	flex: 1 1 0;
	flex-wrap: wrap;
	gap: var(--gl-space-6);
	align-items: center;
	min-width: 0;
	overflow: hidden;

	code-icon,
	gl-action-chip::part(icon) {
		--code-icon-size: 12px;
	}

	gl-action-chip::part(base) {
		overflow: hidden;
	}
}

.reachability-range-chip-wrapper {
	display: inline-flex;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;

	@media (width <= 768px) {
		flex: 1 1 100%;
	}
}

.reachability-range-chip {
	display: inline-flex !important;
	width: auto;
	min-width: 0;
	max-width: 100%;
	padding: 0.1rem 0.25rem;
	overflow: hidden;
	color: var(--color-foreground--65);
	border-radius: var(--gl-radius-sm);
	--chip-text-transform: none;
	--chip-background: transparent;

	&:hover,
	&:focus {
		opacity: 1;
	}

	&--range {
		cursor: pointer;
	}

	&--local-branch {
		font-weight: 600;
		color: var(--vscode-gitlens-graphScrollMarkerLocalBranchesColor, #4ec9b0);
	}

	&--remote-branch {
		color: var(--vscode-gitlens-graphScrollMarkerLocalBranchesColor, #4ec9b0);
	}

	&--tag {
		color: color-mix(in srgb, var(--vscode-editorWarning-foreground, #cca700) 70%, var(--color-foreground) 30%);
	}

	&--current &__label {
		font-weight: 600;
	}

	&__label {
		flex: 1 1 auto;
		min-width: 0;
		max-width: 100%;
		padding-left: 0.25rem;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: inherit;
		white-space: nowrap;

		code-icon {
			margin-right: var(--gl-space-2);
			vertical-align: middle;
		}
	}

	&__ellipsis {
		padding: 0 var(--gl-space-4);
		opacity: 0.8;
	}

	&__count {
		padding-left: var(--gl-space-4);
		font-size: var(--gl-font-micro);
		font-weight: 600;
		color: var(--color-foreground--50);
	}
}

.reachability-popover {
	min-width: 200px;
	max-width: 400px;

	&__header {
		padding-bottom: var(--gl-space-6);
		font-weight: 500;
	}

	&__list {
		display: flex;
		flex-direction: column;
		gap: var(--gl-space-2);
		max-height: 300px;
		overflow-y: auto;
	}
}

.reachability-list-item {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	padding: 0.3rem 0.4rem;
	font-size: 0.95em;
	line-height: 1.4;

	&--current {
		font-weight: 600;
	}

	&__icon {
		flex-shrink: 0;
		font-size: 1.1em;
		opacity: 0.8;
	}

	&__label {
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

.mq-hide-sm {
	@media (width <= 300px) {
		display: none !important;
	}
}

.commit-detail-panel {
	max-height: 100vh;
	overflow: auto;
	scrollbar-gutter: stable;
	color: var(--vscode-sideBar-foreground);
	background-color: var(--color-background);

	[aria-hidden='true'] {
		display: none;
	}
}

.ai-content {
	padding: 0.5rem;
	margin-top: var(--gl-space-10);
	font-size: var(--gl-font-base);
	background: var(--vscode-input-background);
	border: var(--gl-border-width) solid var(--vscode-input-border, transparent);
	border-radius: var(--gl-radius-xs);

	&.has-error {
		padding-left: var(--gl-space-8);
		border-left-color: var(--color-alert-errorBorder);
		border-left-width: 0.3rem;
	}

	&:empty {
		display: none;
	}

	&__summary {
		display: block;
		max-height: 20rem;
		margin: 0;
		overflow: hidden auto;
	}
}
