/**
 * Stylings for Interact and Show Widget buttons.
 *
 * [1]: We abuse CSS selector specificity here since the buttons at the top of
 *   the notebook might have both .interact-button and .js=nbinteract-widget.
 * [2]: We want the top buttons to be large.
 * [3]: However, a .js=nbinteract-widget appearing alone midway through the
 *   notebook should be small.
 *
 */

$color-interact-button: #5a5a5a !default;

%interact-button {
  @include inuit-font-size(14px);
  background-color: $color-interact-button;
  border-radius: 3px;
  border: none;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-weight: 700;
  /* [2] */
  padding: $spacing-unit-tiny $spacing-unit-med;
  text-decoration: none;

  &:hover,
  &:focus {
    text-decoration: none;
  }
}

.interact-button-logo {
  height: 1.35em;
  padding-right: 10px;
  margin-left: -5px;
}

.buttons {
  margin-bottom: $spacing-unit;

  /* [1] */
  .interact-button {
    @extend %interact-button;
  }
}

.js-nbinteract-widget {
  @extend %interact-button;

  /* [3] */
  padding: $spacing-unit-tiny $spacing-unit;
  margin-bottom: $spacing-unit-small;
}

// If the interact button link is changed with a REST param
div.interact-context {
  display: inline;
  padding-left: 1em;
}