@mixin grad {
  background-color: $default-primary-colour;

  @include gradient-vertical($green, $blue, 0%, 100%);
}

@mixin light-text($col:#fff) {
  color: $col;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@mixin dark-module($bg:$grey) {
  background-color: $bg;

  @include light-text;

  #{$text-inputs-list} {
    background-color: $bg;
  }
}

// Copied from the BS .btn class, because BS doesn't have a mixin for this!
@mixin btn {
  display: inline-block;
  margin-bottom: 0; // For input.btn
  font-weight: $btn-font-weight;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  border: 1px solid transparent;
  white-space: nowrap;

  @include button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $btn-border-radius-base);
  @include user-select(none);

  padding: 0.65em 2em 0.45em;

  &,
  &:active,
  &.active {
    &:focus,
    &.focus {
      @include tab-focus;
    }
  }

  &:hover,
  &:focus,
  &.focus {
    color: $btn-default-color;
    text-decoration: none;
  }

  &:active,
  &.active {
    outline: 0;
    background-image: none;

    @include box-shadow(inset 0 3px 5px rgba(0, 0, 0, 0.125));
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    cursor: $cursor-disabled;

    @include opacity(0.65);
    @include box-shadow(none);
  }

  // [converter] extracted a& to a.btn
}

@mixin context-menu($postion: right) {
  position: absolute;
  top: 0;
  left: 0;
  z-index: $zindex-popover;
  display: none;
  max-width: $popover-max-width;
  padding: 1px;

  @include reset-text;

  font-size: $font-size-base;
  background-color: $popover-bg;
  background-clip: padding-box;
  border: 1px solid $popover-fallback-border-color;
  border: 1px solid $popover-border-color;
  border-radius: $border-radius-large;

  @include box-shadow(0 5px 10px rgba(0, 0, 0, 0.2));
  @include light-text;

  margin: 0;

  a {
    color: inherit;
  }

  @if $postion == right {
    //margin-left: -$popover-arrow-width;
  }

  @if $postion == left {
    left: auto;
    right: 100%;
    //margin-right: $popover-arrow-width;

    &::before,
    &::after {
      border-width: 8px 0 8px 8px;
      left: auto;
    }

    &::before {
      border-color: transparent transparent transparent #007bff;
      right: -8px;
    }

    &::after {
      border-color: transparent transparent transparent $popover-bg;
      right: -7px;
    }
  }

  &.active {
    display: block;
  }

  & > * {
    padding: 9px 14px;
  }

  &::before,
  &::after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    border-style: solid;
    border-width: 8px 8px 8px 0;
    top: 12px;
  }

  &::before {
    border-color: transparent  $popover-border-color transparent transparent;
    left: -8px;
  }

  &::after {
    border-color: transparent  $popover-bg transparent transparent;
    left: -7px;
  }

  @if $postion == left {
    &::before,
    &::after {
      border-width: 8px 0 8px 8px;
      left: auto;
    }

    &::before {
      border-color: transparent transparent transparent $popover-border-color;
      right: -8px;
    }

    &::after {
      border-color: transparent transparent transparent $popover-bg;
      right: -7px;
    }
  }

  & > header {
    margin: 0 0 10px;
    padding: 8px 14px;
    font-size: $font-size-base;
    background-color: $popover-title-bg;
    border-bottom: 1px solid darken($popover-title-bg, 5%);
    border-radius: ($border-radius-large - 1) ($border-radius-large - 1) 0 0;
  }
}

@mixin add-box($bgc: lighten($lighter-grey, 2)) {
  display: block;
  border: dashed 2px $light-grey;
  text-align: center;
  text-decoration: none;
  color: darken($light-grey, 20%);
  padding: $grid-gutter-width;
  background-color: $bgc;
  cursor: pointer;

  svg {
    width: 30px;
    height: 30px;
    fill: currentColor;
    display: block;
    margin-left: auto;
    margin-right: auto;

    & + span {
      margin-top: 3px;
    }
  }

  &:hover {
    color: $primary-colour;
    border-color: $primary-colour;
  }
}