fix(styles): remove scss files

styles/abstracts/_colors.scss

@@ -1,14 +0,0 @@
-$colors: (
-  primary: (
-    400: hsla(0deg 0% 100% / 100%),
-    600: hsla(0deg 0% 85% / 100%)
-  ),
-  secondary: (
-    400: hsla(0deg 0% 0% / 100%),
-    600: hsla(0deg 0% 15% / 100%)
-  ),
-  output: (
-    error: hsla(0deg 75% 55% / 100%),
-    success: hsla(126deg 49% 42% / 100%)
-  )
-);

styles/abstracts/_mixins.scss

@@ -1,98 +0,0 @@
-@import 'variables';
-@import 'helpers';
-
-@mixin display-flex($content: center, $items: center, $direction: row) {
-  display: flex;
-  justify-content: #{$content};
-  align-items: #{$items};
-  flex-direction: #{$direction};
-}
-
-@mixin element-invisible($enforce: true) {
-  $important: if($enforce, '!important', null);
-
-  max-height: 0 #{$important};
-  opacity: 0 #{$important};
-  visibility: hidden #{$important};
-  transition: $default-transition;
-}
-
-@mixin element-invisible-off($value-visibility: 100px, $enforce: true) {
-  $important: if($enforce, '!important', null);
-
-  max-height: #{$value-visibility} #{$important};
-  opacity: 1 #{$important};
-  visibility: visible #{$important};
-}
-
-@mixin pseudo-element(
-  $element,
-  $el-height: 0,
-  $el-width: 0,
-  $isCentered: false,
-  $el-background: transparent,
-  $el-rotation: 0deg,
-  $el-transition: none,
-  $isVisible: true
-) {
-  @if $element == 'before' or $element == 'after' {
-    position: relative;
-
-    &:#{$element} {
-      @extend %no-content;
-
-      width: #{$el-width};
-      height: #{$el-height};
-      background: #{$el-background};
-      transition: #{$el-transition};
-      @content;
-
-      @if $isVisible {
-        @include element-invisible-off;
-      } @else {
-        @include element-invisible;
-      }
-
-      @if $isCentered {
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%) rotate(#{$el-rotation});
-      } @else {
-        transform: rotate(#{$el-rotation});
-        @content;
-      }
-    }
-  } @else {
-    @warn "`#{$el}` isn't a valid pseudo element";
-  }
-}
-
-@mixin css-triangle(
-  $pseudo,
-  $triangle-size,
-  $triangle-color,
-  $triangle-direction
-) {
-  @include pseudo-element(#{$pseudo}) {
-    border-style: solid;
-    border-width: $triangle-size;
-    @content;
-
-    border-#{$triangle-direction}-width: 0;
-    border-color: if($triangle-direction == down, $triangle-color, transparent)
-      if($triangle-direction == left, $triangle-color, transparent)
-      if($triangle-direction == up, $triangle-color, transparent)
-      if($triangle-direction == right, $triangle-color, transparent);
-  }
-}
-
-@mixin respond-to($breakpoint) {
-  @if map-has-key($breakpoints, $breakpoint) {
-    @media (min-width: map-get($breakpoints, $breakpoint)) {
-      @content;
-    }
-  } @else {
-    @error "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
-        + "Available breakpoints are: #{map-keys($breakpoints)}.";
-  }
-}

styles/abstracts/_variables.scss

@@ -1,6 +0,0 @@
-$default-transition: 0.3s ease;
-$breakpoints: (
-  small: 320px,
-  medium: 768px,
-  large: 1024px
-) !default;

styles/base/_functions.scss

@@ -1,19 +0,0 @@
-@use 'sass:map';
-@use 'sass:meta';
-@use 'sass:list';
-
-@function custom-map-get($map, $keys...) {
-  $current-map: $map;
-  $i: 1;
-
-  @if meta.type-of($map) == map {
-    @while $i <= length($keys) {
-      $current-map: map.get($current-map, list.nth($keys, $i));
-      $i: $i + 1;
-    }
-  } @else {
-    @error "The #{$current-map} provided is not an actual map.";
-  }
-
-  @return $current-map;
-}

styles/base/_helpers.scss

@@ -1,20 +0,0 @@
-@import 'variables';
-
-%no-content {
-  position: absolute;
-  content: '';
-}
-
-%container {
-  max-width: 1280px;
-  margin-inline: auto;
-  padding: 20px;
-}
-
-%input {
-  outline: none;
-  border: none;
-  background: none;
-  cursor: pointer;
-  transition: $default-transition;
-}

styles/base/_root.scss

@@ -1,22 +0,0 @@
-@use '../abstracts/colors' as *;
-
-:root {
-  @each $color, $shades in $colors {
-    @each $prop, $value in $shades {
-      --#{$color}-#{$prop}: #{$value};
-    }
-  }
-}
-
-*,
-*::after,
-*::before {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  min-height: 100vh;
-  max-width: 100vw;
-}

styles/base/_typographies.scss

@@ -1,32 +0,0 @@
-@use '@fontsource/open-sans/scss/mixins' as OpenSans;
-
-@import 'helpers';
-
-@include OpenSans.fontFace($fontName: 'OpenSans-Regular', $weight: 400);
-@include OpenSans.fontFace($fontName: 'OpenSans-Bold', $weight: 600);
-@include OpenSans.fontFace($fontName: 'OpenSans-ExtraBold', $weight: 700);
-
-%typo-title {
-  padding: 0 10px;
-  text-align: center;
-  font-size: 2.325rem;
-  line-height: 2.5rem;
-  color: hsla(0deg 100% 100% / 100%);
-  font-family: OpenSans-Regular, sans-serif;
-}
-
-%typo-subtitle {
-  padding: 0 10px;
-  text-align: center;
-  font-size: 1.325rem;
-  line-height: 2rem;
-  color: hsla(0deg 100% 100% / 90%);
-  font-family: OpenSans-Regular, sans-serif;
-}
-
-%typo-button {
-  @extend %input;
-
-  padding: 10px 20px;
-  font-family: OpenSans-ExtraBold, sans-serif;
-}

styles/pages/home.scss

@@ -1,42 +0,0 @@
-@import 'mixins';
-@import 'typographies';
-
-.application {
-  @include display-flex(center, center, column);
-
-  min-height: 100vh;
-  max-width: 100vw;
-  background: linear-gradient(180deg, #775aaa, #393ecc);
-
-  .title {
-    @extend %typo-title;
-  }
-
-  .subtitle {
-    @extend %typo-subtitle;
-  }
-
-  :where(.title, .subtitle) {
-    font-style: italic;
-  }
-
-  .redirect-link {
-    @include display-flex(center, center, row);
-    @extend %typo-button;
-
-    text-decoration: none;
-    color: hsla(0deg 0% 0% / 100%);
-    background: hsla(0deg 100% 100% / 100%);
-    border-radius: 8px;
-    margin-top: 30px;
-
-    &:hover {
-      color: hsla(0deg 100% 100% / 100%);
-      background: hsla(0deg 0% 0% / 100%);
-    }
-
-    .text {
-      margin-left: 10px;
-    }
-  }
-}