.tribe-common {
	/* -----------------------------------------------------------------------------
	 *
	 * Button: Solid
	 *
	 * Example:
	 * <button class="tribe-common-c-btn">...</button>
	 * <a href="#" class="tribe-common-c-btn">...</a>
	 *
	 * ----------------------------------------------------------------------------- */

	.tribe-common-c-btn {
		@mixin button-solid;

		background-color: var(--color-accent-primary);
		padding: 16px 22px 17px;
		width: 100%;

		@media (--viewport-medium) {
			width: auto;
		}

		&:focus,
		&:hover {
			background-color: var(--color-accent-primary-hover);
		}

		&:active {
			background-color: var(--color-accent-primary-active);
		}

		&:disabled {
			background-color: var(--color-accent-primary-background);
		}

		&:after {
			background-image: svg-inline(arrow-right-white);
			background-repeat: no-repeat;
			background-size: contain;
			content: '';
			display: inline-block;
			height: 10px;
			margin-left: 8px;
			width: 12px;
		}
	}

	/* -----------------------------------------------------------------------------
	 *
	 * Button: Solid Secondary
	 *
	 * Example:
	 * <button class="tribe-common-c-btn tribe-common-c-btn--secondary">...</button>
	 * <a href="#" class="tribe-common-c-btn tribe-common-c-btn--secondary">...</a>
	 *
	 * ----------------------------------------------------------------------------- */

	.tribe-common-c-btn--secondary {
		padding: 12px 19px 13px;
		width: auto;

		&:after {
			content: none;
		}
	}
}