@mixin clearfix {
  &:after {
    content: '';
    display: table;
    clear: both;
  }
}

@mixin vertical-align($display: 'block') {
  align-items: center;
  @if $display == 'inline' {
    display: inline-flex;
  } @else {
    display: flex;
  }
}

@mixin monospace {
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 12px;
  line-height: 22px;
  word-wrap: normal;
  white-space: pre;
}

@mixin button-context($bg-color: inherit, $color: inherit, $fadeOnHover: true) {
  background-color: $bg-color;
  color: $color;

  svg {
    fill: $color;
  }

  @if $fadeOnHover {
    transition-property: background-color, color, opacity, border-color;
    transition-duration: .15s;
    transition-timing-function: ease-in-out;

    &:hover {
      background-color: darken($bg-color, 15%);
      opacity: .9;
    }
  }

  // Disabled
  &[disabled],
  &:disabled,
  &.disabled {
    cursor: not-allowed;
    opacity: .65;

    &:hover {
      background-color: $bg-color;
      color: $color;
    }
  }

}

// https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
@mixin word-wrap() {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}