////
/// @group Links
////

$c-link: () !default;
$c-link: map-deep-merge(
	(
		text-decoration: none,
		transition: clay-enable-transitions(box-shadow 0.15s ease-in-out),
		hover: (
			text-decoration: none,
		),
		focus: (
			border-radius: 1px,
			box-shadow: $component-focus-box-shadow,
			outline: 0,
		),
		c-link-variants: (
			text-secondary: (
				color: $gray-900 !important,
				hover: (
					color: $black !important,
				),
				focus: (
					color: $black !important,
				),
			),
			text-tertiary: (
				color: $gray-900 !important,
				hover: (
					color: $black !important,
					text-decoration: underline,
				),
			),
		),
	),
	$c-link
);

$component-link: () !default;
$component-link: map-deep-merge(
	(
		color: $gray-600,
		hover: (
			color: clay-darken($gray-600, 15%),
		),
	),
	$component-link
);

$link-primary: () !default;
$link-primary: map-deep-merge(
	(
		color: $primary,
		hover: (
			color: clay-darken($primary, 15%),
		),
	),
	$link-primary
);

$link-secondary: () !default;
$link-secondary: map-deep-merge(
	(
		color: $secondary,
		hover: (
			color: clay-darken($secondary, 15%),
		),
	),
	$link-secondary
);

$single-link-font-weight: $font-weight-semi-bold !default;

// Link Outline

/// @deprecated as of v3.4.0 use the Sass map `$link-outline` instead

$link-outline-border-radius: if(
	variable-exists(btn-border-radius),
	$btn-border-radius,
	$border-radius
) !default;

/// @deprecated as of v3.4.0 use the Sass map `$link-outline` instead

$link-outline-border-width: if(
	variable-exists(btn-border-width),
	$btn-border-width,
	$border-width
) !default;

/// @deprecated as of v3.4.0 use the Sass map `$link-outline` instead

$link-outline-font-size: if(
	variable-exists(btn-font-size-sm),
	$btn-font-size-sm,
	$font-size-sm
) !default;

/// @deprecated as of v3.4.0 use the Sass map `$link-outline` instead

$link-outline-font-weight: $font-weight-semi-bold !default;

/// @deprecated as of v3.4.0 use the Sass map `$link-outline` instead

$link-outline-line-height: if(
	variable-exists(btn-line-height-sm),
	$btn-line-height-sm,
	$line-height-sm
) !default;

/// @deprecated as of v3.4.0 use the Sass map `$link-outline` instead

$link-outline-padding-x: if(
	variable-exists(btn-padding-x-sm),
	$btn-padding-x-sm,
	0.5rem
) !default;

/// @deprecated as of v3.4.0 use the Sass map `$link-outline` instead

$link-outline-padding-y: if(
	variable-exists(btn-padding-x-sm),
	$btn-padding-y-sm,
	0.25rem
) !default;

/// @deprecated as of v3.4.0 use the Sass map `$link-outline` instead

$link-outline-transition: $component-transition !default;

$link-outline: () !default;
$link-outline: map-deep-merge(
	(
		align-items: center,
		background-color: transparent,
		border-color: transparent,
		border-radius: $link-outline-border-radius,
		border-style: solid,
		border-width: $link-outline-border-width,
		display: inline-flex,
		font-size: $link-outline-font-size,
		font-weight: $link-outline-font-weight,
		justify-content: center,
		line-height: $link-outline-line-height,
		padding-bottom: $link-outline-padding-y,
		padding-left: $link-outline-padding-x,
		padding-right: $link-outline-padding-x,
		padding-top: $link-outline-padding-y,
		transition: $link-outline-transition,
		vertical-align: middle,
		hover: (
			text-decoration: none,
		),
		focus: (
			box-shadow: $component-focus-box-shadow,
			outline: 0,
		),
		disabled: (
			box-shadow: none,
			active: (
				pointer-events: none,
			),
		),
		lexicon-icon: (
			margin-top: 0,
		),
	),
	$link-outline
);

$link-outline-primary: () !default;
$link-outline-primary: map-deep-merge(
	(
		border-color: $primary,
		color: $primary,
		hover: (
			background-color: $primary,
			color: $white,
		),
		active: (
			background-color: $primary,
			color: $white,
		),
		disabled: (
			background-color: transparent,
			color: $primary,
			cursor: $disabled-cursor,
			opacity: $component-disabled-opacity,
		),
	),
	$link-outline-primary
);

