@import './base.css';
@import '../components/modal/modal.css';

@layer components {
	.kiro-profile-options {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-kiro-md);
	}

	.kiro-profile-options > div {
		display: flex;
		justify-content: space-between;
	}

	.kiro-profile-options > div > div {
		display: flex;
		flex-direction: column;
	}

	.kiro-profile-skeleton > div > div {
		gap: var(--spacing-kiro-sm);
	}

	.kiro-profile-options > div > div:last-child {
		align-items: end;
	}

	.kiro-profile-option {
		padding: var(--spacing-kiro-md);
	}

	.kiro-profile-selector-content {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-kiro-md);
	}

	.kiro-profile-option {
		color: var(--vscode-descriptionForeground);
		border: 1px solid var(--vscode-widget-border);
		border-radius: var(--border-radius-kiro-md);
		transition: background-color var(--kiro-transition);
	}

	.kiro-profile-option:not(.kiro-profile-option-selected, .kiro-modal-loading-skeleton-item):hover {
		background-color: var(--vscode-list-hoverBackground);
		cursor: pointer;
	}

	.kiro-profile-option-selected {
		border-color: var(--vscode-accent);
		background-color: var(--vscode-list-activeSelectionBackground);
		color: var(--vscode-list-activeSelectionForeground);
	}

	.kiro-profile-name {
		font-weight: bold;
		font-size: var(--font-size-kiro-lg);
		color: var(--vscode-foreground);
	}

	.kiro-profile-option-selected .kiro-profile-name {
		color: var(--vscode-list-activeSelectionForeground);
	}
}
