.Divider {
  display: flex;
  align-items: center;
  margin: 12px 0;
  font-size: @font-size-xs;
  color: var(--color-text-3);

  &:before,
  &:after {
    content: '';
    display: block;
    flex: 1;
    border-top: 1px solid var(--color-line-1);

    @media (hover: none) {
      & {
        transform: scaleY(0.5);
      }
    }
  }
}

.Divider--text-center,
.Divider--text-left,
.Divider--text-right {
  &:before {
    margin-right: var(--gutter);
  }
  &:after {
    margin-left: var(--gutter);
  }
}

.Divider--text-left {
  &:before {
    max-width: 10%;
  }
}

.Divider--text-right {
  &:after {
    max-width: 10%;
  }
}