SASS mixin doesn't work, for some reason?

[llRusty]

I feel like I have Gandalf in front of me on that bridge! I’ve tried different browsers (and cleaned cache), and even checked the solution, but FCC won’t let me pass for some reason. I’ll add, the div does what it’s supposed to on the screen, too. Is there a mistake?

  **Your code so far**

<style type='text/scss'>
@mixin border-stroke($val){
@if $val == light{
  border: 1px solid black
}
@else if $val == medium{
  border: 3px solid black
}
@else if $val == heavy{
  border: 6px solid black
}
@else{
  border: none
}
}


#box {
  width: 150px;
  height: 150px;
  background-color: red;
  @include border-stroke(medium);
}
</style>

<div id="box"></div>

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55 Safari/537.36 Edg/96.0.1054.43

Challenge: Use @if and @else to Add Logic To Your Styles

Link to the challenge:

freeCodeCamp.org

[llRusty]

Here’s the test results, in case they’re useful…
// running tests Your mixin should have an @if statement to check if $val is light, and to set the border to 1px solid black.
Your mixin should have an @else if statement to check if $val is medium, and to set the border to 3px solid black.
Your mixin should have an @else if statement to check if $val is heavy, and to set the border to 6px solid black.
Your mixin should have an @else statement to set the border to none
// tests completed

[llRusty]

Figured it out. It’s always something bloody simple…