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

.-current
	display: block
	width: $input-height-base

strong
	display: block
	margin-bottom: 10px

@media $media-sm-up
	.-popover
		width: 325px

.-presets
	display: flex
	flex-wrap: wrap
	justify-content: flex-start
	margin: 0 -10px

.-preset
	display: block
	width: (100% / 6)
	padding-left: 10px
	padding-right: 10px
	margin-bottom: $line-height-computed

.-popover
	>>>
		.vc-sketch
			box-shadow: none
			width: 100%
			box-sizing: border-box

		.vc-sketch-presets
			display: none

		.vc-input__input
			theme-prop('color', 'fg')
			change-bg('bg')
			theme-prop('border-color', 'bg-subtle')
			border-width: 2px
			border-style: solid
			border-radius: $input-border-radius
			box-shadow: none
			transition: border-color ease-in-out 0.15s

			&:focus
				theme-prop('border-color', 'fg-muted')
				box-shadow: none
				outline: 0
