CSS Files Styling

src/lib/components/tui/TuiButton.svelte

@@ -2,6 +2,7 @@
 	import Icon from '@iconify/svelte';
 	import { getButtonStyle, parseColorText, getSegmentStyle } from './utils';
 	import type { TerminalLine } from './types';
+	import '$lib/assets/css/tui-button.css';
 
 	export let line: TerminalLine;
 	export let index: number;
@@ -48,66 +49,3 @@
 		{/if}
 	{/if}
 </button>
-
-<style>
-	.tui-button {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		width: 100%;
-		padding: 0.5rem 0.75rem;
-		margin: 0.2rem 0;
-		background: transparent;
-		border: 1px solid transparent;
-		border-radius: 4px;
-		color: var(--btn-color);
-		font-family: inherit;
-		font-size: 0.9rem;
-		text-align: left;
-		cursor: pointer;
-		transition: all 0.15s ease;
-	}
-
-	/* Inline button styles */
-	.tui-button.inline {
-		width: auto;
-		display: inline-flex;
-		margin: 0;
-		padding: 0.35rem 0.6rem;
-		border: 1px solid color-mix(in srgb, var(--btn-color) 40%, transparent);
-	}
-
-	.tui-button.inline .btn-indicator {
-		display: none;
-	}
-
-	.tui-button:hover,
-	.tui-button.selected {
-		background: color-mix(in srgb, var(--btn-color) 15%, transparent);
-		border-color: var(--btn-color);
-	}
-
-	.btn-indicator {
-		color: var(--btn-color);
-		font-size: 0.8rem;
-		width: 1rem;
-	}
-
-	.btn-text {
-		flex: 1;
-	}
-
-	:global(.btn-arrow) {
-		opacity: 0.5;
-	}
-
-	.tui-button.selected :global(.btn-arrow) {
-		opacity: 1;
-	}
-
-	:global(.inline-icon) {
-		display: inline-block;
-		vertical-align: middle;
-		margin: 0 0.15em;
-	}
-</style>