/*----------------------------------------------*\
    BLOCK - Button
	==============

	@package theorder

\*----------------------------------------------*/
/*----------------------------------------------*\
    COMPONENTS
	==========

	@package theorder

\*----------------------------------------------*/
/*
 *
 * / Variables
------------------------------------------------*/
/* Breakpoints */
/* Responsive type multipliers */
/* Type sizes (Minor third) */
/* Max-widths */
/* is used for calculation for extend width. Each side is extended by x ems */
.button-group {
  padding: 0 var(--size-400);
  margin-bottom: var(--size-500);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-direction: column;
      flex-direction: column; }
  .button-group__heading {
    font-family: var(--font-sans);
    font-size: var(--size-300);
    color: var(--color-button-header);
    text-transform: uppercase;
    text-align: center;
    margin-bottom: var(--size-600); }
  .button-group__wrapper {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: center;
        justify-content: center;
    gap: var(--size-100); }
  .button-group__link {
    display: block;
    padding: var(--size-300);
    text-decoration: none;
    min-width: 10em;
    font-size: var(--size-300);
    text-align: center; }
    .button-group__link--primary {
      color: var(--color-button-text-primary);
      background-color: var(--color-button-primary);
      border: 1px solid var(--color-button-border-primary); }
      .button-group__link--primary:hover {
        background-color: var(--color-button-hover-primary); }
      .button-group__link--primary:focus {
        outline: 2px solid var(--color-button-border-primary); }
    .button-group__link--secondary {
      color: var(--color-button-text-secondary);
      background-color: var(--color-button-secondary);
      border: 1px solid var(--color-button-border-secondary); }
      .button-group__link--secondary:hover {
        background-color: var(--color-button-hover-secondary); }
      .button-group__link--secondary:focus {
        outline: 2px solid var(--color-button-border-secondary); }