fixed style files module names

src/components/input/Button/styles.module.scss

@@ -0,0 +1,235 @@
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.3;
+  }
+}
+
+.button {
+  height: $input_height;
+  border: none;
+  box-sizing: border-box;
+  padding: 0 30px;
+  color: white;
+  text-transform: uppercase;
+  font: $font_14_semibold;
+
+  outline: none;
+  cursor: pointer;
+  margin: 0;
+
+  background: $button_bg_color;
+  border-radius: $input_radius;
+
+  fill: white;
+  stroke: white;
+  user-select: none;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  position: relative;
+
+  filter: grayscale(0);
+
+  transition: opacity 0.25s, filter 0.25s, box-shadow 0.25s;
+  opacity: 0.8;
+
+  @include outer_shadow();
+
+  input {
+    color: red;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    bottom: 0;
+    opacity: 0;
+  }
+
+  svg {
+    fill: white;
+    stroke: white;
+  }
+
+  span {
+    flex: 1;
+  }
+
+  &:global(.disabled) {
+    touch-action: none;
+    pointer-events: none;
+  }
+
+  &:hover {
+    opacity: 1;
+
+    &:global(.disabled) {
+      cursor: auto;
+    }
+
+    &:active {
+      box-shadow: transparentize(#e933a5, 0.6) 0 0 0;
+    }
+  }
+
+  &:global(.seamless) {
+    background: transparent;
+    color: black;
+    box-shadow: none;
+    fill: black;
+    stroke: black;
+    padding: 0;
+  }
+
+  &:global(.transparent) {
+    background: transparent;
+    color: white;
+    box-shadow: transparentize(black, 0.5) 0 0 4px;
+    padding: 0;
+    fill: black;
+    stroke: black;
+  }
+
+  &:global(.red) {
+    fill: $red;
+    stroke: $red;
+    color: $red;
+  }
+
+  &:global(.stretchy) {
+    flex: 1;
+  }
+
+  &:global(.disabled),
+  &:global(.grey) {
+    background: transparentize(white, 0.9);
+    color: white;
+    // background: lighten(white, 0.5);
+    // filter: grayscale(100%);
+  }
+
+  &:global(.disabled) {
+    opacity: 0.3;
+  }
+
+  &:global(.icon) {
+    padding-left: 10px;
+    padding-right: 10px;
+
+    svg {
+      margin: 0 !important;
+    }
+  }
+
+  &:global(.is_loading) {
+    span,
+    svg {
+      animation: pulse 0.25s infinite alternate;
+    }
+  }
+
+  &:global(.has_icon_left) {
+    padding-left: $gap;
+    padding-right: $gap;
+  }
+
+  &:global(.has_icon_right) {
+    padding-left: $gap;
+    padding-right: $gap;
+  }
+
+  &.primary {
+    background: $red_gradient;
+  }
+
+  &.secondary {
+    background: $green_gradient;
+  }
+
+  &.outline {
+    background: transparent;
+    box-shadow: inset transparentize(white, 0.8) 0 0 0 2px;
+    color: transparentize(white, 0.8);
+
+    svg {
+      fill: transparentize(white, 0.8);
+    }
+  }
+
+  &.gray {
+    background: lighten($content_bg, 8%);
+  }
+
+  &.link {
+    background: transparent;
+    color: white;
+    box-shadow: none;
+    padding: 0 $gap;
+
+    svg {
+      fill: white;
+    }
+  }
+
+  > * {
+    margin: 0 5px;
+
+    &:first-child {
+      margin-left: 0;
+    }
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+
+.micro {
+  height: 20px;
+  font: $font_12_semibold;
+  padding: 0 15px;
+  border-radius: $radius / 2;
+}
+.mini {
+  height: 28px;
+  border-radius: $radius / 2;
+}
+.small {
+  height: 32px;
+  // border-radius: $radius / 2;
+
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+}
+.normal {
+  height: 38px;
+}
+.big {
+  height: 40px;
+}
+.giant {
+  height: 50px;
+  padding: 0 15px;
+  min-width: 50px;
+}
+.disabled {
+  opacity: 0.5;
+}
+
+.icon_left {
+  margin-right: $gap / 2 !important;
+  width: 20px;
+  height: 20px;
+}
+
+.icon_right {
+  margin-left: $gap / 2 !important;
+  width: 20px;
+  height: 20px;
+}