@import "_mixins/all"

#tools
  position: relative
  float: right
  top: 2px
  width: 600px

  & > a.menu-popup-button
    display: inline-block
    text-align: left
    margin-top: -27px
    color: #fff
    font-size: 13px
    padding: 3px 24px 2px 25px
    background-image: inline-image('icons/settings.svg'), inline-image('icons/dropdown-arrow-white.svg')
    background-size: 14px 14px, 8px 8px
    background-position: 6px 6px, right 9px center
    background-color: #a6adad
    background-repeat: no-repeat
    @include border-radius(4px)

    cursor: pointer
    float: right
    img
      width: 7px
      padding-left: 10px

  .menu
    z-index: 1000
    display: none
    position: absolute
    right: 0
    top: -3px
    width: 135px
    background-color: #a6adad
    @include border-bottom-radius(4px)
    a
      display: block
      color: #ffffff
      padding: 5px 25px 5px 25px
      &:hover:not(.disabled)
        background-color: #909393
      &:last-child
        @include border-bottom-radius(4px)
      &.disabled
        cursor: default
        color: $color-link-disabled

#code-climate
  a
    text-decoration: underline
    font-weight: bold

  img
    &#code-climate-logo
      float: right
      width: 150px
      margin-top: 5px
      margin-right: 10px

#actions
  float: right
  text-align: right

  li.restart-build a, li.restart-job a
    background-image: inline-image('icons/repeat.svg')

  li.cancel-build a, li.cancel-job a
    background-image: inline-image('icons/off.svg')

  li.download-log a
    background-image: inline-image('icons/download-log.svg')

  li.remove-log a
    background-image: inline-image('icons/delete-log.svg')

  li.code-climate a
    background-image: inline-image('icons/code-climate-icon.svg')

  li.icon
    span.loading
      background: inline-image('ui/round-spinner.svg') no-repeat
      background-size: 17px 17px
      display: inline-block
      height: 28px
      width: 4px
      position: relative
      top: -7px
      cursor: pointer
      color: #ffffff
      background-color: #5e869a
      text-align: center
      border-radius: 100px
      margin-left: 5px
      background-position: center center

    a
      text-indent: -9999px
      display: inline-block
      width: 28px
      height: 28px
      position: relative
      top: -7px
      cursor: pointer
      color: #fef4e9
      border-radius: 100px
      background-color: #5e869a
      background-size: 16px 16px
      background-position: center center
      background-repeat: no-repeat
      text-align: center
      margin-left: 5px

      img
        width: 16px
        height: 16px
        margin-top: 6px
        margin-left: 0px

      &:hover
        opacity: 1.0

      &.disabled
        opacity: 0.6
        display: none
        visibility: hidden

  ul
    margin-top: -27px

    li
      display: inline