$thick: 3px;
$pad: 0.7em;
$extra: calc(#{$pad} * 1.2);

@mixin button-style(){
  margin: .25rem 0;
  display: inline-block;
  border: 1px solid $blue;
  padding: .5rem 1rem;
  border-radius: $border-radius-base;
  background-color: $white;
  text-decoration: none;
  color: $body-font-color;

  &[disabled]{
    background-color: $lightgray;
    border: 1px solid $lightgray;
    color: $white;
  }

  &:not([disabled]):hover{
    background-color: $blue-darker;
    color: $white;
  }

  &:not([disabled]):active{
    color: $white;
    background-color: $charcoal;
  }

  @include breakpoint(small down) {
    width: 100%;
    display: block;
  }

  svg.svg-inline--fa{
    margin-right: .5rem;
  }
}

#main-content{
  a.button {
    @include button-style();
  }
}

.TOC-button {
  padding: 5px;
  margin-bottom: 24px;
}

.note {
  &-btn {
    margin-top: 1rem;
    display:block;
    padding:1rem 1rem 1rem 0;
    vertical-align:middle;
    overflow:hidden;
    text-decoration:none;
    color: $blue-darker!important;
    background-color:inherit;
    text-align:left;
    white-space:nowrap
  }
  &-hide{
    display: none;
  }
  &-container {
    padding:0.01rem 1rem;
  }
}


