@use "highlight";

html {
  font-size: 14px;
}

pre.sql {
  max-height: 400px;
  overflow: auto;
  background-color: rgb(var(--v-theme-surface));
  .v-tooltip & {
    line-height: 1.3;
    background-color: transparent;
    padding: 0;
  }
  white-space: pre-wrap;
  padding: 4px;
  code {
    display: block;
    background-color: initial !important;
    font-size: 90%;
    overflow: initial !important;
  }
}

.v-application a {
  color: rgb(var(--v-theme-primary));
}

.v-breadcrumbs-item--disabled .v-breadcrumbs-item--link {
  color: rgb(var(--v-theme-on-surface));
}

.v-table.superdense > .v-table__wrapper > table {
  tbody,
  thead,
  tfoot {
    th,
    td {
      padding: 0 0.3rem;
    }
  }
}

.v-table {
  td {
    white-space: nowrap;
  }
  th:not(.v-data-table__th--sorted) .v-data-table-header__sort-icon {
    display: none;
  }
}

tr:first-child th {
  &:not([rowspan="2"]) {
    border-left: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
  }
  &[rowspan="1"] {
    border-bottom: 0 !important;
  }
}

td {
  &:not(.query) {
    width: 1%;
  }
  &.query {
    overflow: hidden;
    max-width: 0;
    pre {
      overflow: hidden;
      text-overflow: ellipsis !important;
      white-space: nowrap;
      margin-bottom: 0;
      background-color: initial !important;
      code {
        display: initial;
      }
    }
  }
}

.event:hover .marker {
  fill: rgb(var(--v-theme-eventmarkerfill));
}

.v-theme--light {
  @include highlight.light;
}

.v-theme--dark {
  @include highlight.dark;
}

.powa-snackbars .v-overlay {
  top: initial;
  left: initial;
  bottom: 0;
  right: 0;
  padding-bottom: 0;
  padding-top: 0;
  position: relative;

  .v-overlay__content {
    position: relative;
  }
}

.v-card-item.bg-surface + .v-card-text {
  padding-top: 8px; // spacer * 2
}