$link-outline-secondary: () !default;
$link-outline-secondary: map-deep-merge(
	(
		border-color: $secondary,
		color: $secondary,
		hover: (
			background-color: $secondary,
			color: $white,
		),
		active: (
			background-color: $secondary,
			color: $white,
		),
		disabled: (
			background-color: transparent,
			color: $secondary,
			cursor: $disabled-cursor,
			opacity: $component-disabled-opacity,
		),
	),
	$link-outline-secondary
);

// Link Monospaced

/// @deprecated as of v3.4.0 use the Sass map `$link-monospaced` instead

$link-monospaced-size: if(
	variable-exists(btn-monospaced-size-sm),
	$btn-monospaced-size-sm,
	1.9375rem
) !default;

$link-monospaced: () !default;
$link-monospaced: map-deep-merge(
	(
		align-items: center,
		display: inline-flex,
		height: $link-monospaced-size,
		justify-content: center,
		overflow: hidden,
		padding-bottom: 0,
		padding-left: 0,
		padding-right: 0,
		padding-top: 0,
		vertical-align: middle,
		width: $link-monospaced-size,
		lexicon-icon: (
			margin-top: 0,
		),
	),
	$link-monospaced
);

// .component-title

$component-title: () !default;
$component-title: map-deep-merge(
	(
		color: $gray-900,
		font-size: 1.125rem,
		font-weight: $headings-font-weight,
		line-height: $headings-line-height,
		margin-bottom:
			calc(
				(
						#{if(
								variable-exists(dropdown-action-toggle-size),
								$dropdown-action-toggle-size,
								1.9375rem
							)} - (1em * #{$headings-line-height})
					) / 2
			),
		margin-top:
			calc(
				(
						#{if(
								variable-exists(dropdown-action-toggle-size),
								$dropdown-action-toggle-size,
								1.9375rem
							)} - (1em * #{$headings-line-height})
					) / 2
			),
	),
	$component-title
);

$component-title-link: () !default;
$component-title-link: map-deep-merge(
	(
		color: $gray-900,
		hover: (
			color: clay-darken($gray-900, 15%),
		),
	),
	$component-title-link
);

$component-title: map-deep-merge(
	$component-title,
	(
		href: $component-title-link,
	)
);

// .component-subtitle

$component-subtitle: () !default;
$component-subtitle: map-deep-merge(
	(
		color: $gray-600,
		margin-bottom: 0,
	),
	$component-subtitle
);

$component-subtitle-link: () !default;
$component-subtitle-link: map-deep-merge(
	(
		color: $gray-600,
		hover: (
			color: clay-darken($gray-600, 15%),
		),
	),
	$component-subtitle-link
);

$component-subtitle: map-deep-merge(
	$component-subtitle,
	(
		href: $component-subtitle-link,
	)
);

// .component-action

$component-action: () !default;
$component-action: map-deep-merge(
	(
		align-items: center,
		background-color: transparent,
		border-color: transparent,
		border-radius: $border-radius,
		border-width: 0px,
		color: $secondary,
		display: inline-flex,
		height: map-get($link-monospaced, height),
		justify-content: center,
		overflow: hidden,
		padding: 0,
		transition: $component-transition,
		vertical-align: middle,
		width: map-get($link-monospaced, width),
		hover: (
			background-color: $secondary,
			color: $white,
		),
		focus: (
			box-shadow: $component-focus-box-shadow,
			outline: 0,
		),
		active: (
			background-color: $secondary,
			color: $white,
		),
		disabled: (
			background-color: transparent,
			box-shadow: none,
			color: $secondary,
			cursor: $disabled-cursor,
			opacity: $component-disabled-opacity,
			active: (
				pointer-events: none,
			),
		),
		lexicon-icon: (
			margin-top: 0,
		),
	),
	$component-action
);

// .component-text

$component-text: () !default;

// .component-icon

$component-icon: () !default;
$component-icon: map-deep-merge(
	(
		align-items: center,
		display: inline-flex,
		height: 32px,
		justify-content: center,
		width: 32px,
		lexicon-icon: (
			margin-top: 0,
		),
	),
	$component-icon
);