$cadmin-btn-border-width: $cadmin-input-btn-border-width !default;
$cadmin-btn-border-radius: $cadmin-border-radius !default;
$cadmin-btn-box-shadow: null !default;

$cadmin-btn-cursor: $cadmin-link-cursor !default;
$cadmin-btn-font-family: $cadmin-input-btn-font-family !default;
$cadmin-btn-font-size: $cadmin-input-btn-font-size !default;
$cadmin-btn-font-weight: $cadmin-font-weight-semi-bold !default;
$cadmin-btn-line-height: $cadmin-input-btn-line-height !default;
$cadmin-btn-padding-x: 15px !default; // 15px
$cadmin-btn-padding-y: 7px !default; // 7px
$cadmin-btn-transition: $cadmin-component-transition !default;
$cadmin-btn-white-space: null !default;

$cadmin-btn-font-size-mobile: null !default;
$cadmin-btn-padding-x-mobile: null !default;
$cadmin-btn-padding-y-mobile: null !default;

$cadmin-btn-focus-width: $cadmin-input-btn-focus-width !default;
$cadmin-btn-focus-box-shadow: $cadmin-component-focus-box-shadow !default;

$cadmin-btn-active-box-shadow: null !default;

$cadmin-btn-disabled-cursor: $cadmin-disabled-cursor !default;
$cadmin-btn-disabled-opacity: $cadmin-component-disabled-opacity !default;

$cadmin-btn-inline-item-font-size: null !default;

$cadmin-btn-section-font-size: 11px !default; // 11px
$cadmin-btn-section-font-weight: $cadmin-font-weight-semi-bold !default;
$cadmin-btn-section-line-height: 1 !default;

$cadmin-btn: () !default;
$cadmin-btn: map-deep-merge(
	(
		background-color: transparent,
		border-color: transparent,
		border-style: solid,
		border-width: $cadmin-btn-border-width,
		border-radius: clay-enable-rounded($cadmin-btn-border-radius),
		box-shadow: clay-enable-shadows([$cadmin-btn-box-shadow]),
		color: $cadmin-body-color,
		cursor: $cadmin-btn-cursor,
		display: inline-block,
		font-family: $cadmin-btn-font-family,
		font-size: $cadmin-btn-font-size,
		font-weight: $cadmin-btn-font-weight,
		letter-spacing: inherit,
		line-height: $cadmin-btn-line-height,
		padding-bottom: $cadmin-btn-padding-y,
		padding-left: $cadmin-btn-padding-x,
		padding-right: $cadmin-btn-padding-x,
		padding-top: $cadmin-btn-padding-y,
		text-align: center,
		text-transform: none,
		transition: clay-enable-transitions($cadmin-btn-transition),
		user-select: none,
		vertical-align: middle,
		white-space: $cadmin-btn-white-space,

		mobile: (
			font-size: $cadmin-btn-font-size-mobile,
			padding-bottom: $cadmin-btn-padding-y-mobile,
			padding-left: $cadmin-btn-padding-x-mobile,
			padding-right: $cadmin-btn-padding-x-mobile,
			padding-top: $cadmin-btn-padding-y-mobile,
		),

		hover: (
			color: $cadmin-body-color,
			text-decoration: none,
		),

		focus: (
			box-shadow: $cadmin-btn-focus-box-shadow,
			outline: 0,
		),

		active: (
			box-shadow: clay-enable-shadows([$cadmin-btn-active-box-shadow]),
			focus: (
				box-shadow: c-unset,
			),
		),

		active-class: (
			box-shadow: clay-enable-shadows([$cadmin-btn-active-box-shadow]),
		),

		disabled: (
			cursor: $cadmin-btn-disabled-cursor,
			opacity: $cadmin-btn-disabled-opacity,

			focus: (
				box-shadow: none,
			),

			active: (
				pointer-events: none,
			),
		),

		inline-item: (
			font-size: $cadmin-btn-inline-item-font-size,
			line-height: 1,
			margin-top: -3px,

			lexicon-icon: (
				margin-top: 0,
			),
		),

		btn-section: (
			display: block,
			font-size: $cadmin-btn-section-font-size,
			font-weight: $cadmin-btn-section-font-weight,
			line-height: $cadmin-btn-section-line-height,
		),
	),
	$cadmin-btn
);

// Button Lg

$cadmin-btn-border-radius-lg: $cadmin-border-radius !default;
$cadmin-btn-font-size-lg: $cadmin-font-size-lg !default; // 18px
$cadmin-btn-line-height-lg: $cadmin-input-btn-line-height-lg !default;
$cadmin-btn-padding-x-lg: 24px !default; // 24px
$cadmin-btn-padding-y-lg: 9.5px !default; // 9.5px
$cadmin-btn-inline-item-font-size-lg: null !default; // 18px
$cadmin-btn-section-font-size-lg: 13px !default; // 13px

$cadmin-btn-font-size-lg-mobile: null !default;
$cadmin-btn-padding-x-lg-mobile: null !default;
$cadmin-btn-padding-y-lg-mobile: null !default;

