@layer components {
	/* Button */
	.kiro-button {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: var(--spacing-sm) var(--spacing-lg);
		line-height: 24px;
		font-weight: 400;
		font-size: calc(var(--text-md) + 3px);
		border-radius: var(--radius-lg);
		transition: var(--kiro-transition);
		cursor: pointer;

		&:disabled {
			cursor: not-allowed
		}
	}

	.kiro-button.kiro-button-primary {
		color: var(--vscode-button-foreground);
		background-color: var(--vscode-button-background);

		&:hover:not(:disabled) {
			background-color: var(--vscode-button-hoverBackground);
		}

		&:disabled {
			color: hsl(from var(--vscode-button-foreground) h s l / 0.5);
			background-color: hsl(from var(--vscode-button-background) h 50% l / 0.5);
		}
	}

	.kiro-button.kiro-button-outline {
		background-color: transparent;
		border: 1px solid var(--vscode-widget-border);
		color: var(--vscode-descriptionForeground);

		&:hover:not(:disabled) {
			background-color: var(--vscode-button-hoverBackground);
			color: var(--vscode-button-foreground);
		}

		&:disabled {
			color: hsl(from var(--vscode-button-foreground) h s l / 0.5);
		}
	}
}
