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

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

		background-color: var(--color-accent-primary);
		padding: 11px 20px 11px;
		width: 100%;

		.tribe-common--breakpoint-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);
		}
	}

	/* -------------------------------------------------------------------------
	 *
	 * Button: Solid - Theme Overrides
	 *
	 * ------------------------------------------------------------------------- */

	/* -------------------------------------------------------------------------
	 * Theme Overrides - Twenty Seventeen
	 * ------------------------------------------------------------------------- */

	.tribe-theme-twentyseventeen & {

		.tribe-common-c-btn {

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

	/* -------------------------------------------------------------------------
	 * Theme Overrides - Twenty Twenty
	 * ------------------------------------------------------------------------- */

	.tribe-theme-twentytwenty & {

		.tribe-common-c-btn {
			background-color: var(--color-accent-primary);

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