$cadmin-btn-lg: () !default;
$cadmin-btn-lg: map-deep-merge(
	(
		border-radius: clay-enable-rounded($cadmin-btn-border-radius-lg),
		font-size: $cadmin-btn-font-size-lg,
		line-height: $cadmin-btn-line-height-lg,
		padding-bottom: $cadmin-btn-padding-y-lg,
		padding-left: $cadmin-btn-padding-x-lg,
		padding-right: $cadmin-btn-padding-x-lg,
		padding-top: $cadmin-btn-padding-y-lg,

		mobile: (
			font-size: $cadmin-btn-font-size-lg-mobile,
			padding-bottom: $cadmin-btn-padding-y-lg-mobile,
			padding-left: $cadmin-btn-padding-x-lg-mobile,
			padding-right: $cadmin-btn-padding-x-lg-mobile,
			padding-top: $cadmin-btn-padding-y-lg-mobile,
		),

		inline-item: (
			font-size: $cadmin-btn-inline-item-font-size-lg,
		),

		btn-section: (
			font-size: $cadmin-btn-section-font-size-lg,
		),

		lexicon-icon: (
			font-size: $cadmin-font-size-lg,
		),
	),
	$cadmin-btn-lg
);

// Button Sm

$cadmin-btn-border-radius-sm: $cadmin-border-radius-sm !default;
$cadmin-btn-font-size-sm: $cadmin-font-size-sm !default; // 14px
$cadmin-btn-line-height-sm: 1 !default;
$cadmin-btn-padding-x-sm: 12px !default; // 12px
$cadmin-btn-padding-y-sm: 7px !default; // 7px
$cadmin-btn-inline-item-font-size-sm: null !default;
$cadmin-btn-section-font-size-sm: 9px !default; // 9px

$cadmin-btn-font-size-sm-mobile: null !default;
$cadmin-btn-padding-x-sm-mobile: null !default;
$cadmin-btn-padding-y-sm-mobile: null !default;

$cadmin-btn-sm: () !default;
$cadmin-btn-sm: map-deep-merge(
	(
		border-radius: clay-enable-rounded($cadmin-btn-border-radius-sm),
		font-size: $cadmin-btn-font-size-sm,
		line-height: $cadmin-btn-line-height-sm,
		padding-bottom: $cadmin-btn-padding-y-sm,
		padding-left: $cadmin-btn-padding-x-sm,
		padding-right: $cadmin-btn-padding-x-sm,
		padding-top: $cadmin-btn-padding-y-sm,

		mobile: (
			font-size: $cadmin-btn-font-size-sm-mobile,
			padding-bottom: $cadmin-btn-padding-y-sm-mobile,
			padding-left: $cadmin-btn-padding-x-sm-mobile,
			padding-right: $cadmin-btn-padding-x-sm-mobile,
			padding-top: $cadmin-btn-padding-y-sm-mobile,
		),

		inline-item: (
			font-size: $cadmin-btn-inline-item-font-size-sm,
		),

		btn-section: (
			font-size: $cadmin-btn-section-font-size-sm,
		),
	),
	$cadmin-btn-sm
);

// Button Sizes

$cadmin-btn-sizes: () !default;
$cadmin-btn-sizes: map-deep-merge(
	(
		btn-xs: (
			font-size: 0.75rem,
			line-height: 1.5,
			padding-bottom: 0.125rem,
			padding-left: 0.5rem,
			padding-right: 0.5rem,
			padding-top: 0.125rem,

			inline-item: (
				font-size: inherit,
				margin-top: -0.16em,
			),

			inline-item-before: (
				margin-right: 0.25rem,
			),

			inline-item-after: (
				margin-left: 0.25rem,
			),

			btn-section: (
				font-size: 0.375rem,
			),

			lexicon-icon: (
				font-size: inherit,
			),
		),

		btn-lg: $cadmin-btn-lg,

		btn-sm: $cadmin-btn-sm,
	),
	$cadmin-btn-sizes
);

// Button Monospaced

$cadmin-btn-monospaced-padding-x: 0 !default;
$cadmin-btn-monospaced-padding-y: 0 !default;
$cadmin-btn-monospaced-size: 40px !default; // 40px

$cadmin-btn-monospaced-size-mobile: null !default;

$cadmin-btn-monospaced: () !default;
$cadmin-btn-monospaced: map-deep-merge(
	(
		align-items: center,
		display: inline-flex,
		flex-direction: column,
		height: $cadmin-btn-monospaced-size,
		justify-content: center,
		line-height: 1,
		overflow: hidden,
		padding-bottom: $cadmin-btn-monospaced-padding-y,
		padding-left: $cadmin-btn-monospaced-padding-x,
		padding-right: $cadmin-btn-monospaced-padding-x,
		padding-top: $cadmin-btn-monospaced-padding-y,
		text-align: center,
		white-space: normal,
		width: $cadmin-btn-monospaced-size,
		word-wrap: break-word,

		mobile: (
			height: $cadmin-btn-monospaced-size-mobile,
			width: $cadmin-btn-monospaced-size-mobile,
		),

		inline-item: (
			margin-top: 0,
		),

		lexicon-icon: (
			margin-top: 0,
		),

		c-inner: (
			align-items: center,
			display: flex,
			flex-direction: column,
			height: 100%,
			justify-content: center,
			padding: 0,
			width: 100%,
		),
	),
	$cadmin-btn-monospaced
);

// Button Monospaced Lg

$cadmin-btn-monospaced-padding-x-lg: null !default;
$cadmin-btn-monospaced-padding-y-lg: null !default;
$cadmin-btn-monospaced-size-lg: 48px !default; // 48px

$cadmin-btn-monospaced-size-lg-mobile: null !default;

$cadmin-btn-monospaced-lg: () !default;
$cadmin-btn-monospaced-lg: map-deep-merge(
	(
		font-size: map-get($cadmin-btn-lg, font-size),
		height: $cadmin-btn-monospaced-size-lg,
		padding-bottom: $cadmin-btn-monospaced-padding-y-lg,
		padding-left: $cadmin-btn-monospaced-padding-x-lg,
		padding-right: $cadmin-btn-monospaced-padding-x-lg,
		padding-top: $cadmin-btn-monospaced-padding-y-lg,
		width: $cadmin-btn-monospaced-size-lg,

		mobile: (
			height: $cadmin-btn-monospaced-size-lg-mobile,
			width: $cadmin-btn-monospaced-size-lg-mobile,
		),
	),
	$cadmin-btn-monospaced-lg
);

