@import "../base"
@import "../../../../node_modules/cropperjs/dist/cropper.css"

*::input-placeholder
	color #D8CBC5

*
	&:focus
		outline none

	&::scrollbar
		width 5px
		background transparent

		&:horizontal
			height 5px

	&::scrollbar-button
		width 0
		height 0
		background rgba(0, 0, 0, 0.2)

	&::scrollbar-piece
		background transparent

		&:start
			background transparent

	&::scrollbar-thumb
		background rgba(0, 0, 0, 0.2)

		&:hover
			background rgba(0, 0, 0, 0.4)

		&:active
			background $theme-color

	&::scrollbar-corner
		background rgba(0, 0, 0, 0.2)

html
	background #fdfdfd

	// ↓ workaround of https://github.com/riot/riot/issues/2134
	&[data-page='entrance']
		#wait
			right auto
			left 15px

html[theme='dark']
	background #100f0f

button
	font-family sans-serif

	*
		pointer-events none

	&.style-normal
	&.style-primary
		display block
		cursor pointer
		padding 0 16px
		margin 0
		min-width 100px
		height 40px
		font-size 1em
		outline none
		border-radius 4px

		&:focus
			&:after
				content ""
				pointer-events none
				position absolute
				top -5px
				right -5px
				bottom -5px
				left -5px
				border 2px solid rgba($theme-color, 0.3)
				border-radius 8px

		&:disabled
			opacity 0.7
			cursor default

	&.style-normal
		color #888
		background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
		border solid 1px #e2e2e2

		&:hover
			background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
			border-color #dcdcdc

		&:active
			background #ececec
			border-color #dcdcdc

	&.style-primary
		color $theme-color-foreground
		background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
		border solid 1px lighten($theme-color, 15%)

		&:not(:disabled)
			font-weight bold

		&:hover:not(:disabled)
			background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
			border-color $theme-color

		&:active:not(:disabled)
			background $theme-color
			border-color $theme-color