@import "../../const"

button
	font-family sans-serif

	*
		pointer-events none

button.ui
.button.ui
	display inline-block
	cursor pointer
	padding 0 14px
	margin 0
	min-width 100px
	line-height 38px
	font-size 14px
	color #888
	text-decoration none
	background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
	border solid 1px #e2e2e2
	border-radius 4px
	outline none

	&.block
		display block

	&: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

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

	&:active
		background #ececec
		border-color #dcdcdc

	&.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

input:not([type]).ui
input[type='text'].ui
input[type='password'].ui
input[type='email'].ui
input[type='date'].ui
input[type='number'].ui
textarea.ui
	display block
	padding 10px
	width 100%
	height 40px
	font-family sans-serif
	font-size 16px
	color #55595c
	border solid 1px #dadada
	border-radius 4px

	&:hover
		border-color #b0b0b0

	&:focus
		border-color $theme-color

textarea.ui
	min-width 100%
	max-width 100%
	min-height 64px

.ui.info
	display block
	margin 1em 0
	padding 0 1em
	font-size 90%
	color rgba(#000, 0.87)
	background #f8f8f9
	border solid 1px rgba(34, 36, 38, 0.22)
	border-radius 4px

	> p
		opacity 0.8

		> [data-fa]:first-child
			margin-right 0.25em

	&.warn
		color #573a08
		background #FFFAF3
		border-color #C9BA9B

.ui.from.group
	display block
	margin 16px 0

	> p:first-child
		margin 0 0 6px 0
		font-size 90%
		font-weight bold
		color rgba(#373a3c, 0.9)