// Button Monospaced Sm

$cadmin-btn-monospaced-padding-x-sm: null !default;
$cadmin-btn-monospaced-padding-y-sm: null !default;
$cadmin-btn-monospaced-size-sm: 32px !default; // 32px

$cadmin-btn-monospaced-size-sm-mobile: null !default;

$cadmin-btn-monospaced-sm: () !default;
$cadmin-btn-monospaced-sm: map-deep-merge(
	(
		font-size: map-get($cadmin-btn-sm, font-size),
		height: $cadmin-btn-monospaced-size-sm,
		padding-bottom: $cadmin-btn-monospaced-padding-y-sm,
		padding-left: $cadmin-btn-monospaced-padding-x-sm,
		padding-right: $cadmin-btn-monospaced-padding-x-sm,
		padding-top: $cadmin-btn-monospaced-padding-y-sm,
		width: $cadmin-btn-monospaced-size-sm,

		mobile: (
			height: $cadmin-btn-monospaced-size-sm-mobile,
			width: $cadmin-btn-monospaced-size-sm-mobile,
		),
	),
	$cadmin-btn-monospaced-sm
);

// Button Monospaced Sizes

$cadmin-btn-monospaced-sizes: () !default;
$cadmin-btn-monospaced-sizes: map-deep-merge(
	(
		btn-monospaced-xs: (
			font-size: map-deep-get($cadmin-btn-sizes, btn-xs, font-size),
			height: 1.5rem,
			width: 1.4rem,

			lexicon-icon: (
				font-size: inherit,
			),
		),

		btn-monospaced: $cadmin-btn-monospaced,

		btn-monospaced-lg: $cadmin-btn-monospaced-lg,

		btn-monospaced-sm: $cadmin-btn-monospaced-sm,
	),
	$cadmin-btn-monospaced-sizes
);

// Button Block

$cadmin-btn-block-spacing-y: 8px !default;

// Button Unstyled

$cadmin-btn-unstyled: () !default;
$cadmin-btn-unstyled: map-deep-merge(
	(
		background-color: rgba(0, 0, 0, 0.001),
		border-width: 0,
		cursor: $cadmin-btn-cursor,
		font-size: inherit,
		font-weight: inherit,
		line-height: inherit,
		max-width: 100%,
		padding: 0,
		text-align: left,
		text-transform: inherit,
		vertical-align: baseline,

		c-inner: (
			margin: 0,
			max-width: none,
		),
	),
	$cadmin-btn-unstyled
);

// Button Group

$cadmin-btn-group-item-margin-right: 16px !default;

$cadmin-btn-group-spaced: () !default;
$cadmin-btn-group-spaced: map-merge(
	(
		align-items: center,
		column-gap: $cadmin-btn-group-item-margin-right,
		display: inline-flex,
		flex-wrap: wrap,
		position: relative,
	),
	$cadmin-btn-group-spaced
);

$cadmin-clay-btn-group-divider: () !default;
$cadmin-clay-btn-group-divider: map-deep-merge(
	(
		'&:not(:first-of-type)': (
			border-left-color: $cadmin-white,
		),

		'&:not(:last-of-type)': (
			border-right-color: $cadmin-white,
		),
	),
	$cadmin-clay-btn-group-divider
);

$cadmin-btn-group-palette: () !default;
$cadmin-btn-group-palette: map-deep-merge(
	(
		'> .btn-primary': (
			extend: '%clay-btn-group-divider',
		),

		'> .btn-info': (
			extend: '%clay-btn-group-divider',
		),

		'> .btn-success': (
			extend: '%clay-btn-group-divider',
		),

		'> .btn-warning': (
			extend: '%clay-btn-group-divider',
		),

		'> .btn-danger': (
			extend: '%clay-btn-group-divider',
		),

		'> .btn-dark': (
			extend: '%clay-btn-group-divider',
		),
	),
	$cadmin-btn-group-palette
);

// Button Toolbar

$cadmin-btn-toolbar-spacer-x: 8px !default; // 8px
$cadmin-btn-toolbar-spacer-y: 2px !default; // 2px

// Button Variants

$cadmin-btn-primary: () !default;
$cadmin-btn-primary: map-deep-merge(
	(
		background-color: $cadmin-primary,
		background-image: clay-enable-gradients($cadmin-primary),
		border-color: transparent,
		color: color-yiq($cadmin-primary),
		hover: (
			background-color: $cadmin-primary-d1,
			background-image: clay-enable-gradients($cadmin-primary-d1),
			border-color: transparent,
			color: color-yiq(clay-darken($cadmin-primary, 7.5%)),
		),

		focus: (
			background-color: $cadmin-primary-d1,
			background-image: clay-enable-gradients($cadmin-primary-d1),
			border-color: transparent,
			color: color-yiq(clay-darken($cadmin-primary, 7.5%)),
		),

		active: (
			background-color: $cadmin-primary-d2,
			background-image: clay-enable-gradients(none),
			border-color: transparent,
			color: color-yiq(clay-darken($cadmin-primary, 10%)),
		),

		disabled: (
			background-color: $cadmin-primary,
			background-image: clay-enable-gradients($cadmin-primary),
			border-color: transparent,
			color: color-yiq($cadmin-primary),
		),
	),
	$cadmin-btn-primary
);

