$primary-color: var(--primary);
$secondary-color: var(--secondary);
$card-color: var(--panel-background-color);

$white-color: #fff;
$muted-color: rgba(255, 255, 255, 0.6);
$muted-border-color: rgba(255, 255, 255, 0.1);
$header-color: #4a506a;
$card-spacing: 16px;

$body-color-odd: var(--hover-color);
$body-color-even: var(--active-color);

.modal-body-custom {
  padding: 1rem 1rem 0 1rem !important;
}

.db-relationship-editor-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  position: relative;

  .db-relationship-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: var(--primary);
    z-index: 9999;
    color: var(--text-color);
    font-size: 20px;
  }

  .db-relationship-editor {
    position: relative;
    border: var(--relationship-border);
    border-radius: 4px;
    & {
      border-radius: 4px;
      background-color: $card-color;
      flex: 1;
      width: 100%;
      height: calc(100% - 58px);
      padding: $card-spacing;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .db-relationship-editor-tip {
      margin: auto;
      text-align: center;
    }

    .db-relationship-editor-body {
      flex: 1;
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: flex-start;
      overflow: auto;
      position: relative;
    }
  }

  &.draging .db-relationship-editor {
    border-color: var(--accent);
  }
}

.leader-line {
  z-index: 1041;

  &.db-relationship-line {
    path {
      pointer-events: all !important;
      cursor: pointer;

      &:hover {
        stroke: $white-color !important;
      }
    }
  }
}

.di-context-menu {
  display: none !important;

  &.show {
    display: block !important;
    position: fixed;
    z-index: 1052;
  }

  .dropdown-menu {
    display: block;
  }
}

.db-relationship-container {
  display: flex;
  flex-wrap: nowrap;
  min-width: 100vw;
  min-height: 100vh;
}
