@import "variables";

.github-PushPullMenuView {

  &-selector {
    display: flex;
    align-items: center;
  }

  &-item {
    margin: @component-padding / 2;
    &.is-flexible {
      flex: 1;
    }
  }

  // margin not needed, .github-PushPullMenuView-item takes care of the spacing
  .icon-mark-github::before {
    margin-right: 0;
    color: @text-color-subtle;
  }

  // Make Pull/Push buttons take up available space
  // since they're more important than Fetch
  .btn-group {
    display: flex;
    .btn {
      flex: 1;
    }
  }

  // Removes flickering of the toolip if there is an icon inside
  .btn-tooltip-wrapper .icon {
    pointer-events: none;
  }

  &-message {
    max-height: 4.8em;
    margin: @component-padding / 2;
    padding: @component-padding / 2;
    line-height: 1.4;
    white-space: normal;
    text-align: left;
    overflow-y: auto;
    border: 1px solid @base-border-color;
    border-radius: @component-border-radius;
    background-color: @inset-panel-background-color;

    &:empty {
      display: none;
    }
  }


  // Progress indicator
  &.in-progress {
    .icon-mark-github {
      position: relative;
      color: @text-color;
      &:before {
        color: inherit;
      }
      &:after {
        content: "";
        position: absolute;
        top: -4px;
        left: -4px;
        width: 24px;
        height: 24px;
        border-top: 2px dotted;
        border-right: 2px dotted;
        border-bottom: 2px dotted transparent;
        border-radius: 16px;

        // To limit CPU usage, the animation plays for some time at normal speed,
        // then slows down frame-rate for a while and stops at some point
        -webkit-animation: github-PushPullMenuView-animation 2s linear 12,
                           github-PushPullMenuView-animation 4s 24s steps(12) 100;
      }
    }
  }
}


// Animations
@-webkit-keyframes github-PushPullMenuView-animation {
  100% { transform: rotate(360deg); }
}