$cadmin-btn-secondary: () !default;
$cadmin-btn-secondary: map-deep-merge(
	(
		background-color: $cadmin-white,
		background-image: clay-enable-gradients($cadmin-white),
		border-color: $cadmin-secondary-l2,
		color: $cadmin-secondary,

		hover: (
			background-color: $cadmin-gray-100,
			background-image: clay-enable-gradients($cadmin-gray-100),
			border-color: $cadmin-secondary-l2,
			color: $cadmin-gray-900,
		),

		focus: (
			background-color: $cadmin-gray-100,
			background-image: clay-enable-gradients($cadmin-gray-100),
			border-color: $cadmin-secondary-l2,
			color: $cadmin-gray-900,
		),

		active: (
			background-color: $cadmin-gray-200,
			background-image: clay-enable-gradients(none),
			border-color: $cadmin-secondary-l2,
			color: $cadmin-gray-900,
		),

		disabled: (
			background-color: $cadmin-white,
			background-image: clay-enable-gradients($cadmin-white),
			border-color: $cadmin-secondary-l2,
			color: $cadmin-secondary,
		),
	),
	$cadmin-btn-secondary
);

$cadmin-btn-success: () !default;
$cadmin-btn-success: map-deep-merge(
	(
		background-color: $cadmin-success,
		background-image: clay-enable-gradients($cadmin-success),
		border-color: transparent,
		color: color-yiq($cadmin-success),
		hover: (
			background-color: $cadmin-success-d1,
			background-image: clay-enable-gradients($cadmin-success-d1),
			border-color: transparent,
			color: color-yiq(clay-darken($cadmin-success, 7.5%)),
		),

		focus: (
			background-color: $cadmin-success-d1,
			background-image: clay-enable-gradients($cadmin-success-d1),
			border-color: transparent,
			color: color-yiq(clay-darken($cadmin-success, 7.5%)),
		),

		active: (
			background-color: $cadmin-success-d2,
			background-image: clay-enable-gradients(none),
			border-color: transparent,
			color: color-yiq(clay-darken($cadmin-success, 10%)),
		),

		disabled: (
			background-color: $cadmin-success,
			background-image: clay-enable-gradients($cadmin-success),
			border-color: transparent,
			color: color-yiq($cadmin-success),
		),
	),
	$cadmin-btn-success
);

$cadmin-btn-info: () !default;
$cadmin-btn-info: map-deep-merge(
	(
		background-color: $cadmin-info,
		background-image: clay-enable-gradients($cadmin-info),
		border-color: transparent,
		color: color-yiq($cadmin-info),
		hover: (
			background-color: $cadmin-info-d1,
			background-image: clay-enable-gradients($cadmin-info-d1),
			border-color: transparent,
			color: color-yiq(clay-darken($cadmin-info, 7.5%)),
		),

		focus: (
			background-color: $cadmin-info-d1,
			background-image: clay-enable-gradients($cadmin-info-d1),
			border-color: transparent,
			color: color-yiq(clay-darken($cadmin-info, 7.5%)),
		),

		active: (
			background-color: $cadmin-info-d2,
			background-image: clay-enable-gradients(none),
			border-color: transparent,
			color: color-yiq(clay-darken($cadmin-info, 10%)),
		),

		disabled: (
			background-color: $cadmin-info,
			background-image: clay-enable-gradients($cadmin-info),
			border-color: transparent,
			color: color-yiq($cadmin-info),
		),
	),
	$cadmin-btn-info
);

$cadmin-btn-warning: () !default;
$cadmin-btn-warning: map-deep-merge(
	(
		background-color: $cadmin-warning,
		background-image: clay-enable-gradients($cadmin-warning),
		border-color: transparent,
		color: color-yiq($cadmin-warning),
		hover: (
			background-color: $cadmin-warning-d1,
			background-image: clay-enable-gradients($cadmin-warning-d1),
			border-color: transparent,
			color: color-yiq(clay-darken($cadmin-warning, 7.5%)),
		),

		focus: (
			background-color: $cadmin-warning-d1,
			background-image: clay-enable-gradients($cadmin-warning-d1),
			border-color: transparent,
			color: color-yiq(clay-darken($cadmin-warning, 7.5%)),
		),

		active: (
			background-color: $cadmin-warning-d2,
			background-image:
				clay-enable-gradients(clay-darken($cadmin-warning, 10%)),
			border-color: transparent,
			color: color-yiq(clay-darken($cadmin-warning, 10%)),
		),

		disabled: (
			background-color: $cadmin-warning,
			background-image: clay-enable-gradients($cadmin-warning),
			border-color: transparent,
			color: color-yiq($cadmin-warning),
		),
	),
	$cadmin-btn-warning
);

$cadmin-btn-danger: () !default;
$cadmin-btn-danger: map-deep-merge(
	(
		background-color: $cadmin-danger,
		background-image: clay-enable-gradients($cadmin-danger),
		border-color: transparent,
		color: color-yiq($cadmin-danger),
		hover: (
			background-color: $cadmin-danger-d1,
			background-image: clay-enable-gradients($cadmin-danger-d1),
			border-color: transparent,
			color: color-yiq(clay-darken($cadmin-danger, 7.5%)),
		),

		focus: (
			background-color: $cadmin-danger-d1,
			background-image: clay-enable-gradients($cadmin-danger-d1),
			border-color: transparent,
			color: color-yiq(clay-darken($cadmin-danger, 7.5%)),
		),

		active: (
			background-color: $cadmin-danger-d2,
			background-image: clay-enable-gradients(none),
			border-color: transparent,
			color: color-yiq(clay-darken($cadmin-danger, 10%)),
		),

		disabled: (
			background-color: $cadmin-danger,
			background-image: clay-enable-gradients(none),
			border-color: transparent,
			color: color-yiq($cadmin-danger),
		),
	),
	$cadmin-btn-danger
);

