@use '../../abstract';

.cds-content-divider {
  text-align: center;

  &--background-fill {
    border-radius: 8px;
    padding: 8px 0;
    background-color: var(--gray-50);
  }

  &--dual-line {
    padding: 12px 0;
    border: solid var(--gray-100);
    border-width: 1px 0;
  }

  &--single-line {
    @include abstract.relative;

    contain: layout;
    margin-block: 8px;

    &::before {
      @include abstract.absolute($top: 50%, $left: 0);

      z-index: -1;
      transform: translateY(-50%);
      width: 100%;
      height: 1px;
      background-color: var(--gray-100);
      content: '';
    }

    & > *:first-child {
      display: inline-flex;
      background-color: var(--base-white);
      box-shadow: 0 0 0 8px var(--base-white);
    }
  }
}