.mobile-nav
  height: 50px
  width: 100%
  background: $white
  border-top: 1px solid $border
  border-bottom: 1px solid $border
  display: flex
  position: relative
  align-items: center
  justify-content: center
  z-index: 99

  .mobile-nav-logo
    width: 120px
    height: auto
    margin: 0 auto
    padding-top: 5px

  i
    position: absolute
    font-size: 26px
    right: 22px
    top: 6px

.mobile-build-item, .mobile-build-top-container
  position: relative

  .mobile-avatar-img
    display: block
    width: 32px
    height: 32px
    border-radius: 50%
    margin: 0 auto

  .mobile-build-item-body

    span
      font-size: 12px
      text-align: left

      &.name
        color: $color-secondary

      &.bold
        font-size: 14px
        color: #4D575E

      &.commit-message
        color: #4D575E
        font-size: 11px
        height: 30px

      &.data-label
        padding: 2px 5px
        width: 100px
        text-align: center
        float: left
        display: block

  span

    &.build-time
      text-align: center
      font-size: 11px

  .icon

    &.circle
      display: block
      width: 27px !important
      height: 27px !important
      margin: 5px auto !important

      i
        padding: 0
        margin: -37px 0 0 1px
        font-size: 14px
        color: $black

  .build-icon
    width: 20px
    height: 20px
    display: block
    position: absolute
    top: 55px
    left: 10px

    img
      width: 20px
      height: 20px
      display: block

.mobile-build-top-container
  padding: 10px
  position: relative
  margin-top: 10px

  .columns
    background: $white
    border: 1px solid $border
    border-radius: 6px
    box-shadow: 1px 2px 30px 0 rgba(#4259E7, 0.2)

    &.green
      border-top: 4px solid $green
      border-left: 0

    &.yellow
      border-top: 4px solid $yellow
      -webkit-animation: pulsate 3s infinite ease-in-out
      animation: pulsate 3s infinite ease-in-out
      border-left: 0

    &.red
      border-top: 4px solid $red
      border-left: 0

  span
    display: block

    &.commit-message
      font-size: 12px
      color: $color

    &.build-icon
      position: absolute
      left: 18px
      bottom: 30px

  .icon

    &.circle

      i
        margin: 1px 0 0 7px

.mobile-switch-view
  background: $white
  display: flex
  align-items: center
  justify-content: center
  height: 50px

  button
    height: 30px
    display: flex
    align-items: center
    justify-content: center
    width: 200px
    margin: 10px auto
    color: $color
    font-size: 12px
    border-radius: 4px
    border: 1px solid $border
    outline: none
    font-weight: $weight-semibold
    background-image: linear-gradient(0deg, #F2F4F7 0%, #FFFFFF 100%)

    i
      font-size: 16px
      margin-left: 5px