@import './style-dictionary.scss'
@import './functions.scss'

.nu-btn.md-button
	border-radius: $spacing-small
	color: rgba(0, 0, 0, 0.33)
	height: 40px
	font-weight: $weight-font-semi-bold
	font-size: $font-display-5
	line-height: initial
	text-transform: none
	min-height: 40px
	min-width: 135px

	&.nu-btn--icon
		md-icon
			font-size: 24px
			margin: 0 $spacing-small

	&:disabled
		opacity: 0.33

	md-icon
		margin: 0
		vertical-align: initial

	&.nu-btn-icon-sm
		md-icon
			max-height: 10px
			min-height: 10px
            margin-right: 4px
            min-width: 10px
            width: 10px

	&.nu-btn--raised
		box-shadow: 0 3px 6px $color-basic-lighter

	&.nu-btn--raised-cyan 
		box-shadow: 0px 4px 6px rgba(0, 165, 175, 0.25)
		
	&.nu-btn--bg-cyan
			background-color: $color-cyan-dark !important
			color: $color-white-medium !important
			border-color: $color-cyan-dark !important

			md-icon
				color: $color-white-medium

	&.nu-btn--bg-white
			background-color: $color-white-medium

	&.nu-btn--bg-magenta-md
		background: $color-magenta-medium
		color: $color-white-medium


	&.nu-btn--text-cyan
			color: $color-cyan-dark

			md-icon
				color: $color-cyan-dark

	&.nu-btn--text-basic
		color: $color-basic-medium

	&.nu-btn--text-white
		color: $color-white-medium

		md-icon
			color: $color-white-medium
	
	&.nu-btn--basic-light
		background-color: transparent
		border: 1px solid $color-basic-light
		color: $color-basic-light

	&.nu-btn--stroked
		background-color: transparent
		border: 1px solid rgba(0, 0, 0, 0.33)

		&.nu-btn--stroked-basic
			color: $color-basic-medium
			border-color: $color-basic-medium

			&.nu-btn--stroked-basic-selected
				background-color: $color-basic-dark
				border: 0
				color: $color-basic-lighter

		&.nu-btn--stroked-white
			color: $color-white-medium
			border-color: $color-white-medium
		
		&.nu-btn--stroked-cyan
			color: $color-cyan-dark
			border-color: $color-cyan-dark

		&.nu-btn--stroked-cyan
			color: $color-cyan-dark
			border-color: $color-cyan-dark

			&:hover 
				background-color: $color-cyan-dark
				color: $color-white-medium

		&.nu-btn--stroked-magenta-md
			color: $color-magenta-medium
			border-color: $color-magenta-medium

			&:hover
				background-color: $color-magenta-medium
				color: $color-white-medium
		
		&.nu-btn--stroked-magenta-dark
			color: $color-magenta-dark
			border-color: $color-magenta-dark

			&:hover
				background-color: $color-magenta-dark
				color: $color-white-medium

	&.nu-btn--sm
		font-size: $font-display-6
		font-weight: $weight-font-semi-bold
		height: 24px
		line-height: initial
		min-height: 24px
		min-width: 52px

	&.nu-btn--md
		font-size: $font-display-3
		font-weight: $weight-font-regular
		min-width: 52px

		.nu-button-icon
			margin-right: $spacing-small !important
			margin-top: 2px !important
			@include iconSizeGet(1.66)

	&.nu-btn--md-l
		line-height: 0
		max-height: 32px
		max-width: 98px
		min-height: 32px
		min-width: 98px

.md-button.md-fab.md-mini
	background-color: transparent
	border: 1px solid $color-basic-lighter

	&.md-focused
		background-color: transparent