src/app/converter-selector/converter-selector.component.html

@@ -1,9 +1,9 @@
-<div [ngClass]="{selectwrapper: true, error: step.error}">
+<div [ngClass]="{select_wrapper: true, error: step.error}">
   <div class="arrow_box">
-    <select class="select" (change)="convert($event)">
+    <select (change)="convert($event)">
       <option id="undefined">Select conversion ...</option>
       @for (c of converters; track c.getId()) {
-        <option class="option" id="{{c.getId()}}">{{ c.getDisplayname() }}</option>
+        <option id="{{c.getId()}}">{{ c.getDisplayname() }}</option>
       }
     </select>
   </div>

src/app/converter-selector/converter-selector.component.scss

@@ -1,4 +1,4 @@
-.selectwrapper {
+.select_wrapper {
   margin: 0 0 1em 0;
   padding: 0;
   text-align: center;
@@ -19,36 +19,36 @@
   }
 }
 
-.select {
+select {
   background-color: #eee;
   border: none;
   color: #111;
   font-family: "ABeeZee", sans-serif;
   margin: 0;
   padding: 0.5em;
+  transition: background-color ease-in-out 200ms, color ease-in-out 200ms;
 
   &:focus, &:hover {
     background-color: #fff;
     color: #000;
   }
-
-  transition: background-color ease-in-out 200ms, color ease-in-out 200ms;
 }
 
 .arrow_box {
-  position: relative;
   border: 1px solid transparent;
+  position: relative;
+  transition: background-color ease-in-out 200ms, border ease-in-out 200ms;
 
   &:after, &:before {
-    top: 100%;
-    left: 50%;
     border: solid transparent;
     content: " ";
     height: 0;
-    width: 0;
-    position: absolute;
+    left: 50%;
     pointer-events: none;
+    position: absolute;
+    top: 100%;
     transition: background-color ease-in-out 200ms, border ease-in-out 200ms;
+    width: 0;
   }
 
   &:after {
@@ -63,13 +63,11 @@
     margin-left: calc(-1em - 1px);
   }
 
-  &:has(>.select:focus, >.select:hover):after {
+  &:has(>select:focus, >select:hover):after {
     border-top-color: #fff;
   }
 
-  .selectwrapper > & {
+  .select_wrapper > & {
     display: inline-block;
   }
-
-  transition: background-color ease-in-out 200ms, border ease-in-out 200ms;
 }

src/app/text-input-field/text-input-field.component.scss

@@ -1,22 +1,22 @@
 :host {
-  display: block;
   border: none;
+  display: block;
   margin: 0 0 1em 0;
   padding: 0 1em 0 0;
   position: relative;
 
   &:after {
-    top: 100%;
-    left: 50%;
     border: 1em solid transparent;
     border-top-color: #eee;
     content: " ";
     height: 0;
-    width: 0;
-    position: absolute;
-    pointer-events: none;
+    left: 50%;
     margin-left: -1em;
+    pointer-events: none;
+    position: absolute;
+    top: 100%;
     transition: border-top-color ease-in-out 200ms;
+    width: 0;
   }
 
   &:has(>textarea:focus, >textarea:hover):after {
@@ -33,12 +33,11 @@ textarea {
   margin: 0;
   padding: 0.5em;
   resize: vertical;
+  transition: background-color ease-in-out 200ms, color ease-in-out 200ms;
   width: 100%;
 
   &:focus, &:hover {
     background-color: #fff;
     color: #000;
   }
-
-  transition: background-color ease-in-out 200ms, color ease-in-out 200ms;
 }