$cadmin-btn-light: () !default;
$cadmin-btn-light: map-deep-merge(
	(
		background-color: $cadmin-light,
		background-image: clay-enable-gradients($cadmin-light),
		border-color: transparent,
		color: $cadmin-gray-900,

		hover: (
			background-color: $cadmin-light-d1,
			background-image: clay-enable-gradients($cadmin-light-d1),
			border-color: transparent,
			color: color-yiq(clay-darken($cadmin-light, 7.5%)),
		),

		focus: (
			background-color: $cadmin-light-d1,
			background-image: clay-enable-gradients($cadmin-light-d1),
			border-color: transparent,
			color: color-yiq(clay-darken($cadmin-light, 7.5%)),
		),

		active: (
			background-color: $cadmin-light-d2,
			background-image: clay-enable-gradients(none),
			border-color: transparent,
			color: color-yiq(clay-darken($cadmin-light, 10%)),
		),

		disabled: (
			background-color: $cadmin-light,
			background-image: clay-enable-gradients($cadmin-light),
			border-color: transparent,
			color: color-yiq($cadmin-light),
		),
	),
	$cadmin-btn-light
);

$cadmin-btn-dark: () !default;
$cadmin-btn-dark: map-deep-merge(
	(
		background-color: $cadmin-dark,
		background-image: clay-enable-gradients($cadmin-dark),
		border-color: transparent,
		color: color-yiq($cadmin-dark),
		hover: (
			background-color: $cadmin-dark-d1,
			background-image: clay-enable-gradients($cadmin-dark-d1),
			border-color: transparent,
			color: color-yiq(clay-darken($cadmin-dark, 7.5%)),
		),

		focus: (
			background-color: $cadmin-dark-d1,
			background-image: clay-enable-gradients($cadmin-dark-d1),
			border-color: transparent,
			color: color-yiq(clay-darken($cadmin-dark, 7.5%)),
		),

		active: (
			background-color: $cadmin-dark-d2,
			background-image: clay-enable-gradients(none),
			border-color: transparent,
			color: color-yiq(clay-darken($cadmin-dark, 10%)),
		),

		disabled: (
			background-color: $cadmin-dark,
			background-image: clay-enable-gradients($cadmin-dark),
			border-color: transparent,
			color: color-yiq($cadmin-dark),
		),
	),
	$cadmin-btn-dark
);

$cadmin-btn-link-disabled-color: $cadmin-link-color !default;

$cadmin-btn-link: () !default;
$cadmin-btn-link: map-deep-merge(
	(
		border-radius: 1px,
		box-shadow: clay-enable-shadows([none]),
		color: $cadmin-link-color,
		font-weight: $cadmin-font-weight-normal,
		text-decoration: $cadmin-link-decoration,

		hover: (
			color: $cadmin-link-hover-color,
			text-decoration: $cadmin-link-hover-decoration,
		),

		focus: (
			box-shadow: $cadmin-btn-focus-box-shadow,
			text-decoration: $cadmin-link-decoration,
		),

		active: (
			box-shadow: clay-enable-shadows([none]),
		),

		disabled: (
			box-shadow: none,
			color: $cadmin-btn-link-disabled-color,
			text-decoration: none,
		),
	),
	$cadmin-btn-link
);

