// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

@import "../../../theme/theme.scss";

.graph-control {
  height: 100%;
  background-color: $backgroundColor3;
  grid-row: 2;
}

.cytoscape-wrap {
  position: relative;
  height: 100%;
  .navigator-container {
    position: absolute;
    top: -35px;
    left: 15px;
    background: $backgroundColor2;
    height: 120px;
    width: 155px;
    padding: 6px;
    border-radius: 5px;
    border: 1px solid $backgroundColor4;
    .graph-navigator {
      position: relative;
      height: 100%;
      width: 100%;
      overflow: hidden;
      background: $backgroundColor3;
      z-index: 0;
    }
  }
}

#header-1, #header-2 {
  padding-left: 12px !important;
  padding-bottom: 10px !important;
  // font-family: "Segoe UI" !important;
  font-size: 16px !important;
  color: $textColorLight2 !important;
  font-weight: bold;
  cursor: default;
  &:hover {
    color: $textColorLight2 !important;
    background: $backgroundColor2 !important;
  }
}

#header-2 {
  padding-top: 12px !important;
  margin-top: 12px !important;
  border-top: 1px solid $textColorLight2 !important;
}

.custom-context-menu {
  border: 0px solid transparent !important;
  border-radius: 0 !important;
  outline: none;
  min-width: 200px !important;
  padding: 0 !important;
}

.custom-menu-item {
  background: $backgroundColor3 !important;
  border: 0px solid transparent !important;
  padding: 10px 8px !important;
  outline: none;
  color: $textColorLight1 !important;
  font-family: $fontFamilyMain !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  border: 1px solid $backgroundColor2 !important;
  border-bottom: none !important;
  &:last-child {
    border-bottom: 1px solid $backgroundColor2 !important;
  }
  &:hover, &:focus {
    background: $highlightColor !important;
    color: $textColorDark1 !important;
    border: 1px solid $textColorDark1 !important;
    border-bottom: none !important;
    &:last-child {
      border-bottom: 1px solid $textColorDark1 !important;
    }
  }
  &:focus {
    border: 1px double $textColorLight1 !important;
    border-bottom: none !important;
    &:last-child {
      border-bottom: 1px solid $textColorLight1 !important;
    }
    outline: 3px solid transparent;
  }
}

.hide-context {
  .custom-context-menu {
    display: none !important;
  }
}

.description-container {
  max-height: 48px;
  overflow-y: auto;
  max-width: 400px;
}