//*************
// DB
//*************
.dbdata {
  display: flex;
  flex-direction: column;
  position: absolute;
  align-items: flex-end;
  right: calc(100% + 30px);
  top: -10px;
  font-style: normal;
  padding: 4px;
  width: max-content;
  max-width: 250px;
}

.db {
  display: flex;
  flex-direction: column;
  background-color: $toplevel-background;

  .delete-col {
    color: $grey2;
    font-size: $code-font-size;

    .fa {
      &:hover {
        color: $white1;
        cursor: pointer;
      }
    }
  }

  &.db-count,
  &.db-liveVal {
    display: block;
    font-style: normal;

    padding: 4px;
    width: 100%;

    white-space: pre-wrap;
    word-break: break-all;
    word-wrap: break-word;
    font-size: $code-font-size * 0.85;
    color: $grey8;

    background-color: $toplevel-background;
    outline: 0.4px $grey2 dotted;
    margin: 5px;
  }
  &.db-liveVal {
    .title {
      padding-bottom: 3px;
      border-bottom: solid 1px;
      .label {
        display: none;

        &.show {
          display: inline;
        }
      }
    }
    .dbexample {
      .key {
        color: $grey8;
        padding: 5px 0px;
      }
      .value {
        padding-left: 15px;
      }
    }
  }

  &.migration-view {
    position: absolute;
    top: -12px;
    left: calc(#{"100% + 20px"});
    min-width: $toplevel-min-width;
    padding: 24px;
    border-color: $yellow;
    border-width: 1px;
    background-color: $black1;

    .dbtitle {
      .version {
        color: $yellow;
      }
    }

    .col {
      &.roll-fn {
        margin-top: 12px;
        flex-direction: column;

        .fn-title {
          font-size: 0.8rem;

          .varname {
            color: $grey2;
          }
        }
      }

      &.actions {
        margin-top: 25px;
        flex-wrap: nowrap;
        justify-content: space-around;

        button {
          padding: $spacing-medium;
          font-size: 10px;
          background-color: $black3;
          color: $yellow;
          border: 1px solid $yellow;
          text-transform: uppercase;

          &:disabled {
            color: $grey2;
            border-color: $grey2;
          }
        }
      }

      &.err {
        margin-top: 25px;
        font-size: 10px;
        color: lighten($red, 15%);
        font-style: italic;
      }
    }
  }

  .spec-header {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    color: $db-color;
    border-bottom-color: $db-color;

    &.lock:before {
      @include font-awesome($fa-lock);
      color: $lock-color;
    }

    &.unlock:before {
      @include font-awesome($fa-unlock);
      color: $unlock-color;
    }

    &.lock::before,
    &.unlock:before {
      position: absolute;
      top: -6px;
      left: -6px;
      font-size: 12px;
    }

    .toplevel-type {
      i.fa {
        margin-right: $spacing-small;
      }
    }

    .toplevel-name {
      div,
      span {
        display: inline-block;
      }

      .version {
        color: $grey2;
      }
    }

    .menu {
      display: inline-block;
    }
  }

  .col {
    display: flex;
    flex-direction: row;
    margin: 4px 8px;
    justify-content: flex-start;
    align-items: center;

    &.key {
      font-size: 10px;
      color: darken($grey8, 15%);
    }

    &.has-empty {
      margin-left: 17px;
    }

    .blankOr {
      cursor: text;
    }

    .name,
    .type {
      flex: 1;
      font-size: 10px;
      height: 15px;
      margin-left: 4px;
      margin-right: 4px;
      padding-left: 1ch;
      padding-right: 1ch;

      #search-container {
        font-size: 10px;
        height: 10px;
        margin-bottom: -1px;
        margin-left: -6px;
        min-width: calc(#{"100% + 12px"});
        padding-bottom: 5px;
      }

      &.blank {
        height: 15px;
      }

      .entry {
        background: transparent;
        // Don't center text-entry, it makes everything weird
        text-align: left;
      }
    }
  }

  .migration-view {
    @extend .default;
    position: absolute;
    width: max-content;
    left: calc(#{"100% + 6px"});
  }
}
