/**
 * Prefilled mixins
 * Mixins with fixed values
 */

@mixin str-truncated($max_width: 82%) {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
  white-space: nowrap;
  max-width: $max_width;
}

/*
 * Mixin for markdown tables
 */
@mixin markdown-table {
  width: auto;
}

/*
 * Base mixin for lists in GitLab
 */
@mixin basic-list {
  margin: 5px 0;
  padding: 0;
  list-style: none;

  > li {
    @include clearfix;

    padding: 10px 0;
    border-bottom: 1px solid $list-border-light;
    display: block;
    margin: 0;

    &:last-child {
      border-bottom: 0;
    }

    &.active {
      background: $gray-light;

      a {
        font-weight: $gl-font-weight-bold;
      }
    }

    &.hide {
      display: none;
    }

    &.light {
      a {
        color: $gl-text-color;
      }
    }
  }
}

@mixin basic-list-stats {
  .stats {
    float: right;
    line-height: $list-text-height;
    color: $gl-text-color;

    span {
      margin-right: 15px;
    }
  }
}

@mixin bulleted-list {
  > ul {
    list-style-type: disc;

    ul {
      list-style-type: circle;

      ul {
        list-style-type: square;
      }
    }
  }
}

@mixin dark-diff-match-line {
  color: $dark-diff-match-bg;
  background: $dark-diff-match-color;
}

@mixin webkit-prefix($property, $value) {
  #{'-webkit-' + $property}: $value;
  #{$property}: $value;
}

/* http://phrappe.com/css/conditional-css-for-webkit-based-browsers/ */
@mixin on-webkit-only {
  @media screen and (-webkit-min-device-pixel-ratio:0) {
    @content;
  }
}

@mixin keyframes($animation-name) {
  @-webkit-keyframes #{$animation-name} {
    @content;
  }

  @keyframes #{$animation-name} {
    @content;
  }
}

@mixin include-keyframes($animation-name) {
  @include webkit-prefix(animation-name, $animation-name);
  @include keyframes($animation-name) {
    @content;
  }
}

/*
 * Mixin for status badges, as used for pipelines and commit signatures
 */
@mixin status-color($color-light, $color-main, $color-dark) {
  color: $color-main;
  border-color: $color-main;

  &:not(span):hover {
    background-color: $color-light;
    color: $color-dark;
    border-color: $color-dark;

    svg {
      fill: $color-dark;
    }
  }

  svg {
    fill: $color-main;
  }
}

@mixin green-status-color {
  @include status-color($green-100, $green-500, $green-700);
}

@mixin fade($gradient-direction, $gradient-color) {
  visibility: hidden;
  opacity: 0;
  z-index: 2;
  position: absolute;
  bottom: 12px;
  width: 43px;
  height: 30px;
  transition-duration: .3s;
  -webkit-transform: translateZ(0);
  background: linear-gradient(to $gradient-direction, $gradient-color 45%, rgba($gradient-color, 0.4));

  &.scrolling {
    visibility: visible;
    opacity: 1;
    transition-duration: .3s;
  }

  .fa {
    position: relative;
    top: 5px;
    font-size: 18px;
  }
}

@mixin scrolling-links() {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex;

  &::-webkit-scrollbar {
    display: none;
  }
}