$cadmin-btn-palette: () !default;
$cadmin-btn-palette: map-deep-merge(
	(
		primary: $cadmin-btn-primary,

		secondary: $cadmin-btn-secondary,

		success: $cadmin-btn-success,

		info: $cadmin-btn-info,

		warning: $cadmin-btn-warning,

		danger: $cadmin-btn-danger,

		light: $cadmin-btn-light,

		dark: $cadmin-btn-dark,

		link: $cadmin-btn-link,

		btn-beta: (
			background-color: $cadmin-light-l1,
			color: $cadmin-info-d1,
			text-transform: uppercase,

			hover: (
				background-color: $cadmin-light,
				color: $cadmin-info-d1,
			),

			focus: (
				background-color: $cadmin-light,
				color: $cadmin-info-d1,
			),
		),

		'.btn-translucent': (
			extend: '%clay-btn-xs',
			border-radius: clay-enable-rounded($cadmin-rounded-pill),
		),

		'.btn-translucent.btn-primary': (
			background-color: rgba($cadmin-primary-d1, 0.04),
			border-color: transparent,
			color: $cadmin-primary-d1,

			hover: (
				background-color: rgba($cadmin-primary-d1, 0.06),
				color: $cadmin-primary-d1,
			),

			focus: (
				background-color: rgba($cadmin-primary-d1, 0.06),
				color: $cadmin-primary-d1,
			),

			active: (
				background-color: rgba($cadmin-primary-d1, 0.08),
				color: $cadmin-primary-d1,
			),
		),

		'.btn-translucent.btn-info, .btn-beta': (
			background-color: rgba($cadmin-info-d1, 0.04),
			border-color: transparent,
			color: $cadmin-info-d1,

			hover: (
				background-color: rgba($cadmin-info-d1, 0.06),
				color: $cadmin-info-d1,
			),

			focus: (
				background-color: rgba($cadmin-info-d1, 0.06),
				color: $cadmin-info-d1,
			),

			active: (
				background-color: rgba($cadmin-info-d1, 0.08),
				color: $cadmin-info-d1,
			),
		),

		'.btn-translucent.btn-success': (
			background-color: rgba($cadmin-success-d1, 0.04),
			border-color: transparent,
			color: $cadmin-success-d1,

			hover: (
				background-color: rgba($cadmin-success-d1, 0.06),
				color: $cadmin-success-d1,
			),

			focus: (
				background-color: rgba($cadmin-success-d1, 0.06),
				color: $cadmin-success-d1,
			),

			active: (
				background-color: rgba($cadmin-success-d1, 0.08),
				color: $cadmin-success-d1,
			),
		),

		'.btn-translucent.btn-warning': (
			background-color: rgba($cadmin-warning-d1, 0.04),
			border-color: transparent,
			color: $cadmin-warning-d1,

			hover: (
				background-color: rgba($cadmin-warning-d1, 0.06),
				color: $cadmin-warning-d1,
			),

			focus: (
				background-color: rgba($cadmin-warning-d1, 0.06),
				color: $cadmin-warning-d1,
			),

			active: (
				background-color: rgba($cadmin-warning-d1, 0.08),
				color: $cadmin-warning-d1,
			),
		),

		'.btn-translucent.btn-danger': (
			background-color: rgba($cadmin-danger-d1, 0.04),
			border-color: transparent,
			color: $cadmin-danger-d1,

			hover: (
				background-color: rgba($cadmin-danger-d1, 0.06),
				color: $cadmin-danger-d1,
			),

			focus: (
				background-color: rgba($cadmin-danger-d1, 0.06),
				color: $cadmin-danger-d1,
			),

			active: (
				background-color: rgba($cadmin-danger-d1, 0.08),
				color: $cadmin-danger-d1,
			),
		),

		'%clay-dark-btn-translucent-primary': (
			background-color: rgba($cadmin-primary-l2, 0.04),
			border-color: transparent,
			color: $cadmin-primary-l1,

			hover: (
				background-color: rgba($cadmin-primary-l2, 0.06),
				color: $cadmin-primary-l1,
			),

			focus: (
				background-color: rgba($cadmin-primary-l2, 0.06),
				color: $cadmin-primary-l1,
			),

			active: (
				background-color: rgba($cadmin-primary-l2, 0.08),
				color: $cadmin-primary-l1,
			),
		),

		'.clay-dark .btn-translucent.btn-primary': (
			extend: '%clay-dark-btn-translucent-primary',
		),

		'.clay-dark.btn-translucent.btn-primary': (
			extend: '%clay-dark-btn-translucent-primary',
		),

		'%clay-dark-btn-translucent-info': (
			background-color: rgba($cadmin-info-l2, 0.04),
			border-color: transparent,
			color: $cadmin-info-l1,

			hover: (
				background-color: rgba($cadmin-info-l2, 0.06),
				color: $cadmin-info-l1,
			),

			focus: (
				background-color: rgba($cadmin-info-l2, 0.06),
				color: $cadmin-info-l1,
			),

			active: (
				background-color: rgba($cadmin-info-l2, 0.08),
				color: $cadmin-info-l1,
			),
		),

		'.clay-dark .btn-translucent.btn-info, .btn-beta-dark': (
			extend: '%clay-dark-btn-translucent-info',
		),

		'.clay-dark.btn-translucent.btn-info': (
			extend: '%clay-dark-btn-translucent-info',
		),

		'%clay-dark-btn-translucent-success': (
			background-color: rgba($cadmin-success-l2, 0.04),
			border-color: transparent,
			color: $cadmin-success-l1,

			hover: (
				background-color: rgba($cadmin-success-l2, 0.06),
				color: $cadmin-success-l1,
			),

			focus: (
				background-color: rgba($cadmin-success-l2, 0.06),
				color: $cadmin-success-l1,
			),

			active: (
				background-color: rgba($cadmin-success-l2, 0.08),
				color: $cadmin-success-l1,
			),
		),

		'.clay-dark .btn-translucent.btn-success': (
			extend: '%clay-dark-btn-translucent-success',
		),

		'.clay-dark.btn-translucent.btn-success': (
			extend: '%clay-dark-btn-translucent-success',
		),

		'%clay-dark-btn-translucent-warning': (
			background-color: rgba($cadmin-warning-l2, 0.04),
			border-color: transparent,
			color: $cadmin-warning-l1,

			hover: (
				background-color: rgba($cadmin-warning-l2, 0.06),
				color: $cadmin-warning-l1,
			),

			focus: (
				background-color: rgba($cadmin-warning-l2, 0.06),
				color: $cadmin-warning-l1,
			),

			active: (
				background-color: rgba($cadmin-warning-l2, 0.08),
				color: $cadmin-warning-l1,
			),
		),

		'.clay-dark .btn-translucent.btn-warning': (
			extend: '%clay-dark-btn-translucent-warning',
		),

		'.clay-dark.btn-translucent.btn-warning': (
			extend: '%clay-dark-btn-translucent-warning',
		),

		'%clay-dark-btn-translucent-danger': (
			background-color: rgba($cadmin-danger-l2, 0.04),
			border-color: transparent,
			color: $cadmin-danger-l1,

			hover: (
				background-color: rgba($cadmin-danger-l2, 0.06),
				color: $cadmin-danger-l1,
			),

			focus: (
				background-color: rgba($cadmin-danger-l2, 0.06),
				color: $cadmin-danger-l1,
			),

			active: (
				background-color: rgba($cadmin-danger-l2, 0.08),
				color: $cadmin-danger-l1,
			),
		),

		'.clay-dark .btn-translucent.btn-danger': (
			extend: '%clay-dark-btn-translucent-danger',
		),

		'.clay-dark.btn-translucent.btn-danger': (
			extend: '%clay-dark-btn-translucent-danger',
		),
	),
	$cadmin-btn-palette
);

// Button Outline Variants

