// ============================================================================
// :: Divider
// ============================================================================
/**
 * This component is used to seperate content from each other. Instead of just
 * a border you can pass a component into the container.
 */

// ============================================================================
// :: Settings
// ============================================================================
$divider-height: 0.2rem;

 // ============================================================================
// :: Root
// ============================================================================
.a-divider {
  position: relative;
  z-index: $z-index-floor;

  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: $divider-height;

  &:before {
    content: "";

    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: $z-index-pit;

    width: 100%;
    height: $divider-height;

    background-color: $background-color-base;
  }
}

// ============================================================================
// :: Elements
// ============================================================================
.a-divider__container {
  display: inline-block;
  max-width: calc(100% - 4rem);
  padding: 0.8rem 1.2rem;

  @include respond-at($breakpoint-tablet-default) {
    padding: 1rem 1.6rem;
  }

  /**
   * Set the border radius to 100rem so that the borders are fully rounded, 50%
   * or 100% are not used because the width and height are not equal
   */
  border-radius: 100rem;
  background-color: $background-color-base;
}