@layer ukmeds247-components {
	:where(html) {
		font-size: 100%;
	}

	:where(.ukmeds247-stack) {
		display: flex;
		flex-direction: column;
		gap: var(--ukmeds247-space-4);
	}

	:where(.ukmeds247-cluster) {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		gap: var(--ukmeds247-space-3);
	}

	:where(.ukmeds247-grid) {
		display: grid;
		gap: var(--ukmeds247-space-5);
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	}

	:where(.ukmeds247-section) {
		padding-block: clamp(var(--ukmeds247-space-6), 4vw, var(--ukmeds247-space-8));
	}

	:where(.ukmeds247-readable) {
		inline-size: min(100%, var(--ukmeds247-width-prose));
	}

	:where(.ukmeds247-visually-hidden) {
		block-size: var(--ukmeds247-border-width);
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		inline-size: var(--ukmeds247-border-width);
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
	}

	:where(.ukmeds247-button) {
		cursor: pointer;
		gap: var(--ukmeds247-space-2);
		text-decoration: none;
	}

	:where(.ukmeds247-button--secondary):hover {
		background: var(--ukmeds247-color-surface);
		border-color: var(--ukmeds247-color-brand-primary-hover);
		color: var(--ukmeds247-color-brand-primary-hover);
	}

	:where(.ukmeds247-button--tertiary, .ukmeds247-inline-action) {
		background: transparent;
		border-color: transparent;
		color: var(--ukmeds247-color-brand-primary);
	}

	:where(.ukmeds247-button--tertiary, .ukmeds247-inline-action):hover {
		background: var(--ukmeds247-color-surface);
		color: var(--ukmeds247-color-brand-primary-hover);
	}

	:where(.ukmeds247-button--destructive) {
		background: var(--ukmeds247-color-error);
		color: var(--ukmeds247-color-text-inverse);
	}

	:where(.ukmeds247-button--destructive):hover,
	:where(.ukmeds247-button--destructive):active {
		background: var(--ukmeds247-color-text);
		color: var(--ukmeds247-color-text-inverse);
	}

	:where(.ukmeds247-button):active {
		transform: translateY(var(--ukmeds247-border-width));
	}

	:where(.ukmeds247-button[disabled], .ukmeds247-button[aria-disabled="true"], .ukmeds247-is-disabled) {
		background: var(--ukmeds247-color-disabled-surface);
		border-color: var(--ukmeds247-color-border);
		color: var(--ukmeds247-color-disabled-text);
		cursor: not-allowed;
		opacity: 1;
		transform: none;
	}

	:where(.ukmeds247-button[aria-busy="true"], .ukmeds247-loading) {
		cursor: progress;
	}

	:where(.ukmeds247-button[aria-busy="true"])::before {
		animation: ukmeds247-spin var(--ukmeds247-duration-normal) linear infinite;
		block-size: var(--ukmeds247-space-4);
		border: var(--ukmeds247-border-width-strong) solid currentcolor;
		border-block-start-color: transparent;
		border-radius: var(--ukmeds247-radius-pill);
		content: "";
		inline-size: var(--ukmeds247-space-4);
	}

	:where(.ukmeds247-field) {
		display: grid;
		gap: var(--ukmeds247-space-1);
	}

	:where(.ukmeds247-required) {
		color: var(--ukmeds247-color-error);
		font-weight: var(--ukmeds247-font-weight-semibold);
	}

	:where([aria-invalid="true"]) {
		border-color: var(--ukmeds247-color-error);
		border-width: var(--ukmeds247-border-width-strong);
	}

	:where(textarea) {
		min-block-size: calc(var(--ukmeds247-touch-target) * 3);
		resize: vertical;
	}

	:where(.ukmeds247-choice) {
		align-items: start;
		display: flex;
		gap: var(--ukmeds247-space-2);
	}

	:where(.ukmeds247-choice label) {
		font-weight: var(--ukmeds247-font-weight-regular);
		margin: var(--ukmeds247-space-0);
	}

	:where(.ukmeds247-notice) {
		display: grid;
		gap: var(--ukmeds247-space-2);
	}

	:where(.ukmeds247-notice__title) {
		font-weight: var(--ukmeds247-font-weight-semibold);
	}

	:where(.ukmeds247-card--feature) {
		border-block-start: var(--ukmeds247-border-width-strong) solid var(--ukmeds247-color-brand-accent);
	}

	:where(.ukmeds247-card--information) {
		background: var(--ukmeds247-color-info-surface);
	}

	:where(.ukmeds247-product-card) {
		display: grid;
		gap: var(--ukmeds247-space-4);
		grid-template-rows: auto 1fr auto;
	}

	:where(.ukmeds247-product-card__media) {
		aspect-ratio: 4 / 3;
		background: var(--ukmeds247-color-surface-strong);
		border-radius: var(--ukmeds247-radius-sm);
	}

	:where(.ukmeds247-badge--success) {
		background: var(--ukmeds247-color-success-surface);
		color: var(--ukmeds247-color-success);
	}

	:where(.ukmeds247-badge--warning) {
		background: var(--ukmeds247-color-warning-surface);
		color: var(--ukmeds247-color-warning);
	}

	:where(.ukmeds247-status) {
		align-items: center;
		display: inline-flex;
		gap: var(--ukmeds247-space-2);
	}

	:where(.ukmeds247-status)::before {
		background: currentcolor;
		block-size: var(--ukmeds247-space-2);
		border-radius: var(--ukmeds247-radius-pill);
		content: "";
		inline-size: var(--ukmeds247-space-2);
	}

	:where(.ukmeds247-empty-state) {
		background: var(--ukmeds247-color-surface);
		border: var(--ukmeds247-border-width) dashed var(--ukmeds247-color-border-strong);
		border-radius: var(--ukmeds247-radius-md);
		padding: var(--ukmeds247-space-6);
		text-align: center;
	}

	:where(.ukmeds247-price) {
		align-items: baseline;
		display: flex;
		flex-wrap: wrap;
		gap: var(--ukmeds247-space-2);
	}

	:where(.ukmeds247-price__qualifier) {
		color: var(--ukmeds247-color-text-muted);
		font-size: var(--ukmeds247-font-size-sm);
		font-weight: var(--ukmeds247-font-weight-regular);
	}

	@keyframes ukmeds247-spin {
		to {
			transform: rotate(1turn);
		}
	}
}