refactor from PostCSS to SASS

assets/css/header.css

@@ -1,163 +0,0 @@
-@define-mixin menu {
-  position: absolute;
-  background: var(--background);
-  box-shadow: var(--shadow);
-  color: white;
-  border: 2px solid;
-  margin: 0;
-  padding: 10px;
-  list-style: none;
-  z-index: 99;
-}
-
-.header {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-
-  @media print {
-    display: none;
-  }
-
-  &__inner {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  &__logo {
-    display: flex;
-    flex: 1;
-
-    &:after {
-      content: '';
-      background: repeating-linear-gradient(90deg, var(--accent), var(--accent) 2px, transparent 0, transparent 10px);
-      display: block;
-      width: 100%;
-      right: 10px;
-    }
-
-    a {
-      flex: 0 0 auto;
-      max-width: 100%;
-      text-decoration: none;
-    }
-  }
-
-  .menu {
-    --shadow-color: color-mod(var(--background) a(80%));
-    --shadow: 0 10px var(--shadow-color), -10px 10px var(--shadow-color), 10px 10px var(--shadow-color);
-    margin: 20px 1px;
-
-    @media (--phone) {
-      @mixin menu;
-      top: 50px;
-      right: 0;
-    }
-
-    &__inner {
-      display: flex;
-      flex-wrap: wrap;
-      list-style: none;
-      margin: 0;
-      padding: 0;
-
-      &--desktop {
-        @media (--phone) {
-          display: none;
-        }
-      }
-
-      &--mobile {
-        display: none;
-
-        @media (--phone) {
-          display: block;
-        }
-      }
-
-      li {
-        &:not(:last-of-type) {
-          margin-right: 20px;
-          margin-bottom: 10px;
-          flex: 0 0 auto;
-        }
-      }
-
-      @media (--phone) {
-        flex-direction: column;
-        align-items: flex-start;
-        padding: 0;
-
-        li {
-          margin: 0;
-          padding: 5px;
-        }
-      }
-    }
-
-    &__sub-inner {
-      position: relative;
-      list-style: none;
-      padding: 0;
-      margin: 0;
-
-      &:not(:only-child) {
-        margin-left: 20px;
-      }
-
-      &-more {
-        @mixin menu;
-        top: 35px;
-        left: 0;
-
-        &-trigger {
-          color: var(--accent);
-          user-select: none;
-          cursor: pointer;
-        }
-
-        li {
-          margin: 0;
-          padding: 5px;
-          white-space: nowrap;
-        }
-      }
-    }
-
-    .spacer {
-      flex-grow: 1;
-    }
-
-    .language-selector {
-      position: relative;
-      list-style: none;
-      margin: 0;
-
-      &-current {
-        list-style-type: none;
-        display: flex;
-        flex-direction: row;
-        color: var(--accent);
-        cursor: pointer;
-        margin: 0;
-      }
-
-      &__more {
-        @mixin menu;
-        top: 35px;
-        right: 0;
-      }
-    }
-
-    &-trigger {
-      color: var(--accent);
-      border: 2px solid;
-      margin-left: 10px;
-      height: 100%;
-      padding: 3px 8px;
-      position: relative;
-      cursor: pointer;
-    }
-  }
-}