%icon
  display: inline-block
  background:
    size: 100%
    repeat: no-repeat

.icon
  width: 1em
  height: 1em
  @extend %icon

.icon-cal,
.icon--cal,
.icon-calendar
  background-image: inline-image('svg/finished-icon.svg')

.icon-clock,
.icon--clock
  background-image: inline-image('svg/duration-icon.svg')

.icon-clock-dark,
.icon--clock-dark
  background-image: inline-image('svg/duration-icon-dark2.svg')

.icon-github,
.icon--github
  background-image: inline-image('svg/commit-icon.svg')

.icon--github-circle
  background-image: inline-image('icons/github.svg')

.icon-branch,
.icon--branch
  background-image: inline-image('dashboard/branch.svg')

.icon-hash,
.icon--hash
  background-image: inline-image('svg/build-number-icon.svg')

.icon-hash-dark,
.icon--hash-dark
  background-image: inline-image('svg/build-number-icon-dark2.svg')

.icon-cog,
.icon--cog
  background-image: inline-image('svg/settings_gray.svg')
  &:hover
    background-image: inline-image('svg/settings_teal.svg')

.icon-cog-light
  background-image: inline-image('icons/settings.svg')

%icon-star-grey
  background-image: inline-image('svg/icon-star-grey.svg')
%icon-star-yellow
  background-image: inline-image('svg/icon-star-yellow.svg')
%icon-star-red
  background-image: inline-image('svg/icon-star-red.svg')
%icon-star-green
  background-image: inline-image('svg/icon-star-green.svg')

.icon-status.errored
  background-image: inline-image('dashboard/status-errored.svg')

.icon-status.failed
  background-image: inline-image('dashboard/status-failed.svg')

.icon-status.canceled
  background-image: inline-image('dashboard/status-cancelled.svg')

.icon-status.passed
  background-image: inline-image('dashboard/status-passed.svg')

.icon-status.started,
.icon-status.queued,
.icon-status.booting,
.icon-status.received,
.icon-status.created,
  background-image: inline-image('dashboard/status-pending.svg')

.icon.push
  background-image: inline-image('svg/push-icon.svg')

.icon.pull_request
  background-image: inline-image('svg/pull-request-icon.svg')

.icon--grey.push,
.icon-push
  background-image: inline-image('svg/icon-request-push.svg')
.icon--grey.pull_request,
.icon-pull_request
  background-image: inline-image('svg/icon-request-pull.svg')

.icon-api,
.icon.api
  background-image: inline-image('svg/api-white.svg')
.icon--grey.api
  background-image: inline-image('svg/api-light-grey.svg')

.icon-lock
  background-image: inline-image('dashboard/private-icon.svg')

.icon-burger
  background-image: inline-image('dashboard/burger.svg')
  &:hover
    background-image: inline-image('dashboard/burger-hover.svg')

.icon--cancel
  background-image: inline-image('svg/off.svg')

.icon-sync,
.icon--trigger
  background-image: inline-image('icons/sync-account-icon.svg')

.icon--downloadLog
  background-image: inline-image('icons/download-log-icon.svg')
.icon--removeLog
  background-image: inline-image('icons/remove-log-icon.svg')
.icon--down
  background-image: inline-image('icons/end-of-log-icon.svg')
.icon--codeclimate
  background-image: inline-image('icons/code-climate-icon.svg')


.icon--env
  background-image: inline-image('svg/icon-environment-dark2.svg')
.icon--job.failed,
.icon--job.rejected
  background-image: inline-image('svg/icon-job-failed.svg')
.icon--job.passed,
.icon--job.accepted
  background-image: inline-image('svg/icon-job-passed.svg')
.icon--job.errored
  background-image: inline-image('svg/icon-job-errored.svg')
.icon--job.started,
.icon--job.queued,
.icon--job.booting,
.icon--job.received,
.icon--job.created,
  background-image: inline-image('svg/icon-job-started.svg')
.icon--job.canceled
  background-image: inline-image('svg/icon-job-canceled.svg')

.icon--lang
  background-image: inline-image('svg/icon-language-dark2.svg')
.icon--linux,
.icon.linux
  background-image: inline-image('svg/icon-linux-dark2.svg')
.icon--mac,
.icon.mac
.icon.osx
  background-image: inline-image('svg/icon-mac-dark2.svg')
.icon--eye
  background-image: inline-image('svg/icon-showmore.svg')
.icon--question
  background-image: inline-image('svg/icon-help.svg')
  &:hover
    background-image: inline-image('svg/icon-help-hover.svg')

.icon-tab-arrow
  background-image: inline-image('svg/icon-tab-arrow.svg')
.icon--search
  background-image: inline-image('svg/search.svg')

.icon--dismiss-yellow
  background-image: inline-image('svg/icon-warning-dismiss.svg')
.icon--dismiss-green
  background-image: inline-image('svg/icon-success-dismiss.svg')
.icon--dismiss-red
  background-image: inline-image('svg/icon-error-dismiss.svg')

.icon--dismiss-grey
  background-image: inline-image('svg/dismiss.svg')

%icon-hook-on
  background-image: inline-image('svg/hooks-on.svg')
%icon-hook-off
  background-image: inline-image('svg/hooks-off.svg')

.icon-delete
  background-image: inline-image('svg/delete.svg')
  
.icon-delete-hover
  background-image: inline-image('svg/delete-hover.svg')

.icon-delete-disabled
  background-image: inline-image('svg/delete-disabled.svg')

.icon-key
  background-image: inline-image('svg/key.svg')

.icon-fingerprint
  background-image: inline-image('svg/fingerprint.svg')


.icon-line-cal
  @extend %icon
  background-image: inline-image('line-icons/icon-cal.svg')
.icon-line-build
  @extend %icon
  background-image: inline-image('line-icons/icon-build.svg')
.icon-line-commit
  @extend %icon
  background-image: inline-image('line-icons/icon-commit.svg')

.icon--plus
  &:after
    content: "+"
    font-size: 16px
    color: #A6ADAD

.icon-arrow-down
  width        : 0
  height       : 0
  display      : inline-block
  padding-top  : 2px
  margin-left  : 5px
  border-left  : 5px solid transparent
  border-right : 5px solid transparent
  border-top   : 5px solid $teal-dark

.icon-flag
  background-image: inline-image('svg/notice-flag.svg')

.icon-receiving
  margin: 0.3rem 0.5rem;
  display: inline-block;
  i
    width: 4px
    height: 4px
    border-radius: 50%
    display: inline-block
    background-color: $start-bg-color
    transform-origin: center center
    animation: bubbleScale 1.2s infinite linear
  i:nth-of-type(2)
    animation-delay: 0.35s
  i:nth-of-type(3)
    animation-delay: 0.7s

.icon-owner-receiving
  @extend .icon-receiving
  margin-right: 0.5em !important
  i
    width: 5px
    height: 5px
    background-color: #ECCE4B

@keyframes bubbleScale
  0%, 80%, 100%
    transform: scale(0)

  40%
    transform: scale(1.0)

