@import "variables";

.github-StatusBarTileController {
  display: inline-block;

  &-tooltipMenu {
    &.tooltip {
      width: 400px; // Same as the github-Panel
      padding-left: @component-padding;
      padding-right: @component-padding;
      box-sizing: border-box;
    }
    .tooltip-inner.tooltip-inner {
      padding: @component-padding / 2;
      background-color: @tool-panel-background-color;
      border: 1px solid @base-border-color;
      box-shadow: 0 4px 8px hsla(0, 0, 0, .1);
      color: @text-color;
    }
    &.top .tooltip-arrow.tooltip-arrow {
      width: @component-padding;
      height: @component-padding;
      border-width: 0 0 1px 1px;
      border-color: @base-border-color;
      background-color: @tool-panel-background-color;
      border-bottom-right-radius: 2px;
      transform: rotate(-45deg);
    }
  }

  & > .inline-block:hover {
    text-decoration: underline;
    cursor: default;
  }

  // Sync animation
  .icon-sync::before {
    @keyframes github-StatusBarSync-animation {
      100% { transform: rotate(360deg); }
    }
    animation: github-StatusBarSync-animation 2s linear 30; // limit to 1min in case something gets stuck
  }

  // Merge conflict icon
  .github-ChangedFilesCount .icon-alert {
    margin-left: @component-padding / 2;
  }

  .github-branch-detached {
    color: @text-color-subtle;
    font-style: italic;
  }
}
