
@mixin colorJobs($color, $color-bg)
  .job-id
    color: $color
  &:hover
    background-color: $color-bg
    .job-anchor,
    .job-env,
    .job-lang
      background-color: $color-bg
    .job-env
      &:after
        content: none
    .job-anchor,
    .job-lang
      &:after
        @include fadeOut(right, -90deg, $color-bg)

.job-anchor
  position: relative

.build-title
  .icon--question
    width: 1.3em;
    height: 1.3em;
    transform: translate(0.3em, 0.2em);
    cursor: pointer

// job matrix
.tile--jobs
  @extend .tile--xs
  font-size: $font-size-sm
  padding-left: 3.5rem
  p
    white-space: normal
  a
    color: $grey-medium
  .tile-status--job
    width: 2em

    .svg-booting
      margin: 0.7em 0.3em

  .jobs-item
    padding: .1em 0
    .icon
      height: 1.2em
      margin-right: .1em
    .job-os .icon
      height: 1.3em
    .icon--lang
      height: 1em
      width: 1.4em
    .icon--env
      width: 1.1em
    .icon.api
      height: 1.5em

  @media #{$medium-up}
    height: 36px
    p
      white-space: nowrap
    .icon--lang,
    .icon--env
      margin-right: .4em
    .jobs-item
      position: relative
      float: left
      white-space: nowrap
      padding: 0
      overflow: hidden
    .job-id
      width: grid-calc(3, 24)
      border-right: solid 1px $cream-dark
    .job-os
      width: grid-calc(1, 24)
      text-align: center
    .job-lang
      width: grid-calc(6, 24)
      &:after
        @include fadeOut(right, -90deg, $cream-light)
    .job-anchor
      width: grid-calc(14, 24)
      &:after
        @include fadeOut(right, -90deg, $cream-light)
        z-index: 999
    .job-env
      min-width: grid-calc(16, 24)
      width: grid-calc(16, 24)
      &:after
        @include fadeOut(right, -90deg, $cream-light)
      &:hover
        position: absolute
        width: auto
        padding-right: 1em
        z-index: 999
    .job-duration
      width: grid-calc(8, 24)
      max-width: 165px
      float: right

  @media #{$xlarge-up}
    .job-id
      width: grid-calc(2, 24)
    .job-os
      margin: 0 1em
    .job-lang
      width: grid-calc(4, 24)
      margin-right: 2em

  &.failed,
  &.errored
    @include colorJobs($fail-color, #fbebe6)
  &.passed
    @include colorJobs($pass-color, #e5efe4)
  &.canceled
    @include colorJobs($cancel-color, #e5e5e5)
  &.started,
  &.created,
  &.received,
  &.queued
    @include colorJobs($created-color, #f4efd8)

.is-empty
  opacity: .5

.jobs-list
  @include resetul

