CSS errors need fixing - css

Question

I found a switch I'd like to use http://codepen.io/katmai7/pen/fyzuH . There is a working example at the above link but there are errors in the code and I ran this thru a code checker but wasn't able to figure out how to fix it. Do you know how to fix it? Here is what the code checker said:
Sorry! We found the following errors (6)
URI : TextArea
27 .wrap Parse Error .line{ position: absolute; top: 50px; width: 100%; border-top: 1px solid #1B1B1C; border-bottom: 1px solid #323334; }
28 .wrap Parse Error }
43 .switch Property user-select doesn't exist : none
45 .switch Lexical error at line 45, column 3. Encountered: "&" (38), after : "" &
48 :hover Parse Error .slide:after{ opacity: .05; }
49 :hover Parse Error Lexical error at line 51, column 3. Encountered: "&" (38), after : ""
html{
height: 100%;
}
body{
height: 100%;
background: #C1D1DA;
background: radial-gradient(ellipse at center, rgba(92,93,95,1) 0%,rgba(47,48,49,1) 100%);
}
.wrap{
position:relative;
margin: 100px auto;
width: 90px;
height: 100px;
border: 1px solid #1F1F20;
border-radius: 5px;
background: linear-gradient(to bottom, rgba(58,59,60,1) 0%,rgba(28,28,29,1) 100%);
box-shadow:inset 0 3px 4px -2px rgba(94,96,96, 1), 0 0 6px -1px rgba(0,0,0, .8), 0 2px 7px -1px rgba(0,0,0, .5);
.line{
position: absolute;
top: 50px;
width: 100%;
border-top: 1px solid #1B1B1C;
border-bottom: 1px solid #323334;
}
}
.switch{
position: relative;
display: block;
margin: 13px 17px;
width: 55px;
height: 25px;
border: 1px solid #1A1A1B;
border-radius: 20px;
background: linear-gradient(to bottom, rgba(31,31,32,1) 0%,rgba(58,58,58,1) 100%);
box-shadow: 0 1px 1px 0 rgba(130,132,134, .6), inset 0 4px 0 -3px rgba(0,0,0, .3);
cursor: pointer;
transition: box-shadow .5s ease .27s, border-color .5s ease .27s;
user-select: none;
&:hover{
.slide:after{
opacity: .05;
}
}
&.p2{
margin-top: 25px;
}
&:after{
display: block;
width: 100%;
height: 100%;
border-radius: 20px;
background: green;
background: linear-gradient(to bottom, rgba(186,101,82,1) 0%,rgba(215,151,101,1) 100%);background: linear-gradient(to bottom, rgba(186,101,82,1) 0%,rgba(215,151,101,1) 100%);
content: "";
opacity: 0;
transition: opacity .5s ease .27s;
}
/some context/
&:before{
position: absolute;
display: block;
width: 95%;
height: 60%;
border-radius: 20px;
background: #fff;
content: "";
opacity: .03;
}
.icon-off, .icon-eye-open{
position: absolute;
z-index: 2;
display: block;
line-height: 25px;
font-size: 18px;
}
.icon-eye-open{
left: 5px;
color: #EDD6CD;
text-shadow: 0 1px 0 #97614B;
}
.icon-off{
top: 1px;
right: 5px;
color: #6D6F70;
}
.slide{
position: absolute;
top: -1px;
left: -2px;
z-index:5;
width: 25px;
height: 25px;
border: 1px solid #171718;
border-radius: 50%;
background: linear-gradient(to bottom, rgba(64,65,66,1) 0%,rgba(30,30,31,1) 100%);
box-shadow:inset 0 1px 2px 0 rgba(93,94,95, .8), 1px 3px 5px -2px rgba(0,0,0, .7);
transition: left .4s ease-in, border-color .4s ease-in .1s;
&:after{
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
background: linear-gradient(to bottom, rgba(243,232,223,1) 0%,rgba(204,169,140,1) 100%);
content: "";
opacity: 0;
transition: opacity .4s ease .1s;
}
}
}
input[type=checkbox]{
display: none;
&:checked{
+ .switch{
border-color: #4D2318;
box-shadow: 0 1px 1px 0 rgba(130,132,134, .6), inset 0 4px 0 -3px rgba(0,0,0, .3), 0 0 15px 0 rgba(213,147,99, .7);
&:after{
opacity: 1;
}
.slide{
left: 29px;
border-color: #704F3F;
&:after{
opacity: 1;
}
}
}
}
}

Answer 1

You are using a CSS parser on LESS syntax, which will definitely throw errors.
LESS allows for selector nesting like this:
.wrap {
/* some css */
.line {
/* some more CSS */
}
}
You can't do this in pure CSS, which is why your CSS checker is throwing all these errors. The code is basically equivalent to:
.wrap { ... }
.wrap .line { ... }