fleet/frontend/pages/queries/QueryPage/_styles.scss

.query-page {
  .body-wrap {
    min-width: 0;
  }
  &__results {
    display: flex;
    flex-grow: 1;
    position: relative;
    min-height: 400px;
  }

  &__warning {
    padding: $pad-medium;
    font-size: $x-small;
    color: $core-fleet-black;
    background-color: #fff0b9;
    border: 1px solid #f2c94c;
    border-radius: $border-radius;

    p {
      margin: 0;
      line-height: 20px;

      a {
        color: $core-vibrant-blue;
        font-weight: 700;
        text-decoration: none;

        img {
          vertical-align: text-bottom;
          position: relative;
          top: 1px;
          left: -3px;
          transform: scale(0.5);
        }
      }
    }
  }

  &__observer-query-view {
    width: 90%;
    max-width: 1060px;
    margin: 0 auto;
    color: $core-fleet-black;

    h1 {
      font-size: $medium;
    }
    p {
      font-size: $x-small;
    }
  }

  &__observer-query-details {
    padding: 0 2rem;

    h1 {
      margin: $pad-large 0;
      font-size: $large;
    }

    p {
      margin-bottom: $pad-small;
    }

    .sql-button {
      color: $core-vibrant-blue;
      font-weight: $bold;
      font-size: $x-small;
    }
  }

  &__query-preview {
    margin-top: 15px;

    .fleet-ace__label {
      display: none;
    }
  }

  &__back-link {
    font-size: $x-small;
    color: $core-vibrant-blue;
    font-weight: $bold;
    text-decoration: none;

    #back-chevron {
      width: 16px;
      margin-right: $pad-small;
      vertical-align: text-top;
    }
  }

  .ace_content {
    min-height: 500px !important;
  }

  &__target-selectors {
    margin-top: 24px;
    margin-bottom: 24px;
    max-width: 980px;

    h3 {
      margin-top: 24px;
      margin-bottom: 8px;
      font-size: $x-small;
    }
    .selector-block {
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .target-pill-selector {
        padding: $pad-small;
        background-color: $core-white;
        border: none;
        box-shadow: inset 0 0 0 1px $ui-fleet-black-25;
        border-radius: 6px;
        cursor: pointer;
        display: flex;
        align-items: center;
        margin-bottom: $pad-small;

        &:not(:last-of-type) {
          margin-right: $pad-small;
        }
        img {
          max-width: 12px;
        }
        .plus-icon {
          padding-right: 3px;
        }
        .selector-name {
          margin-left: 8px;
          font-size: $x-small;
          flex: 1;
        }
        .selector-count {
          margin-left: 8px;
          font-size: $xxx-small;
          font-weight: 700;
        }
        &[data-selected="true"] {
          background-color: $ui-vibrant-blue-10;
          box-shadow: inset 0 0 0 1px $core-vibrant-blue;
        }
      }
    }
  }
  &__targets-button-wrap {
    margin-top: 30px;
    display: flex;
    align-items: center;

    button:not(:first-of-type) {
      margin-left: 16px;
    }
  }
  &__targets-total-count {
    margin-left: 16px;
    font-size: $x-small;
    display: flex;
    align-items: center;
    
    .loading-spinner {
      margin-left: -12px;
    }

    span {
      font-weight: 700;
    }

    .icon-tooltip {
      margin-left: $pad-small;
    }
  }
  &__page-loading {
    .loading-spinner {
      margin: $pad-large 0 0;
    }
  }
  &__page-error {
    h4 {
      margin: 0;
      margin-top: 28px;
      margin-left: -7px;
      font-size: $small;

      img {
        transform: scale(0.5);
        vertical-align: middle;
        position: relative;
        top: -2px;
      }
    }
    p {
      margin: 0;
      margin-top: $pad-medium;
      font-size: $x-small;

      a {
        color: $core-vibrant-blue;
        font-weight: 700;
        text-decoration: none;

        img {
          vertical-align: text-bottom;
          position: relative;
          top: 1px;
          left: -3px;
          transform: scale(0.5);
        }
      }
    }
  }
}