CSS Files Styling

src/lib/assets/css/tui-radio.css

@@ -0,0 +1,87 @@
+.tui-radio-group {
+	margin: 0.5rem 0;
+	font-size: 0.9rem;
+}
+
+.tui-radio-group.inline {
+	display: inline-flex;
+	flex-direction: column;
+	margin: 0 0.75rem 0 0;
+}
+
+.tui-radio-group.disabled {
+	opacity: 0.5;
+}
+
+.radio-label {
+	display: flex;
+	align-items: center;
+	gap: 0.35rem;
+	margin-bottom: 0.5rem;
+	color: var(--terminal-muted);
+	font-size: 0.85rem;
+}
+
+:global(.label-icon) {
+	color: var(--radio-color);
+}
+
+.radio-options {
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;
+}
+
+.radio-options.horizontal {
+	flex-direction: row;
+	flex-wrap: wrap;
+	gap: 0.75rem;
+}
+
+.radio-option {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	padding: 0.35rem 0.5rem;
+	cursor: pointer;
+	border-radius: 4px;
+	transition: all 0.15s ease;
+	user-select: none;
+}
+
+.radio-option:hover:not(.option-disabled) {
+	background: color-mix(in srgb, var(--radio-color) 10%, transparent);
+}
+
+.radio-option:focus-visible {
+	outline: 1px solid var(--radio-color);
+	outline-offset: 2px;
+}
+
+.radio-option.option-disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+.radio-symbol {
+	font-family: inherit;
+	font-weight: bold;
+	color: var(--terminal-muted);
+	transition: color 0.15s ease;
+}
+
+.radio-option.selected .radio-symbol {
+	color: var(--radio-color);
+}
+
+:global(.option-icon) {
+	color: var(--radio-color);
+}
+
+.option-label {
+	color: var(--terminal-text);
+}
+
+.radio-option.option-disabled .option-label {
+	color: var(--terminal-muted);
+}