@import '../../scss/styles.scss';

@layer payload-default {
  .query-inspector {
    --string-color: var(--color-success-450);
    --number-color: var(--color-warning-450);
    display: flex;
    gap: calc(var(--base) * 2);
    align-items: flex-start;

    ul {
      padding-left: calc(var(--base) * 1);
    }

    &--fullscreen {
      padding-left: 0;
      .query-inspector__configuration {
        display: none;
      }
    }

    &__configuration {
      margin-top: calc(var(--base) * 2);
      width: 60%;
      position: sticky;
      top: var(--base);
    }

    &__api-url {
      margin-bottom: calc(var(--base) * 1.5);

      a {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        text-decoration: none;

        &:hover,
        &:focus-visible {
          text-decoration: underline;
        }
      }
    }

    &__form-fields {
      display: flex;
      flex-direction: column;
      gap: var(--base);
    }

    &__label {
      color: var(--theme-elevation-400);
    }

    &__filter-query-checkboxes {
      display: flex;
      gap: var(--base);
    }

    &__results-wrapper {
      font-family: var(--font-mono);
      width: 100%;
      ul {
        margin: 0;
      }
      li {
        list-style: none;
      }
    }

    &__toggle-fullscreen-button-container {
      position: sticky;
      top: 0;
      z-index: 1;

      @include mid-break {
        display: none;
      }
    }

    &__toggle-fullscreen-button {
      position: absolute;
      right: calc(var(--base) * 0.5);
      top: calc(var(--base) * 0.5);
      padding: calc(var(--base) * 0.25);
      background-color: var(--theme-elevation-0);
      cursor: pointer;
      z-index: 1;
      margin: 0;
      border: 0;
      border-radius: 3px;
      color: var(--theme-elevation-300);
      &:hover {
        color: var(--theme-elevation-700);
      }
    }

    &__results {
      padding-top: calc(var(--base) * 0.5);
      padding-left: calc(var(--base) * 0.5);
      padding-bottom: calc(var(--base) * 0.5);
      background-color: var(--theme-elevation-50);
      overflow: auto;
      min-height: 100vh;
    }

    @include mid-break {
      flex-direction: column;
      padding-left: 0;

      .query-inspector__configuration {
        position: relative;
        width: 100%;
        top: 0;
        padding-inline-end: var(--gutter-h);
      }
    }
  }
}
