@import './Button.css';
@import './Form.css';
@import './theme.css';

.react-aria-RadioGroup {
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: var(--text-color);
}

.react-aria-Radio {
	display: flex;
	align-items: center;
	gap: 0.571rem;
	font-size: 1.143rem;
	color: var(--text-color);
	forced-color-adjust: none;

	&:before {
		content: '';
		display: block;
		width: 1.286rem;
		height: 1.286rem;
		box-sizing: border-box;
		border: 0.143rem solid var(--border-color);
		background: var(--field-background);
		border-radius: 1.286rem;
		transition: all 200ms;
	}

	&[data-pressed]:before {
		border-color: var(--border-color-pressed);
	}

	&[data-selected] {
		&:before {
			border-color: var(--highlight-background);
			border-width: 0.429rem;
		}

		&[data-pressed]:before {
			border-color: var(--highlight-background-pressed);
		}
	}

	&[data-focus-visible]:before {
		outline: 2px solid var(--focus-ring-color);
		outline-offset: 2px;
	}

	&[data-invalid] {
		&:before {
			border-color: var(--invalid-color);
		}

		&[data-pressed]:before {
			border-color: var(--invalid-color-pressed);
		}
	}
}

.react-aria-RadioGroup {
	.react-aria-FieldError {
		font-size: 12px;
		color: var(--invalid-color);
	}

	[slot='description'] {
		font-size: 12px;
	}

	&[data-orientation='horizontal'] {
		flex-direction: row;
		align-items: center;
	}
}

.react-aria-Radio {
	&[data-disabled] {
		color: var(--text-color-disabled);

		&:before {
			border-color: var(--border-color-disabled);
		}
	}
}
