first

src/scss/components/_divider.scss

@@ -0,0 +1,61 @@
+/*! divider.scss | Vuero | Css ninja 2020-2024 */
+
+$divider-background-color: $grey-lighter !default;
+$divider-thickness: 0.1rem !default;
+$divider-font-size: $size-7 !default;
+$divider-color: $grey-light !default;
+
+.is-divider,
+.is-divider-vertical {
+  display: block;
+  position: relative;
+  border-top: $divider-thickness solid $divider-background-color;
+  height: $divider-thickness;
+  margin: 2rem 0;
+  text-align: center;
+}
+
+.is-divider[data-content]::after,
+.is-divider-vertical[data-content]::after {
+  background: var(--white);
+  color: $divider-color;
+  content: attr(data-content);
+  display: inline-block;
+  font-size: $divider-font-size;
+  padding: 0.4rem 0.8rem;
+  transform: translateY(-1.1rem);
+  text-align: center;
+}
+
+.is-divider-vertical {
+  @include tablet {
+    display: block;
+    flex: none;
+    width: auto;
+    height: auto;
+    padding: 2rem;
+    margin: 0;
+    position: relative;
+    border-top: none;
+    min-height: 2rem;
+
+    &::before {
+      border-inline-start: $divider-thickness solid $divider-background-color;
+      bottom: 1rem;
+      content: '';
+      display: block;
+      inset-inline-start: 50%;
+      position: absolute;
+      top: 1rem;
+      transform: translateX(calc(var(--transform-direction) * -50%));
+    }
+
+    &[data-content]::after {
+      position: absolute;
+      inset-inline-start: 50%;
+      top: 50%;
+      padding: 0.1rem;
+      transform: translateY(-50%) translateX(-50%);
+    }
+  }
+}