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

.timepicker
	td
		padding-right: 5px

	.timepicker-link
		theme-prop('color', 'bg-subtle')
		user-select: none

		&:hover
			theme-prop('color', 'link-hover')

	/**
	 * The timepicker button -- for AM/PM.
	 */
	.timepicker-button
		change-bg('bg-offset')
		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
		// Add some extra vertical padding because of the border that
		// goes into input elements.
		padding: ($padding-base-vertical + 1px) $padding-base-horizontal
		font-size: $font-size-base
		line-height: $line-height-base

		&: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.65
			box-shadow: none

		&:hover
			change-bg('bg-subtle')
