Content Separator

//
// Content Separator
//

// Component specific variables
$border-position: calc($font-size-base / 2);

// Component definition
.content-separator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 100%;

  white-space: nowrap;
}

// Both subcomponents overlap the border of its parent component by
// having a small padding and a white background color.
.content-separator__date,
.content-separator__duration {
  display: inline-block;

  padding-right: $spacer-xs;
  padding-left: $spacer-xs;

  line-height: 1;
  color: $content-seperator-text-color;

  background-color: $box-shadow-color-light;
}

.content-separator__separator {
  transform: rotate(90deg);

  width: $spacer-sm;
  height: 2px;
  margin: $spacer-sm 0;

  background-color: $content-seperator-text-color;
  border: 0;
}

// Inverted Version
.content-seperator--inverted {
  .content-separator__date,
  .content-separator__duration {
    color: $box-shadow-color-light;
    background-color: $content-seperator-text-color;
  }

  .content-separator__separator {
    background-color: $box-shadow-color-light;
  }
}

//Breakpoints
@media screen and (min-width: $grid-breakpoint-md) {
  .content-separator {
    flex-direction: row;
    align-content: center;

    height: 1px;
    min-height: $font-size-base;
    // The border in the middle of the component is realized with
    // a stack of two inset box-shadows the first one is white
    // and reaches from the top to the middle of the baseline.
    // The second box-shadow is 1px taller than the first one,
    // resulting in a single line.
    box-shadow:
      $box-shadow-color-light 0 $border-position 0 0 inset,
      $box-shadow-color-dark 0 calc(#{$border-position} + 1px) 0 0 inset;
  }

  .content-seperator--inverted {
    // The border in the middle of the component is realized with
    // a stack of two inset box-shadows the first one is white
    // and reaches from the top to the middle of the baseline.
    // The second box-shadow is 1px taller than the first one,
    // resulting in a single line.
    box-shadow:
      $box-shadow-color-dark 0 $border-position 0 0 inset,
      $box-shadow-color-light 0 calc(#{$border-position} + 1px) 0 0 inset;
  }

  .content-separator__separator {
    transform: rotate(180deg);
    margin: 0;
  }
}