.btn {
	font-size: $btn-font-size;

	@include clay-scale-component {
		font-size: $btn-font-size-mobile;
		padding-bottom: $btn-padding-y-mobile;
		padding-left: $btn-padding-x-mobile;
		padding-right: $btn-padding-x-mobile;
		padding-top: $btn-padding-y-mobile;
	}

	&:not(:disabled):not(.disabled) {
		cursor: $btn-cursor;
	}

	&.disabled,
	&:disabled {
		cursor: $btn-disabled-cursor;
	}
}

.btn .inline-item {
	font-size: $btn-inline-item-font-size;
}

.btn-section {
	display: block;
	font-size: $btn-section-font-size;
	font-weight: $btn-section-font-weight;
	line-height: $btn-section-line-height;
}

// Button Sizes

%clay-btn-lg {
	@include border-radius($btn-border-radius-lg);

	font-size: $btn-font-size-lg;
	line-height: $btn-line-height-lg;
	padding-bottom: $btn-padding-y-lg;
	padding-left: $btn-padding-x-lg;
	padding-right: $btn-padding-x-lg;
	padding-top: $btn-padding-y-lg;

	@include clay-scale-component {
		font-size: $btn-font-size-lg-mobile;
		padding-bottom: $btn-padding-y-lg-mobile;
		padding-left: $btn-padding-x-lg-mobile;
		padding-right: $btn-padding-x-lg-mobile;
		padding-top: $btn-padding-y-lg-mobile;
	}

	.inline-item {
		font-size: $btn-inline-item-font-size-lg;
	}

	.btn-section {
		font-size: $btn-section-font-size-lg;
	}
}

.btn-lg {
	font-size: $btn-font-size-lg;

	@include clay-scale-component {
		font-size: $btn-font-size-lg-mobile;
		padding-bottom: $btn-padding-y-lg-mobile;
		padding-left: $btn-padding-x-lg-mobile;
		padding-right: $btn-padding-x-lg-mobile;
		padding-top: $btn-padding-y-lg-mobile;
	}

	.inline-item {
		font-size: $btn-inline-item-font-size-lg;
	}

	.btn-section {
		font-size: $btn-section-font-size-lg;
	}
}

%clay-btn-sm {
	@include border-radius($btn-border-radius-sm);

	font-size: $btn-font-size-sm;
	line-height: $btn-line-height-sm;
	padding-bottom: $btn-padding-y-sm;
	padding-left: $btn-padding-x-sm;
	padding-right: $btn-padding-x-sm;
	padding-top: $btn-padding-y-sm;

	@include clay-scale-component {
		font-size: $btn-font-size-sm-mobile;
		padding-bottom: $btn-padding-y-sm-mobile;
		padding-left: $btn-padding-x-sm-mobile;
		padding-right: $btn-padding-x-sm-mobile;
		padding-top: $btn-padding-y-sm-mobile;
	}

	.inline-item {
		font-size: $btn-inline-item-font-size-sm;
	}

	.btn-section {
		font-size: $btn-section-font-size-sm;
	}
}

.btn-sm {
	font-size: $btn-font-size-sm;

	@include clay-scale-component {
		font-size: $btn-font-size-sm-mobile;
		padding-bottom: $btn-padding-y-sm-mobile;
		padding-left: $btn-padding-x-sm-mobile;
		padding-right: $btn-padding-x-sm-mobile;
		padding-top: $btn-padding-y-sm-mobile;
	}

	.inline-item {
		font-size: $btn-inline-item-font-size-sm;
	}

	.btn-section {
		font-size: $btn-section-font-size-sm;
	}
}

// Button Link

.btn-link {
	@include border-radius(1px);

	&:focus {
		box-shadow: $btn-focus-box-shadow;
		text-decoration: $link-decoration;
	}

	&.disabled,
	&:disabled {
		text-decoration: none;

		&:hover {
			text-decoration: none;
		}
	}

	&:hover {
		text-decoration: $link-hover-decoration;
	}
}

// Button Unstyled

%btn-unstyled {
	background-color: rgba(0, 0, 0, 0.001);
	border-width: 0;
	cursor: $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;
}

.btn-unstyled {
	@extend %btn-unstyled;
}

// Button Monospaced

.btn-monospaced {
	height: $btn-monospaced-size;
	line-height: 1;
	overflow: hidden;
	padding-bottom: $btn-monospaced-padding-y;
	padding-left: $btn-monospaced-padding-x;
	padding-right: $btn-monospaced-padding-x;
	padding-top: $btn-monospaced-padding-y;
	text-align: center;
	white-space: normal;
	width: $btn-monospaced-size;
	word-wrap: break-word;

	@include clay-scale-component {
		height: $btn-monospaced-size-mobile;
		width: $btn-monospaced-size-mobile;
	}

	&.btn-lg {
		height: $btn-monospaced-size-lg;
		padding-bottom: $btn-monospaced-padding-y-lg;
		padding-left: $btn-monospaced-padding-x-lg;
		padding-right: $btn-monospaced-padding-x-lg;
		padding-top: $btn-monospaced-padding-y-lg;
		width: $btn-monospaced-size-lg;

		@include clay-scale-component {
			height: $btn-monospaced-size-lg-mobile;
			width: $btn-monospaced-size-lg-mobile;
		}
	}

	&.btn-sm {
		height: $btn-monospaced-size-sm;
		padding-bottom: $btn-monospaced-padding-y-sm;
		padding-left: $btn-monospaced-padding-x-sm;
		padding-right: $btn-monospaced-padding-x-sm;
		padding-top: $btn-monospaced-padding-y-sm;
		width: $btn-monospaced-size-sm;

		@include clay-scale-component {
			height: $btn-monospaced-size-sm-mobile;
			width: $btn-monospaced-size-sm-mobile;
		}
	}

	&.btn .lexicon-icon {
		margin-top: 0;
	}
}

// Button Variants

@each $color, $value in $btn-palette {
	.btn-#{$color} {
		@include clay-button-variant($value);
	}

	%btn-#{$color}-focus {
		background-color: map-get($value, focus-bg);
		border-color: map-get($value, focus-border-color);
		box-shadow: map-get($value, focus-box-shadow);
		color: map-get($value, focus-color);
	}
}

// Button Outline Variants

@each $color, $value in $btn-outline-palette {
	.btn-outline-#{$color} {
		@include clay-button-variant($value);
	}

	%btn-outline-#{$color}-focus {
		background-color: map-get($value, focus-bg);
		border-color: map-get($value, focus-border-color);
		box-shadow: map-get($value, focus-box-shadow);
		color: map-get($value, focus-color);
	}
}

.btn-outline-borderless {
	border-color: transparent;

	&:hover,
	&:focus {
		border-color: transparent;
	}

	&:disabled,
	&.disabled {
		border-color: transparent;
	}
}

.btn-outline-borderless:not(:disabled):not(.disabled):active {
	border-color: transparent;
}

.show > .btn-outline-borderless.dropdown-toggle {
	border-color: transparent;
}

// Loading Icons with Buttons

.btn .loading-animation {
	font-size: 1em;
	margin-top: $inline-item-lexicon-icon-margin-top;
}