
.branches
  .small-title
    margin: 1.5em 0 0.7em

.branch-row

  .avatar
    display: inline-block
    width: 16px
    height: 16px
    margin-right: .7em
    border-radius: 50%
    vertical-align: middle
    background-color: #E9EBEB

  @media #{$medium-up}
    display: flex
    justify-content: space-between
    & > div:first-of-type
      width: 30%
      padding-left: 1em
    & > div:nth-of-type(2)
      width: 20%
    & > div:nth-of-type(3)
      width: 20%
    // & > div:nth-of-type(4)
    //   width: 5%
    & > div:nth-of-type(4)
      width: 28%
  @media #{$large-up}
    & > div:nth-of-type(2)
      width: 21%
    & > div:nth-of-type(3)
      width: 21%
    // & > div:nth-of-type(4)
    //   width: 2em
    & > div:nth-of-type(4)
      width: 25%

  .row-last-build
    @media #{$medium-up}
      padding-left: 1em
      &:before
        content: "";
        display: block;
        width: 1px;
        background-color: #EFF0EC;
        position: absolute;
        height: 3.7em;
        margin-left: -1em;

// @todo refactor into dropup module
%dropup
  @media #{$medium-up}
    position: absolute
    display: none
    z-index: 5
    background-color: $white
    border-radius: 2px
    
    &:after,
    &:before
      content: ""
      position: absolute
      display: block
      width: 7px
      height: 7px
      left: 0
      right: 0
      margin: 0 auto
      transform: rotate(45deg)
    &:after
      background-color: $white
    .dropup-trigger:hover ~ &,
    .dropup-trigger:hover &,
    &:hover
      display: block

.dropup--blue
  @extend %dropup
  &:before
    background-color: $teal-dark
    bottom: -5px
  &:after
    bottom: -4px
  ul
    margin: 0
    padding: 0
    list-style-type: none
    text-align: center
  li
    display: inline-block
    margin: 2em 0
    background: $teal-dark
    border-radius: 2px
  a
    display: inline-block
    padding: 0.3em 0.5em
    color: $white
    text-decoration: none
    line-height: 1
  .icon-trigger path,
  .icon-eye path
    fill: $white
    
  @media #{$medium-up}
    width: 10em
    left: 0
    padding: .4em
    transform: translate(-42%, -170%)
    border: 1px solid $teal-dark
    li
      display: block
      margin: 0
      background-color: $white
      border-radius: 0
      cursor: pointer
    .icon-trigger path,
    .icon-eye path
      fill: #A7AEAE
    a
      display: block
      padding: 0.3em .5em 0.4em
      text-decoration: none
      color: $grey-dark
      line-height: 1.4
      &:hover
        color: $white
        background-color: $teal-dark
        .icon-trigger path,
        .icon-eye path
          fill: $white

  .dropup-item
    display: inline-block
    vertical-align: middle
  .no-link
    padding: .4em 0
    cursor: default

.dropup--status
  @extend %dropup
  right: 0
  margin: auto
  display: none
  &:after
    bottom: -3px
  &:before
    bottom: -4px
  .icon
    margin-right: 0
  @media #{$medium-up}
    top: -2.3em
    width: 5em
    padding: .1em .1em
    white-space: nowrap
    font-size: 14px;
    border: 1px solid $red-dark
    &:before
      background-color: $red-dark

.dropup-trigger
  padding: 1em 0
  path
    fill: $teal-dark

// @todo refactor to status-icon module
.status-icon
  .is-rotating
    width: 17px
    height: 19px
    line-height: 0.9
    text-align: center
    transform-origin: center center
    will-change: transform
    animation: rotation 3s infinite ease
    .circle
      display: inline-block
      vertical-align: middle
      width: 5px
      height: 5px
      border: solid 1px #bfb502
      border-radius: 50%
      transform-origin: center center

@keyframes rotation
  0%
    transform: rotateZ(0deg)
  45%, 55%
    transform: rotateZ(180deg)
  100%
    transform: rotateZ(360deg)

.is-relative
  position: relative

span.nobuilds-tigger,
a.nobuilds-tigger
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  height: 2em
  width: 11em
  margin: auto
  padding: 0.35em 0.5em 0.2em
  line-height: 1
  text-align: center
  border: 1px solid #E4E6E6
  border-radius: 2px
  background-color: #fff
  .icon-trigger
    height: 1.4em !important

a.nobuilds-tigger
  &:hover
    background: #A6ADAD
    color: white
    .icon-trigger svg path
      fill: #fff


