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

  > .loading-icon,
  > .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 0 5px;
    }

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

    .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-legend .legend-text {
    color: $gl-text-color;
    font-size: $gl-font-size-small;
    font-weight: $gl-font-weight-bold;
    line-height: $gl-line-height-14;
  }
}

.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-modal-message {
  margin-left: -1rem;
  margin-right: -3rem;
  margin-top: -1rem;
}

.alert-form {
  .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;
    }
  }
}
