@import '~styles/variables'
@import '~styles-lib/mixins'

$page-cut-content
	position: relative
	z-index: 2

.page-cut
	--bg-save: var(--theme-bg-actual)
	position: relative
	display: flex
	justify-content: center
	margin-bottom: $line-height-computed

	&::before
		theme-prop('border-top-color', 'bg-subtle')
		content: ''
		position: absolute
		top: 18px
		left: 0
		right: 0
		height: 0
		line-height: 0
		border-top-width: 2px
		border-top-style: dashed
		overflow: hidden

	&:empty
		height: 2px

		&::before
			top: 0

	.button
		@extend $page-cut-content

		&.-outline
			background-color: var(--bg-save)

.page-cut-content
	@extend $page-cut-content
	display: inline-block
	padding: 0 8px
	background-color: var(--bg-save)

.page-cut-no-margin
	margin-bottom: 0
