@mixin card-action-button {
	min-width: 100px;
	margin-left: 1rem;
	padding: 0.5rem 1.25rem;
	justify-content: center;
	border: 1px solid $color-white;
	border-radius: 3px;
	line-height: 1.0625rem;
	letter-spacing: 0.0525rem;
	font-size: 0.75rem;
	font-weight: bold;
	text-transform: uppercase;
}
@mixin card-action-button-disabled {
	&[disabled='disabled'] {
		background: $color-off-white-2;
		border-color: $color-off-white-2;
		color: $color-gray-3;
	}
}

// .components-button prefix is added to override WordPress stylings
.components-button {
	&.casted-card-action-outline {
		@include card-action-button;

		background: $color-white;
		border-color: $color-gray-3;
		color: $color-gray-3;

		&:not(:disabled):not([aria-disabled='true']):hover {
			background: $color-gray-3;
			color: #fff;
		}

		@include card-action-button-disabled;
	}

	&.casted-card-action-no-outline {
		@include card-action-button;

		background: $color-white;
		border-color: $color-white;
		color: $color-gray-3;

		&:not(:disabled):not([aria-disabled='true']):hover {
			background: $color-white;
			color: $color-gray-3;
		}

		@include card-action-button-disabled;
	}

	&.casted-card-action-green {
		@include card-action-button;

		background: $brand-green;
		border: 1px solid $brand-green;
		color: #fff;

		&:not(:disabled):not([aria-disabled='true']):hover {
			background: $brand-green-hover;
			border-color: $brand-green-border;
			color: #fff;
		}

		@include card-action-button-disabled;
	}
}