fix(standalone): fixes standalone component styling (#13769)

* test(e2e): update standalone tests for snapshot

* fix(standalone): improve component fonts, box-sizing, etc

* refactor(input): separate textarea styles from input and rename classes

* fix(datetime): change position in an item so cover is over item

packages/core/src/components/segment/segment.ios.scss

@@ -4,6 +4,10 @@
 // iOS Segment
 // --------------------------------------------------
 
+.segment-ios {
+  font-family: $segment-ios-font-family;
+}
+
 .segment-ios ion-segment-button {
   display: flex;
 

packages/core/src/components/segment/segment.ios.vars.scss

@@ -3,6 +3,12 @@
 // iOS Segment
 // --------------------------------------------------
 
+/// @prop - Background of the segment button
+$segment-ios-font-family:                       $font-family-ios-base !default;
+
+// TODO either move to button or rename
+// ---------------------------------------------
+
 /// @prop - Background of the segment button
 $segment-button-ios-background-color:           transparent !default;
 

packages/core/src/components/segment/segment.md.scss

@@ -4,6 +4,10 @@
 // Material Design Segment
 // --------------------------------------------------
 
+.segment-md {
+  font-family: $segment-md-font-family;
+}
+
 .segment-md ion-segment-button {
   display: flex;
 

packages/core/src/components/segment/segment.md.vars.scss

@@ -3,6 +3,9 @@
 // Material Design Segment
 // --------------------------------------------------
 
+/// @prop - Background of the segment button
+$segment-md-font-family:                       $font-family-md-base !default;
+
 /// @prop - Text color of the activated segment button
 $segment-button-md-text-color-activated:       $toolbar-md-active-color !default;
 

packages/core/src/components/segment/segment.scss

@@ -14,6 +14,7 @@ ion-segment {
 }
 
 .segment-button {
+  @include border-radius(0);
   @include margin-horizontal(0);
   @include text-align(center);