@import "./base.css";

@layer components {
	.primary-button {
		color: var(--vscode-button-foreground);
		background-color: var(--vscode-button-background);
		&:hover:not([disabled]) {
			background-color: var(--vscode-button-hoverBackground);
		}
	}

	.secondary-button {
		color: var(--vscode-button-secondaryForeground);
		background-color: var(--vscode-button-secondaryBackground);
		&:hover:not([disabled]) {
			background-color: var(--vscode-button-secondaryHoverBackground);
		}
	}

	.link-button {
		color: var(--vscode-textLink-foreground);
	}

	.sign-in-button:focus,
	.primary-button:focus,
	.secondary-button:focus,
	.link-button:focus,
	.sign-in-input:focus {
		outline: 1px solid var(--vscode-focusBorder);
	}

	.vscode-dark,
	.vscode-hcDark {
		.sign-in-button {
			color: white;
			background-color: #19161d;
			border: 1px solid #4a464f;
			&:hover {
				background-color: #121212;
			}
		}
	}

	.vscode-light,
	.vscode-hcLight {
		.sign-in-button {
			color: black;
			background-color: #ffffff;
			border: 1px solid #b5c2cf;
			&:hover {
				background-color: #f6f6f6;
			}
		}
	}

	.vscode-dark,
	.vscode-hcDark {
		.glass-card {
			background-color: #ffffff1a;
			&.clickable:hover {
				background-color: #ffffff32;
			}
		}
	}

	.vscode-light,
	.vscode-hcLight {
		.glass-card {
			background-color: #0000001a;
			&.clickable:hover {
				background-color: #00000032;
			}
		}
	}

	.vscode-dark,
	.vscode-hcDark {
		.secondary-text {
			color: #c2c1c0;
		}
	}

	.vscode-light,
	.vscode-hcLight {
		.secondary-text {
			color: #4b4b4b;
		}
	}

	.sign-in-input {
		background-color: transparent;
		color: var(--vscode-foreground);
		border: 1px solid #41464b;
	}

	.sign-in-input.error {
		border-color: var(--vscode-errorForeground);
	}

	.error-text {
		color: var(--vscode-errorForeground);
	}
}

@theme {
	--animate-bg-slide: bg-slide 3s linear infinite;
	--animate-pulse-inverse: pulse-inverse 2s ease-in-out infinite;
	--animate-float: float 2s ease-in-out infinite;
	--animate-spin: spin 1s linear infinite;
	@keyframes bg-slide {
		0% {
			background-position-y: 0;
		}
		100% {
			background-position-y: -180px;
		}
	}
	@keyframes pulse-inverse {
		0%,
		100% {
			transform: scaleX(0.8);
		}
		50% {
			transform: scaleX(0.1);
		}
	}
	@keyframes float {
		0%,
		100% {
			transform: translateY(0);
		}
		50% {
			transform: translateY(-30px);
		}
	}
	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}
}
