@import 'mixins_and_variables_and_functions';
@import './pipeline_mixins';

/**
 * Pipelines Bundle: Pipeline lists and Mini Pipelines
 */

.pipelines-container .top-area .nav-controls > .btn:last-child {
  float: none;
}

// Pipelines list
// Should affect pipelines table components rendered by:
// - app/assets/javascripts/commit/pipelines/pipelines_bundle.js

.pipelines {
  .badge {
    margin-bottom: 3px;
  }

  .pipeline-actions {
    min-width: 170px; //Guarantees buttons don't break in several lines.

    .btn-default {
      color: var(--gray-500, $gray-500);
    }

    .btn.btn-retry:hover,
    .btn.btn-retry:focus {
      border-color: $dropdown-toggle-active-border-color;
      background-color: $white-normal;
    }

    svg path {
      fill: var(--gray-500, $gray-500);
    }

    .dropdown-menu {
      max-height: $dropdown-max-height;
      overflow-y: auto;
    }

    .dropdown-toggle,
    .dropdown-menu {
      color: var(--gray-500, $gray-500);
    }

    .btn-group.open .btn-default {
      background-color: $white-normal;
      border-color: $border-white-normal;
    }

    .btn .text-center {
      display: inline;
    }

    .tooltip {
      white-space: nowrap;
    }
  }

  .pipeline-tags .label-container {
    white-space: normal;
  }

  .dark-mode-override {
    .gl-dark & {
      background-color: $white;
    }
  }
}

// Pipeline mini graph
.pipeline-mini-graph-stage-container {
  &:last-child {
    margin-right: 0;
  }

  &:not(:last-child) {
    &::after {
      content: '';
      border-bottom: 2px solid $gray-200;
      position: absolute;
      right: -4px;
      top: 11px;
      width: 4px;
    }
  }
}

// Action icons inside dropdowns:
// mini graph in pipelines table
// mini graph in MR widget pipeline
// mini graph in Commit widget pipeline
.mini-pipeline-graph-dropdown-menu {
  @include pipeline-graph-dropdown-menu();

  &::before,
  &::after {
    content: '';
    display: inline-block;
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    top: -6px;
    left: 50%;
    transform: translate(-50%, 0);
    border-width: 0 5px 6px;

    @include media-breakpoint-down(sm) {
      left: 100%;
      margin-left: -12px;
    }
  }

  &::before {
    border-width: 0 5px 5px;
    border-bottom-color: $border-color;
  }

  /**
   * Center dropdown menu in mini graph
   */
  .dropdown &.dropdown-menu {
    transform: translate(-80%, 0);

    @media (min-width: map-get($grid-breakpoints, md)) {
      transform: translate(-50%, 0);
      right: auto;
      left: 50%;
    }
  }
}