@require '~styles/variables'

datepicker-button-variant(color, background, hover-background)
	color: color
	background-color: background

	&:hover, &:focus, &:active, &.active
		color: color
		background-color: hover-background

	&:active, &.active
		background-image: none

	.badge
		color: background
		background-color: color

/**
 * The datepicker buttons.
 */
.datepicker-btn
	display: inline-block
	margin: 0
	text-align: center
	vertical-align: middle
	cursor: pointer
	background-image: none // Reset unusual Firefox-on-Android default style see https://github.com/necolas/normalize.css/issues/214
	border: 0
	white-space: nowrap
	user-select: none
	padding: 6px 12px
	font-size: $font-size-base
	line-height: $line-height-base

	// Less padding so it fits in the width for small displays.
	@media $media-xs
		padding-left: 10px
		padding-right: 10px

	&:hover, &:focus, &:active
		text-decoration: none
		outline: none

	&.disabled, &[disabled], fieldset[disabled] &
		cursor: not-allowed
		pointer-events: none // Future-proof disabling of clicks
		opacity: 0.4
		box-shadow: none

	.jolticon
		cursor: pointer

	.text-info
		font-weight: bold
		color: inherit

	/**
	 * Button variants
	 */
	&.datepicker-btn-default
		datepicker-button-variant(inherit, var(--theme-bg-offset), var(--theme-bg-subtle))

	&.datepicker-btn-info
		datepicker-button-variant(var(--theme-highlight-fg), var(--theme-highlight), var(--theme-highlight))

	/**
	 * Block buttons.
	 */
	&.datepicker-btn-block
		display: block
		width: 100%
		padding-left: 0
		padding-right: 0

	.datepicker-btn-block + .datepicker-btn-block
		margin-top: 5px

	input[type='submit'], input[type='reset'], input[type='button']
		&.datepicker-btn-block
			width: 100%
