@use "sass:color";
@use "variables" as *;

$connector-height: 12px;
$connector-line: 2px solid color.adjust($line-color, $lightness: -10%);

.bg-secondary-light {
  background-color: $gray-light !important;
}

.plan-container {
  font-family: $font-family-sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  .menu {
    position: absolute;
    z-index: 1;
    right: 0;

    &-hidden {

      ul,
      h3 {
        display: none;
      }
    }
  }

  .grab-bing {
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: -o-grab;
    cursor: grab;
  }

  .grab-bing:active {
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: -o-grabbing;
    cursor: grabbing;
  }

  .text-secondary {
    color: $gray !important;
  }

  .cursor-help {
    cursor: help;
  }

  pre {
    overflow: initial;
  }
}

.plan-stats {
  font-size: $font-size-base;

  .stat-dropdown-container {
    border: 1px solid $line-color;
    padding: $padding-lg;
    background-color: #fff;
    position: absolute;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.3);
    border-radius: $border-radius-base;
    margin-bottom: $padding-xl;
    z-index: 6;
    right: 0;
    width: 300px;
    max-height: 70vh;
    overflow: auto;

    h3 {
      font-size: $font-size-lg;
      width: 93%;
      text-align: left;
      border-bottom: 1px solid $line-color;
      padding-bottom: $padding-base;
      margin-bottom: $padding-lg;
    }
  }
}

.tippy-popper .tippy-tooltip {
  text-align: left;
}

.tippy-popper .text-secondary {
  color: inherit !important;
}

.splitpanes {
  &__pane {
    transition: none !important;
  }
}

.no-focus-outline:focus {
  outline: none;
}

.table-nonfluid {
  width: auto !important;
}

.more-info[title] {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: $gray;
  cursor: help;
}

foreignObject {
  overflow: visible;
}
