.xprez-module {
	.btn {
		--ck-color-link-selected-background: #{$b-blue-high};
		--ck-color-link-selected-color: white;

		--x-btn-color: var(--x-btn-primary-color);
		--x-btn-bg: var(--x-btn-primary-bg);
		--x-btn-hover-color: var(--x-btn-primary-hover-color);
		--x-btn-hover-bg: var(--x-btn-primary-hover-bg);

		&.ck-link_selected {
			color: var(--ck-color-link-selected-color);
		}

		&.btn-secondary {
			--x-btn-color: var(--x-btn-secondary-color);
			--x-btn-bg: var(--x-btn-secondary-bg);
			--x-btn-hover-color: var(--x-btn-secondary-color);
			--x-btn-hover-bg: var(--x-btn-secondary-bg);
		}

		&.white {
			--x-btn-color: #{$txt-gray};
			--x-btn-bg: white;
			--x-btn-hover-color: #{$txt-gray};
		}

		@if $use-xprez-button-styles {
			display: inline-block;
			@include type($button-size);
			font-family: $button-font-family;
			box-sizing: border-box;
			border-radius: $button-border-radius;
			text-shadow: $button-text-shadow;
			border: $button-border;
			text-decoration: $button-text-transform;
			text-transform: $button-text-transform;
			letter-spacing: $button-letter-spacing;
			padding: $button-padding-v $button-padding-h;
			box-shadow: $button-box-shadow;
			color: var(--x-btn-color);
			background: var(--x-btn-bg);

			@media only screen and (max-width: $typo-break-s) {
				padding: ($button-padding-v * 0.75) ($button-padding-h * 0.75);
			}

			&:hover {
				color: var(--x-btn-hover-color);
				background: var(--x-btn-hover-bg);
			}

			&:active {
				transform: scale(0.95);
			}
		}

	}
}