$cadmin-btn-outline-primary: () !default;
$cadmin-btn-outline-primary: map-deep-merge(
	(
		border-color: $cadmin-primary,
		color: $cadmin-primary,

		hover: (
			background-color: rgba($cadmin-primary, 0.06),
			border-color: $cadmin-primary,
			color: $cadmin-primary-d1,
		),

		focus: (
			background-color: rgba($cadmin-primary, 0.06),
			box-shadow: map-get($cadmin-btn-primary, focus-box-shadow),
			color: $cadmin-primary-d1,
		),

		active: (
			background-color: rgba($cadmin-primary, 0.12),
			border-color: $cadmin-primary,
			color: $cadmin-primary-d1,
		),

		disabled: (
			background-color: transparent,
			border-color: map-get($cadmin-btn-primary, bg),
			color: map-get($cadmin-btn-primary, bg),
		),
	),
	$cadmin-btn-outline-primary
);

$cadmin-btn-outline-secondary: () !default;
$cadmin-btn-outline-secondary: map-deep-merge(
	(
		border-color: $cadmin-secondary-l2,
		color: $cadmin-secondary,

		hover: (
			background-color: rgba($cadmin-gray-900, 0.06),
			border-color: transparent,
			color: map-get(map-get($cadmin-btn-secondary, hover), color),
		),

		focus: (
			background-color: rgba($cadmin-gray-900, 0.06),
			border-color: transparent,
			box-shadow:
				map-get(map-get($cadmin-btn-secondary, focus), box-shadow),
			color: map-get(map-get($cadmin-btn-secondary, focus), color),
		),

		active: (
			background-color: rgba($cadmin-gray-900, 0.12),
			border-color: transparent,
			color: map-get(map-get($cadmin-btn-secondary, active), color),
		),

		disabled: (
			background-color: transparent,
			border-color: $cadmin-secondary,
			color: $cadmin-secondary,
		),
	),
	$cadmin-btn-outline-secondary
);

$cadmin-btn-outline-success: () !default;
$cadmin-btn-outline-success: map-deep-merge(
	(
		border-color: $cadmin-success,
		color: $cadmin-success,

		hover: (
			background-color:
				map-get(map-get($cadmin-btn-success, hover), background-color),
			border-color: $cadmin-success,
			color: color-yiq($cadmin-success),
		),

		focus: (
			background-color:
				map-get(map-get($cadmin-btn-success, hover), background-color),
			color: $cadmin-white,
		),

		active: (
			background-color:
				map-get(map-get($cadmin-btn-success, active), background-color),
			border-color: $cadmin-success,
			color: color-yiq($cadmin-success),
		),

		disabled: (
			background-color: transparent,
			border-color: map-get($cadmin-btn-success, background-color),
			color: map-get($cadmin-btn-success, background-color),
		),
	),
	$cadmin-btn-outline-success
);

$cadmin-btn-outline-info: () !default;
$cadmin-btn-outline-info: map-deep-merge(
	(
		border-color: $cadmin-info,
		color: $cadmin-info,

		hover: (
			background-color:
				map-get(map-get($cadmin-btn-info, hover), background-color),
			border-color: $cadmin-info,
			color: color-yiq($cadmin-info),
		),

		focus: (
			background-color:
				map-get(map-get($cadmin-btn-info, hover), background-color),
			box-shadow: map-get(map-get($cadmin-btn-info, focus), box-shadow),
			color: $cadmin-white,
		),

		active: (
			background-color:
				map-get(map-get($cadmin-btn-info, active), background-color),
			border-color: $cadmin-info,
			box-shadow: map-get(map-get($cadmin-btn-info, active), box-shadow),
			color: color-yiq($cadmin-info),
		),

		disabled: (
			background-color: transparent,
			border-color: map-get($cadmin-btn-info, background-color),
			color: map-get($cadmin-btn-info, background-color),
		),
	),
	$cadmin-btn-outline-info
);

$cadmin-btn-outline-warning: () !default;
$cadmin-btn-outline-warning: map-deep-merge(
	(
		border-color: $cadmin-warning,
		color: $cadmin-warning,

		hover: (
			background-color:
				map-get(map-get($cadmin-btn-warning, hover), background-color),
			border-color: $cadmin-warning,
			color: color-yiq($cadmin-warning),
		),

		focus: (
			background-color:
				map-get(map-get($cadmin-btn-warning, hover), background-color),
			box-shadow: map-get(map-get($cadmin-btn-warning, focus), box-shadow),
			color: $cadmin-white,
		),

		active: (
			background-color:
				map-get(map-get($cadmin-btn-warning, active), background-color),
			border-color: $cadmin-warning,
			box-shadow:
				map-get(map-get($cadmin-btn-warning, active), box-shadow),
			color: color-yiq($cadmin-warning),
		),

		disabled: (
			background-color: transparent,
			border-color: map-get($cadmin-btn-warning, background-color),
			color: map-get($cadmin-btn-warning, background-color),
		),
	),
	$cadmin-btn-outline-warning
);

$cadmin-btn-outline-danger: () !default;
$cadmin-btn-outline-danger: map-deep-merge(
	(
		border-color: $cadmin-danger,
		color: $cadmin-danger,

		hover: (
			background-color:
				map-get(map-get($cadmin-btn-danger, hover), background-color),
			border-color: $cadmin-danger,
			color: color-yiq($cadmin-danger),
		),

		focus: (
			background-color:
				map-get(map-get($cadmin-btn-danger, hover), background-color),
			box-shadow: map-get(map-get($cadmin-btn-danger, focus), box-shadow),
			color: $cadmin-white,
		),

		active: (
			background-color:
				map-get(map-get($cadmin-btn-danger, active), background-color),
			border-color: $cadmin-danger,
			color: color-yiq($cadmin-danger),
		),

		disabled: (
			background-color: transparent,
			border-color: map-get($cadmin-btn-danger, background-color),
			color: map-get($cadmin-btn-danger, background-color),
		),
	),
	$cadmin-btn-outline-danger
);

