.markdown-body {
  /* ==========================================================================
   BUTTONS
   ========================================================================== */

  /*
   Default button
   ========================================================================== */

  .btn {
    /* default */
    display: inline-block;
    margin-bottom: 0.25em;
    padding: 0.5em 1em;
    font-size: $font-size-6;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-width: 0;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;

    &:hover {
      text-decoration: none;
    }

    .icon {
      margin-right: 0.5em;
    }

    .icon + .hidden {
      margin-left: -0.5em; /* override for hidden text*/
    }

    /* button colors */
    $buttoncolors: (primary, $color-notice-primary), (inverse, #fff), (light-outline, transparent),
      (success, $color-notice-success), (warning, $color-notice-warning), (danger, $color-notice-danger),
      (info, $color-info), (facebook, $color-facebook), (twitter, $color-twitter), (linkedin, $color-linkedin);

    @each $buttoncolor, $color in $buttoncolors {
      &--#{$buttoncolor} {
        @include yiq-contrasted($color);
        @if ($buttoncolor == inverse) {
          border: 1px solid $color-border-default;
        }
        @if ($buttoncolor == light-outline) {
          border: 1px solid #fff;
        }

        &:visited {
          @include yiq-contrasted($color);
        }

        &:hover {
          @include yiq-contrasted(mix(#000, $color, 20%));
        }
      }
    }

    /* fills width of parent container */
    &--block {
      display: block;
      width: 100%;

      + .btn--block {
        margin-top: 0.25em;
      }
    }

    /* disabled */
    &--disabled {
      pointer-events: none;
      cursor: not-allowed;
      filter: alpha(opacity=65);
      box-shadow: none;
      opacity: 0.65;
    }

    /* extra large button */
    &--x-large {
      font-size: $font-size-3;
    }

    /* large button */
    &--large {
      font-size: $font-size-4;
    }

    /* small button */
    &--small {
      font-size: $font-size-7;
    }
  }
}