diff --git a/packages/core/src/components/reorder-group/reorder-group.scss b/packages/core/src/components/reorder-group/reorder-group.scss
index c87cbbdf7a..acd4246657 100644
--- a/packages/core/src/components/reorder-group/reorder-group.scss
+++ b/packages/core/src/components/reorder-group/reorder-group.scss
@@ -12,78 +12,3 @@
 
   will-change: transform;
 }
-
-.reorder-selected {
-  position: relative;
-  z-index: $z-index-reorder-selected;
-
-  box-shadow: 0 0 10px rgba(0, 0, 0, .4);
-  opacity: .8;
-
-  // TODO remove !important
-  transition: none !important;
-}
-
-.reorder.no-hide {
-  display: block;
-
-  visibility: normal;
-}
-
-.reorder:not(.no-hide) {
-  display: none;
-
-  pointer-events: all;
-  touch-action: manipulation;
-}
-
-.reorder-enabled .reorder {
-  display: block;
-
-  cursor: grab;
-  cursor: -webkit-grab;
-}
-
-.reorder-selected,
-.reorder-selected .reorder {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-.reorder[slot] {
-  @include margin(auto, null);
-
-  line-height: 0;
-}
-
-.reorder[slot="start"] {
-  order: -1;
-}
-
-.reorder ion-icon svg {
-  min-width: 1em;
-}
-
-.reorder-icon {
-  @include transform(translate3d($reorder-initial-transform, 0, 0));
-
-  display: block;
-
-  font-size: 1.3em;
-  transition: transform 140ms ease-in;
-}
-
-.item-ios .reorder-icon {
-  font-size: 2em;
-
-  fill: currentColor;
-  opacity: .4;
-}
-
-.reorder[slot="start"] .reorder-icon {
-  @include transform(translate3d(-$reorder-initial-transform, 0, 0));
-}
-
-.reorder-visible .reorder .reorder-icon {
-  @include transform(translate3d(0, 0, 0));
-}
diff --git a/packages/core/src/components/reorder-group/reorder-group.vars.scss b/packages/core/src/components/reorder-group/reorder-group.vars.scss
index a829785c33..a43be46d56 100644
--- a/packages/core/src/components/reorder-group/reorder-group.vars.scss
+++ b/packages/core/src/components/reorder-group/reorder-group.vars.scss
@@ -2,5 +2,3 @@
 
 // Reorder Group
 // --------------------------------------------------
-
-$reorder-initial-transform: 160% !default;
diff --git a/packages/core/src/components/reorder/reorder.scss b/packages/core/src/components/reorder/reorder.scss
new file mode 100644
index 0000000000..4651f929d8
--- /dev/null
+++ b/packages/core/src/components/reorder/reorder.scss
@@ -0,0 +1,83 @@
+@import "./reorder.vars";
+
+// Reorder
+// --------------------------------------------------
+
+.reorder[slot] {
+  @include margin(auto, null);
+
+  line-height: 0;
+}
+
+.reorder[slot="start"] {
+  order: -1;
+}
+
+.reorder.no-hide {
+  display: block;
+
+  visibility: normal;
+}
+
+.reorder:not(.no-hide) {
+  display: none;
+
+  pointer-events: all;
+  touch-action: manipulation;
+}
+
+.reorder-enabled .reorder {
+  display: block;
+
+  cursor: grab;
+  cursor: -webkit-grab;
+}
+
+.reorder-selected,
+.reorder-selected .reorder {
+  cursor: grabbing;
+  cursor: -webkit-grabbing;
+}
+
+.reorder-selected {
+  position: relative;
+  z-index: $z-index-reorder-selected;
+
+  box-shadow: 0 0 10px rgba(0, 0, 0, .4);
+  opacity: .8;
+
+  // TODO remove !important
+  transition: none !important;
+}
+
+
+// Reorder Icon
+// --------------------------------------------------
+
+.reorder-icon {
+  @include transform(translate3d($reorder-initial-transform, 0, 0));
+
+  display: block;
+
+  font-size: 1.3em;
+  transition: transform 140ms ease-in;
+}
+
+.reorder-icon svg {
+  min-width: 1em;
+}
+
+.item-ios .reorder-icon {
+  font-size: 2em;
+
+  fill: currentColor;
+  opacity: .4;
+}
+
+.reorder[slot="start"] .reorder-icon {
+  @include transform(translate3d(-$reorder-initial-transform, 0, 0));
+}
+
+.reorder-visible .reorder .reorder-icon {
+  @include transform(translate3d(0, 0, 0));
+}
\ No newline at end of file
diff --git a/packages/core/src/components/reorder/reorder.tsx b/packages/core/src/components/reorder/reorder.tsx
index 1d1ea2fa0b..6b43f17a6a 100644
--- a/packages/core/src/components/reorder/reorder.tsx
+++ b/packages/core/src/components/reorder/reorder.tsx
@@ -3,6 +3,7 @@ import { Component, Element, State } from '@stencil/core';
 
 @Component({
   tag: 'ion-reorder',
+  styleUrl: 'reorder.scss',
   host: {
     theme: 'reorder'
   }
diff --git a/packages/core/src/components/reorder/reorder.vars.scss b/packages/core/src/components/reorder/reorder.vars.scss
new file mode 100644
index 0000000000..1eae2cf674
--- /dev/null
+++ b/packages/core/src/components/reorder/reorder.vars.scss
@@ -0,0 +1,7 @@
+@import "../../themes/ionic.globals";
+
+// Reorder
+// --------------------------------------------------
+
+/// @prop - Transform of the reorder when it isn't visible
+$reorder-initial-transform:         160% !default;
\ No newline at end of file