/* Collection of mixins that can be plugged everywhere */

=clearfix
	clear: both

	&:after
		// Basically same as .clearfix from bootstrap
		clear: both
		display: block
		content: ' '

=container-behavior
	width: 100%

	+media-lg
		width: 100%
		max-width: $screen-lg-min

		margin-left: auto
		margin-right: auto
		box-sizing: border-box

		+clearfix

@mixin button($mixin-color, $roundness, $filled: false)
	display: inline-flex
	align-items: center
	justify-content: center
	padding: 5px 12px
	border-radius: $roundness

	@if $filled
		background: linear-gradient(lighten($mixin-color, 2%), $mixin-color)
		color: white
		border: thin solid darken($mixin-color, 5%)
		text-shadow: 1px 1px 0 rgba(black, .15)
	@else
		background-color: transparent
		color: $mixin-color
		border: thin solid $mixin-color
		text-shadow: none

	transition: color 350ms ease-out, border 150ms ease-in-out, opacity 150ms ease-in-out, background-color 150ms ease-in-out

	&:hover
		cursor: pointer
		text-decoration: none

		@if $filled
			background: linear-gradient(lighten($mixin-color, 5%), lighten($mixin-color, 5%))
			color: white
			border-color: lighten($mixin-color, 5%)
		@else
			background-color: rgba($mixin-color, .1)
			color: $mixin-color
			border-color: $mixin-color

	&:active
		outline: none
		border-color: $mixin-color
		background-color: $mixin-color
		color: white

	i
		margin-right: 8px
	small
		font-size: .6em

	&:disabled
		cursor: not-allowed
		color: $color-text-dark-secondary
		border-color: $color-text-dark-hint

		&:hover
			@if $filled
				background: rgba($color-text-dark-hint, .2)
			@else
				background-color: rgba($color-text-dark-hint, .1)

		@if $filled
			background: rgba($color-text-dark-hint, .1)
			text-shadow: none


=disabled-stripes
	color: $color-text-dark
	cursor: not-allowed
	background: repeating-linear-gradient(-45deg, lighten($color-text-dark-hint, 15%), lighten($color-text-dark-hint, 15%) 10px, lighten($color-text-dark-hint, 5%) 10px, lighten($color-text-dark-hint, 5%) 20px)
	border-color: darken($color-text-dark-hint, 5%)
	pointer-events: none
	opacity: .6


@mixin overlay($from-color, $from-percentage, $to-color, $to-percentage)
	position: absolute
	top: 0
	left: 0
	right: 0
	bottom: 0
	background: linear-gradient(to bottom, $from-color $from-percentage, $to-color $to-percentage)


@mixin stripes($color-light, $color-dark, $deg, $size)
	background-size: $size $size
	background-image: linear-gradient($deg, $color-light 25%, $color-dark 25%, $color-dark 50%, $color-light 50%, $color-light 75%, $color-dark 75%, $color-dark)

=stripes-animate
	animation:
		name: background-slide
		duration: 1s
		delay: 0s
		iteration-count: infinite
		timing-function: linear

=container-box
	position: relative
	background-color: $color-background-light
	border-radius: 3px
	box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px

=text-overflow-ellipsis
	overflow: hidden
	white-space: nowrap
	text-overflow: ellipsis

=position-center-translate
	position: absolute
	top: 50%
	left: 50%
	transform: translate(-50%, -50%)

=input-generic
	background-color: transparent
	border-color: $color-background-dark
	color: $color-text
	transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out

	&:hover
		border-color: $color-background-light

	&:focus
		background-color: unset
		border-color: $primary
		box-shadow: none
		color: $color-text
		outline: 0

=label-generic
	color: $color-text-dark-primary
	font-weight: normal
	font-size: .9em
	margin: 0

@mixin badge($mixin-color, $roundness)
	padding:
		left: 10px
		right: 10px

	text-transform: uppercase

	color: $mixin-color
	border: 1px solid $mixin-color
	border-radius: $roundness

	i
		margin-right: 10px

