$widget-height: 400px;

$background-color: #ffffff;
$background-pattern-color: #e2e8f0;
$foreground-color: #fafafa;
$content-color: #032830;
$emerald-color: #10b981;
$amber-color: #eab308;
$rose-color: #f43f5e;
$sky-color: #0ea5e9;
$violet-color: #8b5cf6;
$fuchsia-color: #d946ef;
$stone-color: #a8a29e;
$white-color: #ffffff;
$light-color: #e7e5e4;

.dspy-inspector {
  font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
    "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
  font-synthesis: none !important;
  text-rendering: optimizelegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-size-adjust: 100% !important;
  -webkit-tap-highlight-color: transparent !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  color: $content-color !important;
  background-color: $background-color !important;
  background-image: radial-gradient($background-pattern-color 1.55px, $background-color 1.6px) !important;
  background-size: 24px 24px !important;
  border-radius: 0em !important;
  height: $widget-height !important;
  max-height: $widget-height !important;
  min-height: $widget-height !important;
  box-sizing: border-box !important;
  position: relative !important;

  h1,
  h2,
  h3,
  h4,
  h5,
  p {
    margin: 0em !important;
    padding: 0em !important;
  }

  /* VERSION TAG */
  &::after {
    position: absolute;
    bottom: 1em;
    left: 1em;
    content: "BETA";
    z-index: 30;
    font-size: 1em;
    font-weight: 400;
    color: $white-color;
    background-color: $violet-color;
    opacity: 75%;
    margin: 0em;
    padding: 0em 0.5em 0.25em 0.5em;
    line-height: 1.5em;
    border-radius: 0.3em;
  }
  /* ----------- */

  /* OVERRIDES */
  // ipycytoscape widget
  .custom-widget {
    background-color: transparent !important;
    width: 100% !important;
    height: 100% !important;
    resize: none !important;
    z-index: 10 !important;

    &:hover {
      border: none;
    }
  }
  /* --------- */

  &-panel {
    width: 40% !important;
    height: 90% !important;
    overflow: hidden !important;
    z-index: 20 !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 1% !important;
    background-color: $foreground-color !important;
    border-radius: 1em !important;
    outline: 1px solid $light-color !important;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
    margin: 0em !important;
    padding: 1em 1em 0em 1em !important;
    display: grid !important;
    grid-template-rows: 93% 7% !important;

    &-info {
      width: 100% !important;
      height: 100% !important;
      overflow-x: hidden !important;
      overflow-y: scroll !important;

      &-node {
        width: 100%;
        height: auto;
        padding-bottom: 1em;
        position: sticky;
        top: 0;
        background-color: $foreground-color;
        border-bottom: 2px solid $light-color;

        &-title {
          width: 100%;
          height: auto;

          h1 {
            font-size: 1.5em;
            font-weight: 700;
          }
        }

        &-subtitle {
          width: 100%;
          height: auto;

          h2 {
            font-size: 1.25em;
            font-weight: 500;
          }
        }

        &-tags {
          width: 100%;
          height: auto;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: flex-start;
          align-items: center;
          column-gap: 0.75em;

          div {
            span:first-child {
              font-size: 1em;
              font-weight: 400;
              color: $content-color;
              background-color: lighten($light-color, 2.5);
              margin: 0em;
              padding: 0em 0.5em 0.25em 0.5em;
              line-height: 1.5em;
              border-top-left-radius: 0.3em;
              border-bottom-left-radius: 0.3em;
            }

            span:last-child {
              font-size: 1em;
              font-weight: 400;
              color: $white-color;
              margin: 0em;
              padding: 0em 0.5em 0.25em 0.5em;
              line-height: 1.5em;
              border-top-right-radius: 0.3em;
              border-bottom-right-radius: 0.3em;

              &[data-type-parameter] {
                background-color: $stone-color;
              }

              &[data-type-predictor] {
                background-color: $emerald-color;
              }

              &[data-type-retriever] {
                background-color: $amber-color;
              }

              &[data-type-program] {
                background-color: $violet-color;
              }

              &[data-variable] {
                background-color: $sky-color;
              }
            }
          }
        }
      }

      &-table {
        width: 100%;
        height: auto;
        background-color: $foreground-color;

        dl {
          padding: 0em;
          margin: 0em;

          div {
            border-top: 1px solid $light-color;
            padding: 1.5em 0.75em;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 1em;

            &:first-child {
              border-top: none;
            }

            &:nth-child(2n) {
              background-color: lighten($light-color, 5);
            }

            &:last-child {
              border-bottom-left-radius: 0.6em;
              border-bottom-right-radius: 0.6em;
            }

            dt {
              font-size: 1em;
              font-weight: 600;
              line-height: 1.5em;
              color: $content-color;
            }

            dd {
              margin: 0;
              font-size: 1em;
              font-weight: 400;
              line-height: 1.5em;
              color: $content-color;
              grid-column: span 2 / span 2;
            }
          }
        }
      }
    }

    &-actions {
      width: fit-content !important;
      height: 100% !important;
      margin: 0em !important;
      padding: 0em !important;
      box-sizing: border-box !important;
      margin-left: auto !important;
      transform: translate(1.1em, 0.15em) !important;
      border-top-left-radius: 0.3em !important;

      button {
        margin: 0em !important;
        padding: 0em 10px !important;
        color: $content-color !important;
        background-color: $foreground-color !important;
        box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.1) !important;
        border: none !important;
        display: inline-block;
        box-sizing: border-box !important;

        &:focus:enabled {
          outline: none !important;
        }

        &.mod-danger {
          color: $white-color !important;
          background-color: $rose-color !important;
        }
      }
    }
  }
}