$cadmin-btn-outline-light: () !default;
$cadmin-btn-outline-light: map-deep-merge(
	(
		border-color: $cadmin-light,
		color: $cadmin-light,

		hover: (
			background-color:
				map-get(map-get($cadmin-btn-light, hover), background-color),
			border-color: $cadmin-light,
			color: color-yiq($cadmin-light),
		),

		focus: (
			background-color:
				map-get(map-get($cadmin-btn-light, hover), background-color),
			box-shadow: map-get(map-get($cadmin-btn-light, focus), box-shadow),
			color: $cadmin-gray-900,
		),

		active: (
			background-color:
				map-get(map-get($cadmin-btn-light, active), background-color),
			border-color: $cadmin-light,
			box-shadow: map-get(map-get($cadmin-btn-light, active), box-shadow),
			color: color-yiq($cadmin-light),
			focus: (
				box-shadow:
					clay-enable-shadows(
						[ $cadmin-btn-active-box-shadow#{','} 0 0 0 $cadmin-btn-focus-width
							rgba($cadmin-light, 0.5),
						0 0 0 $cadmin-btn-focus-width rgba($cadmin-light, 0.5)]
					),
			),
		),

		disabled: (
			background-color: transparent,
			border-color: map-get($cadmin-btn-light, background-color),
			color: map-get($cadmin-btn-light, background-color),
		),
	),
	$cadmin-btn-outline-light
);

$cadmin-btn-outline-dark: () !default;
$cadmin-btn-outline-dark: map-deep-merge(
	(
		border-color: $cadmin-dark,
		color: $cadmin-dark,

		hover: (
			background-color:
				map-get(map-get($cadmin-btn-dark, hover), background-color),
			border-color: $cadmin-dark,
			color: color-yiq($cadmin-dark),
		),

		focus: (
			background-color:
				map-get(map-get($cadmin-btn-dark, hover), background-color),
			box-shadow: map-get(map-get($cadmin-btn-dark, focus), box-shadow),
			color: $cadmin-white,
		),

		active: (
			background-color:
				map-get(map-get($cadmin-btn-dark, active), background-color),
			border-color: $cadmin-dark,
			box-shadow: map-get(map-get($cadmin-btn-dark, active), box-shadow),
			color: color-yiq($cadmin-dark),
			focus: (
				box-shadow:
					if(
						$cadmin-enable-shadows and $cadmin-btn-active-box-shadow
							!= none,
						$cadmin-btn-active-box-shadow#{','} 0 0 0 $cadmin-btn-focus-width
							rgba($cadmin-dark, 0.5),
						0 0 0 $cadmin-btn-focus-width rgba($cadmin-dark, 0.5)
					),
			),
		),

		disabled: (
			background-color: transparent,
			border-color: map-get($cadmin-btn-dark, background-color),
			color: map-get($cadmin-btn-dark, background-color),
		),
	),
	$cadmin-btn-outline-dark
);

$cadmin-btn-outline-borderless: () !default;
$cadmin-btn-outline-borderless: map-deep-merge(
	(
		border-color: transparent,

		hover: (
			border-color: transparent,
		),

		focus: (
			border-color: transparent,
		),

		disabled: (
			border-color: transparent,
		),
	),
	$cadmin-btn-outline-borderless
);

$cadmin-btn-outline-palette: () !default;
$cadmin-btn-outline-palette: map-deep-merge(
	(
		primary: $cadmin-btn-outline-primary,

		secondary: $cadmin-btn-outline-secondary,

		success: $cadmin-btn-outline-success,

		info: $cadmin-btn-outline-info,

		warning: $cadmin-btn-outline-warning,

		danger: $cadmin-btn-outline-danger,

		light: $cadmin-btn-outline-light,

		dark: $cadmin-btn-outline-dark,

		'%clay-dark-btn-outline-primary': (
			background-color: transparent,
			color: $cadmin-primary-l1,

			hover: (
				background-color: rgba($cadmin-primary-l1, 0.06),
				color: $cadmin-primary-l2,
			),

			focus: (
				background-color: rgba($cadmin-primary-l1, 0.06),
				color: $cadmin-primary-l2,
			),

			active: (
				background-color: rgba($cadmin-primary-l1, 0.12),
				color: $cadmin-primary-l2,
			),

			disabled: (
				background-color: transparent,
				color: $cadmin-primary-l1,
			),
		),

		'.clay-dark .btn-outline-primary, .clay-dark.btn-outline-primary': (
			extend: '%clay-dark-btn-outline-primary',
		),

		'%clay-dark-btn-outline-secondary': (
			background-color: transparent,
			color: $cadmin-secondary-l1,

			hover: (
				background-color: rgba($cadmin-white, 0.06),
				color: $cadmin-white,
			),

			focus: (
				background-color: rgba($cadmin-white, 0.06),
				color: $cadmin-white,
			),

			active: (
				background-color: rgba($cadmin-white, 0.12),
				color: $cadmin-white,
			),

			disabled: (
				background-color: transparent,
				color: $cadmin-secondary-l1,
			),
		),

		'.clay-dark .btn-outline-secondary, .clay-dark.btn-outline-secondary': (
			extend: '%clay-dark-btn-outline-secondary',
		),
	),
	$cadmin-btn-outline-palette
);