/** Component: API Call / Request / Response */

:root {
  --custom-api-call-gap: var(--strapi-spacing-4);
  --custom-api-call-heading-font-size: var(--strapi-font-size-sm);
  --custom-api-call-heading-font-weight: 700;
  --custom-api-call-heading-py: var(--strapi-spacing-2);
  --custom-api-call-heading-px: var(--strapi-spacing-4);
  --custom-api-call-radius: var(--strapi-spacing-2);
  --custom-api-call-response-heading-background-color: var(--strapi-neutral-200);
  --custom-api-call-response-content-background-color: var(--strapi-neutral-300);
  --custom-api-call-request-heading-background-color: var(--strapi-neutral-100);
  --custom-api-call-request-content-background-color: var(--strapi-neutral-150);
}

.api-call {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--custom-api-call-gap);
  margin-bottom: var(--custom-api-call-gap);

  &__request__content,
  &__request__heading,
  &__response__content,
  &__response__heading {
    background-color: var(--custom-api-call-background-color);
    color: var(--custom-api-call-color);
  }

  &__request,
  &__response {
    border-radius: var(--custom-api-call-radius);

    &__heading,
    &__content {
      *:last-child {
        margin-bottom: 0;
      }
    }

    &__heading {
      border-top-left-radius: var(--custom-api-call-radius);
      border-top-right-radius: var(--custom-api-call-radius);
      font-size: var(--custom-api-call-heading-font-size);
      font-weight: var(--custom-api-call-heading-font-weight);
      padding: var(--custom-api-call-heading-py) var(--custom-api-call-heading-px);
    }

    &__content {
      border-bottom-left-radius: var(--custom-api-call-radius);
      border-bottom-right-radius: var(--custom-api-call-radius);
      padding: var(--custom-api-call-content-py) var(--custom-api-call-content-px);
    }
  }

  &__request {
    &__heading {
      --custom-api-call-background-color: var(--custom-api-call-request-heading-background-color);
    }

    &__content {
      --custom-api-call-background-color: var(--custom-api-call-request-content-background-color);
      --custom-api-call-content-py: var(--custom-api-call-heading-px);
      --custom-api-call-content-px: var(--custom-api-call-heading-px);

      --custom-code-block-background-color: var(--custom-api-call-response-heading-background-color);

      --custom-code-background-color: var(--custom-api-call-response-heading-background-color);
      --custom-code-border-color: transparent;
      --custom-code-color: currentColor;
    }
  }

  &__response {
    &__heading {
      --custom-api-call-background-color: var(--custom-api-call-request-content-background-color);
    }

    &__content {
      --custom-api-call-background-color: var(--custom-api-call-request-content-background-color);

      --custom-code-block-background-color: var(--custom-api-call-response-content-background-color);
    }
  }

  .theme-code-block {
    border-radius: var(--custom-api-call-radius);
  }
}

/** Dark mode */
@include dark {
  --custom-api-call-color: var(--strapi-neutral-1000);

  --custom-api-call-request-heading-background-color: var(--strapi-neutral-300);
  --custom-api-call-request-content-background-color: var(--strapi-neutral-200);

  --custom-api-call-response-heading-background-color: var(--strapi-neutral-150);
  --custom-api-call-response-content-background-color: var(--strapi-neutral-100);

  .api-call {
    &__request {
      &__content {
        pre {
          --custom-code-block-background-color: var(--custom-api-call-response-heading-background-color);
        }
      }
    }

    &__response {
      &__content {
        pre {
          --custom-code-block-background-color: var(--custom-api-call-response-content-background-color);
        }
      }
    }
  }
}
