.editorContainer {
  @apply hidden;
  @screen lg {
    @apply block px-6 pt-4 pb-2 border-b-2 border-stone-100 bg-stone-50;
  }
}

.editorHeader {
  @apply flex justify-between;
}

.queryHeader {
  @apply font-semibold text-lg pb-1;
}

.buttons {
  @apply flex text-sm;

  button {
    @apply py-0;
  }
}

.sampleQueryDir {
  @apply text-sm text-storm-200 ml-4 font-normal;

  button {
    @apply font-semibold;

    &:hover {
      @apply text-button-2;
    }

    &:focus {
      @apply outline-none widget-shadow-lightblue;
    }
  }
}

.caret {
  @apply text-lg text-primary mt-0.5 mr-4 ml-8;
}

.left {
  @apply flex;
}

.chev {
  @apply h-5 mt-1;

  &:focus {
    @apply outline-none widget-shadow-lightblue;
  }
}

.edit {
  @apply px-3 py-0 mx-4 h-6 w-20 border;
}

.editIcon {
  @apply hidden;
}

.editorButton {
  @apply w-full max-w-7xl relative;

  &:active {
    @apply outline-none widget-shadow-lightblue;
  }
}

.editorText {
  @apply py-3 pr-10 relative;

  &:hover {
    @apply bg-white rounded widget-shadow;

    .editIcon {
      @apply absolute block right-4 top-1.5;

      svg {
        @apply w-6 h-6;
      }
    }
  }
}

.err {
  @apply pt-0 mb-4;
}
