cinny/src/app/atoms/divider/Divider.scss

.divider-line {
  content: '';
  display: inline-block;
  flex: 1;
  border-bottom: 1px solid var(--local-divider-color);
  opacity: var(--local-divider-opacity);
}

.divider {
  display: flex;
  align-items: center;

  &--center::before,
  &--right::before {
    @extend .divider-line;
  }
  &--center::after,
  &--left::after {
    @extend .divider-line;
  }

  &__text {
    padding: 2px var(--sp-extra-tight);
    border-radius: calc(var(--bo-radius) / 2);
  }
}

.divider--surface {
  --local-divider-color: var(--bg-divider);
  --local-divider-opacity: 1;

  .divider__text {
    color: var(--tc-surface-low);
    border: 1px solid var(--bg-divider);
  }
}
.divider--primary {
  --local-divider-color: var(--bg-primary);
  --local-divider-opacity: .8;
  .divider__text {
    color: var(--tc-primary-high);
    background-color: var(--bg-primary);
  }
}
.divider--positive {
  --local-divider-color: var(--bg-positive);
  --local-divider-opacity: .8;
  .divider__text {
    color: var(--bg-surface);
    background-color: var(--bg-positive);
  }
}
.divider--danger {
  --local-divider-color: var(--bg-danger);
  --local-divider-opacity: .8;
  .divider__text {
    color: var(--bg-surface);
    background-color: var(--bg-danger);
  }
}
.divider--caution {
  --local-divider-color: var(--bg-caution);
  --local-divider-opacity: .8;
  .divider__text {
    color: var(--bg-surface);
    background-color: var(--bg-caution);
  }
}