/**
 * Deploy boards
*/
.deploy-board {
  background-color: $gray-light;
  min-height: 20px;

  > .loading-container,
  > .deploy-board-empty,
  > .deploy-board-information {
    padding: 10px;
  }

  > .deploy-board-information {
    display: flex;
    justify-content: space-between;

    .deploy-board-status {
      order: 1;
      display: flex;
      width: 70px;
      flex-wrap: wrap;
      justify-content: center;
      margin: 20px 0 20px 5px;
    }

    .deploy-board-instances {
      order: 2;
      margin-left: 20px;
      width: 100%;
    }

    .deploy-board-instances-text {
      font-size: 12px;
    }

    .deploy-board-instances-container {
      margin-top: -8px;
    }

    .deploy-board-actions {
      order: 3;
      align-self: center;
      min-width: 150px;
      margin-left: 10px;
    }

    &.deploy-board-error-message {
      justify-content: center;
    }

    .deploy-board-empty-state-svg {
      order: 1;
      width: 90px;
      margin: auto 0 auto 20px;
    }

    .deploy-board-empty-state-text {
      order: 2;
      flex-wrap: wrap;
      margin: auto auto 15px 0;

    }

    .deploy-board-empty-state-title {
      order: 1;
      font-size: 17px;
      line-height: 40px;
    }
  }
}

.deploy-board-instance {
  width: 15px;
  height: 15px;
  border-radius: 3px;
  border-width: 1px;
  border-style: solid;
  margin: 1px;
  display: flex;
  justify-content: center;
  align-items: center;

  &-running {
    background-color: $green-100;
    border-color: $green-400;

    &:hover {
      background-color: $green-300;
      border-color: $green-500;
    }
  }

  &-succeeded {
    background-color: $green-50;
    border-color: $green-400;
  }

  &-failed,
  &-unknown {
    background-color: $red-200;
    border-color: $red-500;
  }

  &-pending {
    background-color: $white-light;
    border-color: $border-color;
  }

  &.deploy-board-instance-canary {
    &::after {
      width: 7px;
      height: 7px;
      border: 1px solid $white-light;
      background-color: $orange-300;
      border-radius: 50%;
      content: '';
    }
  }
}

.deploy-board-icon {
  display: none;

  @include media-breakpoint-up(md) {
    float: left;
    display: block;
  }

  i {
    cursor: pointer;
    color: $layout-link-gray;
    padding-right: 10px;
  }
}

.alert-dropdown-button {
  margin-left: $btn-side-margin;

  .dropdown.open & {
    background: $white-normal;
    outline: 0;
  }

  svg {
    margin: 0;

    + svg {
      margin-left: -$gl-padding-4;
    }

    &.chevron {
      color: $gl-text-color-secondary;
    }
  }
}

.alert-dropdown-menu {
  right: 0;
  left: auto;
  z-index: $zindex-popover + 5; // must be higher than graph flag popover
}

.alert-error-message {
  color: $red-500;
  vertical-align: middle;
}

.alert-current-setting {
  color: $gl-text-color-disabled;
  vertical-align: middle;
}

.alert-form {
  padding: $gl-padding $gl-padding $gl-padding-8;

  label {
    font-weight: normal;
  }

  .btn-group,
  .action-group {
    display: flex;

    .btn {
      flex: 1 auto;
      box-shadow: none;
    }
  }
}

.canary-deployment-callout {
  border-bottom: 1px solid $border-white-normal;
  display: flex;

  @include media-breakpoint-down(sm) {
    display: none;
  }

  &-lock {
    height: 82px;
    width: 92px;
  }

  &-message {
    max-width: 600px;
    color: $gray-700;
  }

  &-close {
    color: $gray-700;
    cursor: pointer;
  }

  &-button {
    border-color: $blue-500;
    color: $blue-500;

    &:not(:disabled):not(.disabled):active {
      background-color: $blue-200;
      border: 2px solid $blue-600;
      color: $blue-700;
      height: 34px;
      padding: 5px 9px;
    }

    &:focus {
      background-color: $blue-100;
      border: 2px solid $blue-500;
      box-shadow: 0 0 4px 1px $blue-200;
      color: $blue-600;
      height: 34px;
      padding: 5px 9px;
    }

    &:hover {
      background-color: $blue-100;
      border: 2px solid $blue-500;
      color: $blue-600;
      height: 34px;
      padding: 5px 9px;
    }
  }
}
