
@mixin fadeOut($position, $angle, $color, $width: 0%)
  content: ""
  display: block
  position: absolute

  @if $position == bottom
    bottom: 0
    width: 100%
    height: 2em
  @else if $position == right
    top: 0
    right: 0
    width: 2em
    height: 100%

  background: linear-gradient($angle, rgba($color, 1) $width, rgba($color, 0) 100%)

@mixin clearfix
  &:before,
  &:after
    content: ""
    display: table
  &:after
    clear: both

@mixin resetul
  margin: 0
  padding: 0
  list-style: none

%absolute-center
  position: absolute
  top: 0
  right: 0
  left: 0
  bottom: 0
  margin: auto

%inline-block
  display: inline-block

%helptext
  font-size: $font-size-m
  color: $grey-medium
  a
    color: $grey-dark
    text-decoration: none
    &:hover
      text-decoration: underline

%section-title
  font-size: $font-size-sm
  color: $grey-medium
  font-weight: 400


// @todo simplyfiy coloring mixins

@mixin colorStatusIcons($color, $status)
  .status-icon.#{$status}
    svg g > *
      fill: $color

@mixin colorTiles($color, $status, $extra-bg: $color)
  &.#{$status}
    border-color: $extra-bg
    .tile-status
      background-color: $color
    .repo-header-title a,
    .repo-build-status a,
    .build-status a,
    .tile-header,
    .tile-header a,
    .tile-title a
      color: $color
    @include colorStatusIcons($color, $status)

@mixin statusColors($color, $status, $color2: $color)
  &.#{$status}
    background: linear-gradient(to right, $color2 0%, $color2 9px, white 9px, white 100%) no-repeat
    .row-name,
    .row-request a,
    .row-color a
      color: $color
      &:hover
        border-color: $color
    .row-name .status-icon g > *,
    .row-request .icon-request g > *
      fill: $color
      
    .build a,
    .repo-title a
      color: $color
      &:hover
        border-color: $color
    .build-status
      color: $color
    @include colorStatusIcons($color, $status)
