transform css to sass

assets/css/site-nav.css

@@ -1,92 +0,0 @@
-
-#site-nav a {
-    text-decoration: none;
-    color: currentColor;
-}
-
-#site-nav li{
-    font-weight: 500;
-    color: var(--color-txt);
-}
-
-.arrow{
-
-    --size: 12px;
-    height: var(--size);
-    width: var(--size);
-    position: relative; 
-    top: 2px;
-    display: inline-block;
- 
-    svg{
-        height: var(--size);
-        width: var(--size);
-        transform: rotate(0deg);
-        transform-origin: center;
-        transition: transform .2s ease-in-out;
-        fill: var(--color-txt);
-    }
-    
-    
-}
-
-#site-nav .nav-level-1_ul{
-    display: flex;
-    gap: calc(var(--padding-inner)*2);
-
-}
-#site-nav .nav-level-1_li {
-    display: block;
-    /* float: left; */
-    padding: var(--padding-inner);
-    position: relative;
-    text-decoration: none;
-
-    &:hover{
-        color: var(--color);
-        .arrow svg{
-            transform: rotate(90deg);
-            fill: var(--color);
-        }
-
-    }
-}
-
-
-
-#site-nav li:hover {
-    cursor: pointer;
-}
-
-.nav-level-2_ul {
-    visibility: hidden;
-    opacity: 0;
-    position: absolute;
-    left: 0;
-    display: none;
-    border-top: 1px solid var(--color);
-    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
-    margin-top: var(--padding-inner); 
-    min-width: 24ch;
-
-}
-
-.nav-level-1_ul li:hover > .nav-level-2_ul,
-.nav-level-2_ul:hover {
-    visibility: visible;
-    opacity: 1;
-    display: block;
-}
-.nav-level-2_li{
-    width: 100%;
-    padding: calc(var(--padding-inner)*0.75) var(--padding-inner);
-    
-}
-.nav-level-2_li:hover{
-    background-color: var(--color-light);
-}
-
-
-
-
-