---
source: crates/biome_formatter_test/src/snapshot_builder.rs
info: css/atrule/scope.css
---

# Input

```css
@scope
{
/* Only match links inside a light-scheme */
a { color: darkmagenta; }
}

@scope (
    .light-scheme
    
)
{
/* Only match links inside a light-scheme */
a {
	color: darkmagenta;
}
}

@scope 
to 
(
.content
>
*
)
{
img {
	border-radius: 50%;
}

.content {
	padding: 1em;
}
}

@scope (
    .media-object   )   to  (   .content >   *){
img {
	border-radius: 50%;
}

.content {
	padding: 1em;
}
}

@scope  TO   (.content > *  ) {
img {
	border-radius: 50%;
}

.content {
	padding: 1em;
}
}

@scope (  #inner  ) {
@keyframes --my-anim {
	to {
		background-color: rgb(0, 0, 255);
	}
}
}

@scope (.media-object,
div:active
) 
to ( .content > *  , :hover  ) {}

```


=============================

# Outputs

## Output 1

-----
Indent style: Tab
Indent width: 2
Line ending: LF
Line width: 80
Quote style: Double Quotes
-----

```css
@scope {
	/* Only match links inside a light-scheme */
	a {
		color: darkmagenta;
	}
}

@scope (.light-scheme) {
	/* Only match links inside a light-scheme */
	a {
		color: darkmagenta;
	}
}

@scope to (.content > *) {
	img {
		border-radius: 50%;
	}

	.content {
		padding: 1em;
	}
}

@scope (.media-object) to (.content > *) {
	img {
		border-radius: 50%;
	}

	.content {
		padding: 1em;
	}
}

@scope to (.content > *) {
	img {
		border-radius: 50%;
	}

	.content {
		padding: 1em;
	}
}

@scope (#inner) {
	@keyframes --my-anim {
		to {
			background-color: rgb(0, 0, 255);
		}
	}
}

@scope (.media-object, div:active) to (.content > *, :hover) {
}
```