@import "@primer/css/support/variables/layout.scss";
@import "@primer/css/support/mixins/layout.scss";

.codeBlock {
  overflow-y: auto;
  margin-bottom: 1rem;
  line-height: 1.45;
  background-color: var(--color-canvas-subtle);
  font-size: 90%;

  code {
    background-color: transparent;
    padding: 0.5rem 0.5rem 1rem;
    max-width: calc(100vw - 2.5rem);

    @include breakpoint(lg) {
      max-width: 40vw;
    }
  }
}

.method {
  font-size: 80%;
}

.requestCodeBlock {
  max-height: 30vh;
  min-height: 120px;
}

.responseCodeBlock {
  min-height: 120px;
  max-height: 60vh;
}

.segmentedControl {
  padding: 0 !important;
  margin-bottom: 0.5rem !important;

  li + li {
    // Same as the Primer CSS selector for segmented control
    margin-top: -1px !important;
  }
}