dmz/src/scss/components/_divider.scss

/*! 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%);
    }
  }
}