:root {
  --miso-ask-combo-section-padding: 2rem;
  --miso-ask-combo-section-spacing: 4rem;
  --miso-ask-combo-content-max-width: none; 
  --miso-ask-combo-content-padding: 2rem;
  --miso-ask-combo-content-spacing: 2rem;
  --miso-ask-combo-question-phrase-color: #a6a5bb; // TODO: -> --miso-hint-text-color
  --miso-ask-combo-related-resources-background: #fffaf5;
}

@media (max-width: 768px) {
  :root {
    --miso-ask-combo-section-padding: 1rem;
    --miso-ask-combo-content-padding: 0;
  }
}

miso-ask-combo,
.miso-ask-combo {
  &, * {
    box-sizing: border-box;
  }

  // general //
  miso-ask > hr {
    height: 1px;
    margin: var(--miso-ask-combo-content-spacing) 0;
    color: inherit;
    background-color: var(--miso-border-color-light);
    border: 0;
    opacity: 1;
  }
  .miso-feedback {
    margin: var(--miso-ask-combo-content-spacing) 0;
  }
  
  // section //
  .miso-ask-combo__section {
    padding: 0 var(--miso-ask-combo-section-padding);

    > miso-ask {
      max-width: var(--miso-ask-combo-content-max-width);
      margin: 0 auto;
    }
  }
  .miso-ask-combo__question-container,
  .miso-ask-combo__reasoning-container,
  .miso-ask-combo__answer-container,
  .miso-ask-combo__affiliation-container,
  .miso-ask-combo__sources-container,
  .miso-ask-combo__follow-up-questions-container,
  .miso-ask-combo__query-suggestions-container {
    padding: 0 var(--miso-ask-combo-content-padding);
  }
  .miso-ask-combo__follow-up {
    margin-top: var(--miso-ask-combo-content-spacing);

    .miso-ask-combo__answer-container > hr:first-child {
      margin: 0 calc(0px - var(--miso-ask-combo-content-padding)) var(--miso-ask-combo-content-spacing);
    }
    &:last-child {
      .miso-ask-combo__query-container[status~="initial"] {
        margin-bottom: calc(0px - var(--miso-search-box-padding) - var(--miso-search-box-line-height) * 0.5 - 1px);
      }
    }
  }
  .miso-ask-combo__query-suggestions-container + .miso-ask-combo__query-container {
    margin-top: var(--miso-ask-combo-section-spacing);
  }
  .miso-ask-combo__related-resources {
    background: var(--miso-ask-combo-related-resources-background);

    > miso-ask {
      padding-top: var(--miso-ask-combo-section-spacing);
    }
    .miso-banner {
      margin-top: 0;
    }
    miso-banner {
      padding-bottom: var(--miso-ask-combo-content-spacing);
    }
  }
  .miso-ask-combo__sources-container {
    margin-bottom: calc(var(--miso-search-box-padding) + var(--miso-search-box-font-size) * 0.5 + var(--miso-ask-combo-content-spacing));
  }
  .miso-ask-combo__bottom-spacing-container {
    height: var(--miso-ask-combo-section-spacing);
  }
  
  // phrase //
  .miso-ask-combo__phrase-inline {
    display: inline;
  }
  .miso-ask-combo__phrase {
    margin-top: var(--miso-ask-combo-content-spacing);
    margin-bottom: 0.5rem;
  }
  h3.miso-ask-combo__phrase {
    font-size: 1.2rem;
    font-weight: 600;
  }
  h2.miso-ask-combo__phrase {
    font-size: 1.5rem;
    font-weight: 700;
  }
  .miso-ask-combo__question-phrase {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--miso-ask-combo-question-phrase-color);
  }
  .miso-ask-combo__sources-phrase {
    margin-bottom: 1rem;
  }
  .miso-ask-combo__follow-up-questions-phrase,
  .miso-ask-combo__query-suggestions-phrase {
    margin-bottom: 1.25rem;
  }
  .miso-ask-combo__related-resources-phrase {
    margin-top: 0;
    margin-bottom: 0.5rem;
  }

  // related resources //
  .miso-ask-combo__follow-ups:not(:empty) + .miso-ask-combo__related-resources {
    min-height: 8rem;
  }
  .miso-ask-combo__related-resources {
    .miso-list__item {
      margin: 0 !important;
      border-radius: 0 !important;
      border: none !important;
      border-top: 1px solid var(--miso-border-color-light) !important;
      background-color: transparent !important;

      &:first-child {
        border-top: none !important;
      }
    }
    .miso-list__item-body {
      padding: var(--miso-ask-combo-content-spacing) 0 !important;
    }
  }
}