/* Smallest, like phones on portrait.
 **  Menu is collapsed, columns stack, no brand */
=media-xs
	@media (max-width: #{$screen-tablet - 1px})
		@content

/* Small but wide: phablets, iPads
 **  Menu is collapsed, columns stack, no brand */
=media-sm
	@include media-breakpoint-up(sm)
		@content

/* Tablets portrait.
 **  Menu is expanded, but columns stack, brand is shown */
=media-md
	@include media-breakpoint-up(md)
		@content

=media-lg
	@include media-breakpoint-up(lg)
		@content

=media-xl
	@include media-breakpoint-up(xl)
		@content

=media-xxl
	@include media-breakpoint-up(xxl)
		@content

=media-print
	@media print
		@content

=spin
	animation:
		name: spin-once
		duration: 1s
		delay: 0s
		fill-mode: forwards
		iteration-count: infinite
		timing-function: linear

=spin-once
	+spin
	animation:
		iteration-count: 1

=pulse
	animation:
		name: pulse
		duration: 1s
		delay: 0s
		fill-mode: forwards
		iteration-count: infinite

=pulse-75
	animation:
		name: pulse-75
		duration: 1s
		delay: 0
		fill-mode: forwards
		iteration-count: infinite

@mixin badge($mixin-color, $roundness)

=animation-wiggle
	animation:
		name: wiggle
		duration: 1s
		delay: 0s
		fill-mode: forwards
		iteration-count: infinite
		timing-function: linear

.spin
	position: relative
	+spin
	&:before, &:after
		+spin
		margin:
			left: 0 !important
			right: 0 !important

.spinner
	position: relative
	+spin
	&:before, &:after
		+spin

@keyframes spin-once
	from
		transform: rotate(0deg)
	to
		transform: rotate(360deg)

@keyframes wiggle
	0
		transform: rotate(0deg)
	25%
		transform: rotate(25deg)
	75%
		transform: rotate(-25deg)
	100%
		transform: rotate(0deg)

@keyframes pulse
	0
		opacity: 1
	50%
		opacity: 0
	100%
		opacity: 1

@keyframes pulse-75
	0
		opacity: 1
	50%
		opacity: .8
	100%
		opacity: 1

@keyframes background-fill-left-right
	from
		background-position: right bottom
	to
		background-position: left bottom

@keyframes grow-bounce-in
	0
		transform: scale(0.8)
		opacity: 0
	50%
		transform: scale(1.05)
		opacity: 1
	85%
		transform: scale(1.0)
	90%
		transform: scale(0.99)
	100%
		transform: scale(1.0)

@keyframes fade-in
	0%
		opacity: 0
	100%
		opacity: 1

@keyframes grow-bounce-out
	0
		transform: scale(1.0)
		opacity: 1
	100%
		transform: scale(0.9)
		opacity: 0

@keyframes background-slide
	from
		background-position: 0 0
	to
		background-position: 50px 50px

@keyframes grow-bounce
	0
		transform: scale(1.0)
		opacity: 1
	50%
		transform: scale(1.01)
		opacity: .9
	85%
		transform: scale(1.0)
	90%
		transform: scale(0.99)
		opacity: 1
	100%
		transform: scale(1.0)

@keyframes grow-bounce-heartbeat
	0
		transform: scale(1.0)
	85%
		transform: scale(1.0)
	90%
		transform: scale(1.15)
	94%
		transform: scale(0.9)
	96%
		transform: scale(1.05)
	100%
		transform: scale(1.0)

=list-bullets
	ul
		padding-left: 25px
		list-style: none

		li
			position: relative

		li:before
			content: '·'
			font-weight: 400
			left: -20px
			position: absolute


=node-details-description
	color: $color-text
	word-break: break-word

	/* Style links without a class. Usually regular
	 * links in a comment or node description. */
	a:not([class])
		color: $color-text-dark-primary
		text-decoration: underline

		&:hover
			color: $color-primary

	p
		margin-bottom: 20px
		line-height: 1.5em
		word-wrap: break-word

	blockquote
		+clearfix
		background-color: lighten($color-background-light, 5%)
		box-shadow: inset 5px 0 0 $color-background
		display: inline-block
		width: 100%
		font-size: 1em
		margin:
			bottom: 10px
			left: 0
			right: 20px
			top: 10px
		padding: 5px 5px 5px 20px
		text-shadow: 1px 1px 0 rgba(white, .2)

	ul li blockquote
		margin:
			left: 0
			top: 15px

	img,
	p img,
	ul li img
		@extend .d-block
		@extend .mx-auto
		margin-top: 1rem
		margin-bottom: 1rem
		max-width: 100%

		&.emoji
			display: inline-block !important
			padding: initial
			margin-bottom: initial !important
			margin-top: initial !important

	h2
		margin-bottom: 15px

		+media-xs
			font-size: 1.5em

	/* e.g. YouTube embed */
	iframe, video
		max-width: 100%
		@extend .mx-auto

	.embed-responsive,
	video
		@extend .my-3

	iframe[src^="https://w.soundcloud"]
		min-height: auto

	+list-bullets

	ul
		+clearfix
		margin-bottom: 15px

		li
			img
				display: block
				padding:
					bottom: 10px
					top: 25px

			ul, ul li ul
				margin-top: 15px
				padding-left: 20px

	code, kbd, pre, samp
		background-color: darken(rgba($color-primary, .1), 30%)
		color: $color-primary
		font-size: inherit
		white-space: pre-line

		code
			background-color: transparent

	kbd
		border:
			color: darken(rgba($color-primary, .33), 50%)
			radius: 3px
			style: solid
			width: 2px
		cursor: default
		display: inline-block
		font:
			size: .9em
			weight: bold
		margin:
			bottom: initial
			left: 3px
			right: 3px
			top: initial
		min-width: 15px
		padding: 0 5px
		text:
			align: center
			transform: uppercase

=markdown-preview-container
	border:
		top: 1px solid $color-background
		bottom: 1px solid $color-background
	position: relative
	margin: 40px auto 25px auto
	padding: 10px 10px 25px 10px
	color: $color-text-dark-primary
	cursor: default
	transition: all 150ms ease-in-out

	+node-details-description

	// Funny, normalize.css doesn't normalize when it's outside
	h1
		font-size: 2.8em
	h2
		margin-bottom: 15px


=ribbon
	background-color: $color-success
	border: thin dashed rgba(white, .5)
	color: white
	pointer-events: none
	font-size: 70%
	overflow: hidden
	position: absolute
	right: -40px
	top: 10px
	transform: rotate(45deg)
	white-space: nowrap

	span
		display: block
		margin: 1px 0
		padding: 3px 50px

.ribbon
	+ribbon

=label-tiny
	position: relative

	&:before
		color: $color-danger
		display: block
		font-size: 8px
		font-weight: bold
		left: 100%
		position: absolute
		top: -4px

.new
	+label-tiny

	&:before
		content: 'NEW'


@mixin text-background($text-color, $background-color, $roundness, $padding)
	border-radius: $roundness
	padding: $padding
	background-color: $background-color
	box-shadow: 0.5em 0 0 $background-color,-0.5em 0 0 $background-color
	box-decoration-break: clone
	color: $text-color

=list-meta
	margin: 0
	padding: 0
	list-style: none
	color: $color-text-dark-primary

	li
		display: inline-block
		padding-left: 15px
		position: relative

		&:before
			content: '·'
			position: relative
			top: 1px
			left: -7px
			color: $color-text-dark-secondary

		&:first-child
			padding-left: 0

			&:before
				content: ''
	a
		color: $color-text-dark-secondary
		&:hover
			color: $color-primary

/* Bootstrap's img-responsive class */
=img-responsive
	@extend .img-fluid

/* Set the color for a specified property
 * 1: $property: e.g. background-color
 * 2: $where: ':before', ' .class-name', etc.
 * 3: $variation: 'light', 'dark', or empty
 * e.g. @include status-color-property(background-color, ':before', 'light')
 */
@mixin status-color-property($property, $where: false, $variation: false)

	@if not ($where)
		$where: ''

	&.status
		&-invalid#{$where}
			@if ($variation == 'light')
				#{$property}: $color-status-invalid-light
			@else if ($variation == 'dark')
				#{$property}: $color-status-invalid-dark
			@else
				#{$property}: $color-status-invalid
		&-todo#{$where}
			@if ($variation == 'light')
				#{$property}: $color-status-todo-light
			@else if ($variation == 'dark')
				#{$property}: $color-status-todo-dark
			@else
				#{$property}: $color-status-todo
		&-in_progress#{$where}
			@if ($variation == 'light')
				#{$property}: $color-status-in_progress-light
			@else if ($variation == 'dark')
				#{$property}: $color-status-in_progress-dark
			@else
				#{$property}: $color-status-in_progress
		&-on_hold#{$where}
			@if ($variation == 'light')
				#{$property}: $color-status-on_hold-light
			@else if ($variation == 'dark')
				#{$property}: $color-status-on_hold-dark
			@else
				#{$property}: $color-status-on_hold
		&-approved#{$where}
			@if ($variation == 'light')
				#{$property}: $color-status-approved-light
			@else if ($variation == 'dark')
				#{$property}: $color-status-approved-dark
			@else
				#{$property}: $color-status-approved
		&-cbb#{$where}
			@if ($variation == 'light')
				#{$property}: $color-status-cbb-light
			@else if ($variation == 'dark')
				#{$property}: $color-status-cbb-dark
			@else
				#{$property}: $color-status-cbb
		&-final#{$where}
			@if ($variation == 'light')
				#{$property}: $color-status-final-light
			@else if ($variation == 'dark')
				#{$property}: $color-status-final-dark
			@else
				#{$property}: $color-status-final
		&-review#{$where}
			@if ($variation == 'light')
				#{$property}: $color-status-review-light
			@else if ($variation == 'dark')
				#{$property}: $color-status-review-dark
			@else
				#{$property}: $color-status-review

=sidebar-button-active
	color: $primary

.flash-on
	background-color: lighten($color-success, 50%) !important
	border-color: lighten($color-success, 40%) !important
	color: $color-success !important
	text-shadow: 1px 1px 0 white
	transition: all .1s ease-in
	img
		transition: all .1s ease-in
		opacity: .8

.flash-off
	transition: all 1s ease-out
	img
		transition: all 1s ease-out

.cursor-pointer
	cursor: pointer

.cursor-zoom-in
	cursor: zoom-in

.user-select-none
	user-select: none

.pointer-events-none
	pointer-events: none

// Bootstrap has .img-fluid, a class to limit the width of an image to 100%.
// .imgs-fluid below is to be applied on a parent container when we can't add
// classes to the images themselves. e.g. the blog.
.imgs-fluid
	img
		// Just re-use Bootstrap's mixin here.
		+img-fluid

.overflow-hidden
	overflow: hidden

=text-gradient($color_from, $color_to)
		background: linear-gradient(to right, $color_from, $color_to)
		background-clip: text
		-webkit-background-clip: text
		-webkit-text-fill-color: transparent

=active-gradient
	+text-gradient($primary-accent, $primary)

	&:before
		+text-gradient($primary-accent, $primary)

.title-underline
	padding-bottom: 5px
	position: relative
	margin-bottom: 20px

	&:before
		background-color: $primary
		content: ' '
		display: block
		height: 2px
		top: 125%
		position: absolute
		width: 50px