:root {
  --btn-background-color: inherit;
  --btn-border-color: var(--btn-background-color);
  --btn-border-width: var(--global-border-width);
  --btn-color: var(--ifm-font-color-base-inverse);
  --btn-font-weight: var(--ifm-font-weight-bold);
  --btn-padding-horizontal: 1.5rem;
  --btn-padding-vertical: 0.375rem;
  --btn-size-multiplier: 1;
  --btn-xn-duration: var(--ifm-transition-fast);
  --btn-border-radius: calc(
    var(--global-border-radius) * var(--btn-size-multiplier)
  );
}
.button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--btn-background-color);
  border-color: var(--btn-border-color);
  border-style: solid;
  border-width: var(--btn-border-width);
  border-radius: var(--btn-border-radius);
  box-sizing: border-box;
  color: var(--btn-color);
  cursor: pointer;
  display: inline-block;
  font-size: calc(0.875rem * var(--btn-size-multiplier));
  font-weight: var(--btn-font-weight);
  line-height: 1.5;
  outline: 0;
  padding: calc(
      var(--btn-padding-vertical) * var(--btn-size-multiplier)
    )
    calc(
      var(--btn-padding-horizontal) * var(--btn-size-multiplier)
    );
  text-align: center;
  text-decoration: none;
  transition: color var(--btn-xn-duration)
      cubic-bezier(0.08, 0.52, 0.52, 1),
    background var(--btn-xn-duration)
      cubic-bezier(0.08, 0.52, 0.52, 1),
    border-color var(--btn-xn-duration)
      cubic-bezier(0.08, 0.52, 0.52, 1);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  vertical-align: middle;
  white-space: nowrap;
}
.button:hover {
    color: var(--btn-color);
    outline: 0;
    text-decoration: none;
  }
.button:focus {
    outline: 0;
  }
.button--outline {
    --btn-background-color: transparent;
    --btn-color: var(--btn-border-color);
  }
.button--outline:hover {
      --btn-background-color: var(--btn-border-color);
    }
.button--outline:hover,
    .button--outline:active,
    .button--outline.button--active {
      --btn-color: var(--ifm-font-color-base-inverse);
    }
.button--link {
    --btn-background-color: transparent;
    --btn-border-color: transparent;

    color: var(--link-color);
    -webkit-text-decoration: var(--link-decoration);
            text-decoration: var(--link-decoration);
  }
.button--link:hover,
    .button--link:active,
    .button--link.button--active {
      color: var(--link-hover-color);
      -webkit-text-decoration: var(--link-hover-decoration);
              text-decoration: var(--link-hover-decoration);
    }
.button.disabled,
  .button:disabled,
  .button[disabled] {
    opacity: 0.65;
    pointer-events: none;
  }
.button--sm {
    --btn-size-multiplier: 0.8;
  }
.button--lg {
    --btn-size-multiplier: 1.35;
  }
.button--block {
    display: block;
    width: 100%;
  }
.button.button--secondary {
    color: var(--ifm-color-gray-900);
  }
.button.button--secondary.button--outline:not(.button--active):not(:hover) {
      color: var(--ifm-font-color-base);
    }
.button--primary {
    --btn-border-color: var(--ifm-color-primary);
  }
.button--primary:not(.button--outline) {
      --btn-background-color: var(--ifm-color-primary);
    }
.button--primary:not(.button--outline):hover {
        --btn-background-color: var(--ifm-color-primary-dark);
        --btn-border-color: var(--ifm-color-primary-dark);
      }
.button--primary:active,
    .button--primary.button--active {
      --btn-border-color: var(--ifm-color-primary-darker);
      --btn-background-color: var(--ifm-color-primary-darker);

      background-color: var(
        --ifm-color-primary-darker
      );
      border-color: var(
        --ifm-color-primary-darker
      );
    }
.button--secondary {
    --btn-border-color: var(--ifm-color-secondary);
  }
.button--secondary:not(.button--outline) {
      --btn-background-color: var(--ifm-color-secondary);
    }
.button--secondary:not(.button--outline):hover {
        --btn-background-color: var(--ifm-color-secondary-dark);
        --btn-border-color: var(--ifm-color-secondary-dark);
      }
.button--secondary:active,
    .button--secondary.button--active {
      --btn-border-color: var(--ifm-color-secondary-darker);
      --btn-background-color: var(--ifm-color-secondary-darker);

      background-color: var(
        --ifm-color-secondary-darker
      );
      border-color: var(
        --ifm-color-secondary-darker
      );
    }
.button--success {
    --btn-border-color: var(--ifm-color-success);
  }
.button--success:not(.button--outline) {
      --btn-background-color: var(--ifm-color-success);
    }
.button--success:not(.button--outline):hover {
        --btn-background-color: var(--ifm-color-success-dark);
        --btn-border-color: var(--ifm-color-success-dark);
      }
.button--success:active,
    .button--success.button--active {
      --btn-border-color: var(--ifm-color-success-darker);
      --btn-background-color: var(--ifm-color-success-darker);

      background-color: var(
        --ifm-color-success-darker
      );
      border-color: var(
        --ifm-color-success-darker
      );
    }
.button--info {
    --btn-border-color: var(--ifm-color-info);
  }
.button--info:not(.button--outline) {
      --btn-background-color: var(--ifm-color-info);
    }
.button--info:not(.button--outline):hover {
        --btn-background-color: var(--ifm-color-info-dark);
        --btn-border-color: var(--ifm-color-info-dark);
      }
.button--info:active,
    .button--info.button--active {
      --btn-border-color: var(--ifm-color-info-darker);
      --btn-background-color: var(--ifm-color-info-darker);

      background-color: var(
        --ifm-color-info-darker
      );
      border-color: var(
        --ifm-color-info-darker
      );
    }
.button--warning {
    --btn-border-color: var(--ifm-color-warning);
  }
.button--warning:not(.button--outline) {
      --btn-background-color: var(--ifm-color-warning);
    }
.button--warning:not(.button--outline):hover {
        --btn-background-color: var(--ifm-color-warning-dark);
        --btn-border-color: var(--ifm-color-warning-dark);
      }
.button--warning:active,
    .button--warning.button--active {
      --btn-border-color: var(--ifm-color-warning-darker);
      --btn-background-color: var(--ifm-color-warning-darker);

      background-color: var(
        --ifm-color-warning-darker
      );
      border-color: var(
        --ifm-color-warning-darker
      );
    }
.button--danger {
    --btn-border-color: var(--ifm-color-danger);
  }
.button--danger:not(.button--outline) {
      --btn-background-color: var(--ifm-color-danger);
    }
.button--danger:not(.button--outline):hover {
        --btn-background-color: var(--ifm-color-danger-dark);
        --btn-border-color: var(--ifm-color-danger-dark);
      }
.button--danger:active,
    .button--danger.button--active {
      --btn-border-color: var(--ifm-color-danger-darker);
      --btn-background-color: var(--ifm-color-danger-darker);

      background-color: var(
        --ifm-color-danger-darker
      );
      border-color: var(
        --ifm-color-danger-darker
      );
    }
:root {
  --btn-group-margin: 2px;
}
.button-group {
  display: inline-flex;
}
.button-group > .button:not(:first-child) {
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
      margin-left: var(--btn-group-margin);
    }
.button-group > .button:not(:last-child) {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
    }
.button-group > .button--active {
      z-index: 1;
    }
.button-group--block {
    display: flex;
    justify-content: stretch;
  }
.button-group--block > .button {
      flex-grow: 1;
    }