
.tile
  @extend %border-radius-4px
  overflow: hidden
  position: relative
  padding: .8rem .8rem .8rem 3rem
  background-color: $cream-light
  p
    margin: 0
  .icon
    vertical-align: middle
  .icon--lang
    width: 1.2em
    height: 0.9em

  &:not(.tile--jobs)
    @include colorTiles($green-dark, 'passed')
    @include colorTiles($red-dark, 'failed')
    @include colorTiles($red-dark, 'errored')
    @include colorTiles($grey-medium, 'canceled')
    @include colorTiles(#bfb502, 'started', #e5da3f)
    @include colorTiles(#bfb502, 'queued', #e5da3f)
    @include colorTiles(#bfb502, 'booting', #e5da3f)
    @include colorTiles(#bfb502, 'received', #e5da3f)
    @include colorTiles(#bfb502, 'created', #e5da3f)

    .status-icon .is-rotating
      width: 17px;
      height: 17px;
      line-height: 1;

  @media #{$medium-up}
    height: 145px

  .tile-main
    height: 100%

.tile--small
  margin-bottom: 1em
  @media #{$medium-up}
    height: 70px
    overflow: hidden

.tile--xs
  margin-bottom: 0.35em
  padding: .5em .4em .4em
  @media #{$medium-up}
    height: 36px
    overflow: hidden

.tile-main
  h2,
  small
    margin: 0
    font-weight: 400
    font-size: $font-size-m
    color: $grey-dark
    line-height: 1
  small
    margin-right: .3em
    font-weight: 600
  a:hover
    text-decoration: underline

.tile-additional
  position: relative
  p, li
    padding: .1em 0
    .icon
      margin-right: .3em
      height: 1.3em
      vertical-align: middle
  a
    color: $grey-medium
    &:hover
      color: $grey-medium
      text-decoration: underline
  @media #{$small-only}
    margin-top: 1em
  @media #{$xlarge-up}
    @include grid-column(3)


.tile-status
  position: absolute
  top: 0
  bottom: 0
  left: 0
  width: 2.5em
  height: 100%
  border-top-left-radius: 4px
  border-bottom-left-radius: 4px
  .icon
    display: block
  .icon-status
    width: 1.1em
    height: 1.2em
    margin: .7em auto 1em
  .icon.push
    width: 1.4em
    height: 1.1em
    margin: -0.2em auto 0
  .icon.pull_request
    width: 1.1em
    height: 1.6em
    margin: -0.5em auto 0
  .icon.api
    margin: -0.4em 0.75em
  .icon--job
    @extend %absolute-center

.tile-author
  img
    width: 22px
    height: 22px
    margin-right: .4em
    vertical-align: top
    border-radius: 50%
  @media #{$medium-up}
    position: absolute
    bottom: 0

.tile--build
  .tile-main
    @media #{$small-only}
      h2
        line-height: $line-height-m
        margin-bottom: 1em
    @media #{$medium-up}
      white-space: nowrap
      overflow: hidden
      border-right: solid 1px $cream-dark
      &:after
        @include fadeOut(right, -90deg, $cream-light)
    @media #{$xlarge-up}
      @include grid-column(7)
  .tile-additional
    p
      white-space: nowrap
    @media #{$xlarge-up}
      @include grid-column(5)
  .icon.api
    margin: -0.2em 0.75em

p.tile-single-line
  padding: .7em 0
  .icon--code
    width: 1.3em
    height: 1.1em
