fixed styles imports

src/components/main/Header/styles.module.scss

@@ -0,0 +1,121 @@
+@import "src/styles/variables";
+
+.wrap {
+  height: $header_height;
+  z-index: 25;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  box-sizing: border-box;
+  transition: background-color 0.5s;
+
+  @include desktop {
+    height: 64px;
+    padding: 0 $gap;
+  }
+
+  &.is_scrolled {
+    background: transparentize($content_bg, 0.05);
+
+    @include can_backdrop {
+      background: transparentize($content_bg, 0.25);
+      -webkit-backdrop-filter: blur(5px);
+      backdrop-filter: blur(5px);
+    }
+  }
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  font-weight: 500;
+  // padding: $gap;
+  box-sizing: border-box;
+  flex: 0 1 $content_width;
+}
+
+.spacer {
+  flex: 1;
+}
+
+.plugs {
+  display: flex;
+  user-select: none;
+  text-transform: uppercase;
+  align-items: center;
+}
+
+.profile {
+  padding: 5px 10px;
+  box-shadow: white 0 0 0 1px;
+  border-radius: 10px;
+}
+
+.user_button {
+  flex: 0;
+  padding-left: $gap / 2;
+  cursor: pointer;
+}
+
+.item {
+  font: $font_16_medium;
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: $gap $gap * 2;
+  cursor: pointer;
+  transition: color 0.25s;
+  text-decoration: none;
+  color: white;
+  white-space: nowrap;
+
+  &:hover {
+    color: $red;
+  }
+
+  &::before {
+    content: ' ';
+    position: absolute;
+    bottom: 0;
+    height: 3px;
+    width: 50%;
+    right: 50%;
+    background: white;
+    transform: translate(50%, 0) scaleX(0);
+    opacity: 0;
+    border-radius: 3px;
+    transition: transform 0.5s, opacity 0.25s;
+  }
+
+  &::after {
+    content: ' ';
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    border-radius: 4px;
+    background: lighten($red, 10%);
+    right: 12px;
+    top: 6px;
+    transition: opacity 0.5s;
+    opacity: 0;
+  }
+
+  &.has_dot {
+    &::after {
+      opacity: 1;
+    }
+  }
+
+  @include tablet {
+    padding: $gap;
+
+    &::after {
+      right: 0;
+    }
+  }
+}