import { css } from 'styled-components';

export const responsePanelColors = css`
  /**
  * @tokens Response Panel Common
  */

  --panel-response-heading-padding: 10px 20px;
  --panel-response-heading-font-size: var(--font-size-base);
  --panel-response-heading-line-height: var(--line-height-sm);
  --panel-response-heading-font-weight: var(--font-weight-bold);
  --panel-response-heading-text-color: var(--text-color-primary);

  --panel-response-body-text-color: var(--text-color-secondary);

  /**
  * @tokens Response Panel Success colors
  * @presenter Color
  */
  --panel-response-success-border-color: var(--color-success-border);
  --panel-response-success-heading-bg-color: var(--color-success-bg);
  --panel-response-success-heading-text-color: var(--panel-response-heading-text-color);
  --panel-response-success-body-bg-color: transparent;
  --panel-response-success-body-text-color: var(--panel-response-body-text-color);

  /**
  * @tokens Response Panel Error colors
  * @presenter Color
  */

  --panel-response-error-border-color: var(--color-error-border);
  --panel-response-error-heading-bg-color: var(--color-error-bg);
  --panel-response-error-heading-text-color: var(--panel-response-heading-text-color);
  --panel-response-error-body-bg-color: transparent;
  --panel-response-error-body-text-color: var(--panel-response-body-text-color);

  /**
  * @tokens Response Panel Redirect colors
  * @presenter Color
  */

  --panel-response-redirect-border-color: var(--color-warning-border);
  --panel-response-redirect-heading-bg-color: var(--color-warning-bg);
  --panel-response-redirect-heading-text-color: var(--panel-response-heading-text-color);
  --panel-response-redirect-body-bg-color: transparent;
  --panel-response-redirect-body-text-color: var(--panel-response-body-text-color);

  /**
  * @tokens Response Panel Info colors
  * @presenter Color
  */

  --panel-response-info-border-color: var(--color-info-border);
  --panel-response-info-heading-bg-color: var(--color-info-bg);
  --panel-response-info-heading-text-color: var(--panel-response-heading-text-color);
  --panel-response-info-body-bg-color: transparent;
  --panel-response-info-body-text-color: var(--panel-response-body-text-color);

  /**
  * @tokens Response Panel Callback colors
  * @presenter Color
  */

  --panel-response-callback-border-color: var(--color-blue-3);
  --panel-response-callback-heading-bg-color: var(--color-blue-1);
  --panel-response-callback-heading-text-color: var(--panel-response-heading-text-color);
  --panel-response-callback-body-bg-color: transparent;
  --panel-response-callback-body-text-color: var(--panel-response-body-text-color);

  /**
  * @tokens Panel response success, info, error, redirect, callback common
  */

  .panel-response-success,
  .panel-response-info,
  .panel-response-error,
  .panel-response-redirect,
  .panel-response-callback {
    --panel-body-text-color: var(--panel-response-body-text-color); // @presenter Color
    --panel-border-radius-local: calc(1px + var(--panel-border-radius));

    --panel-heading-text-color: var(--panel-response-heading-text-color); // @presenter Color
    --panel-heading-font-size-local: var(--panel-response-heading-font-size);
    --panel-heading-font-weight-local: var(--panel-response-heading-font-weight);
    --panel-heading-line-height-local: var(--panel-response-heading-line-height);
    --panel-heading-padding-local: var(--panel-response-heading-padding);

    --panel-heading-border: var(--panel-samples-heading-border); // @presenter Border
    --panel-heading-white-space-local: normal;
    --panel-body-padding-local: var(--panel-body-padding);
  }

  /**
  * @tokens Panel response success colors
  * @presenter Color
  */

  .panel-response-success {
    --panel-border-local: 1px solid var(--panel-response-success-border-color); // @presenter Border

    --panel-body-text-color: var(--panel-response-success-body-text-color);
    --panel-body-bg-color: var(--panel-response-success-body-bg-color);

    --panel-heading-bg-color: var(--panel-response-success-heading-bg-color);
    --panel-heading-text-color: var(--panel-response-success-heading-text-color);
  }

  /**
  * @tokens Panel response info colors
  * @presenter Color
  */

  .panel-response-info {
    --panel-border-local: 1px solid var(--panel-response-info-border-color); // @presenter Border

    --panel-body-text-color: var(--panel-response-info-body-text-color);
    --panel-body-bg-color: var(--panel-response-info-body-bg-color);

    --panel-heading-bg-color: var(--panel-response-info-heading-bg-color);
    --panel-heading-text-color: var(--panel-response-info-heading-text-color);
  }

  /**
  * @tokens Panel response error colors
  * @presenter Color
  */

  .panel-response-error {
    --panel-border-local: 1px solid var(--panel-response-error-border-color); // @presenter Border

    --panel-body-text-color: var(--panel-response-error-body-text-color);
    --panel-body-bg-color: var(--panel-response-error-body-bg-color);

    --panel-heading-bg-color: var(--panel-response-error-heading-bg-color);
    --panel-heading-text-color: var(--panel-response-error-heading-text-color);
  }

  /**
  * @tokens Panel response redirect colors
  * @presenter Color
  */

  .panel-response-redirect {
    --panel-border-local: 1px solid var(--panel-response-redirect-border-color); // @presenter Border
    --panel-body-text-color: var(--panel-response-redirect-body-text-color);

    --panel-body-bg-color: var(--panel-response-redirect-body-bg-color);
    --panel-heading-bg-color: var(--panel-response-redirect-heading-bg-color);
    --panel-heading-text-color: var(--panel-response-redirect-heading-text-color);
  }

  /**
  * @tokens Panel response callback colors
  * @presenter Color
  */

  .panel-response-callback {
    --panel-body-text-color: var(--panel-response-callback-body-text-color);
    --panel-body-bg-color: var(--panel-response-callback-body-bg-color);
    --panel-heading-text-color: var(--panel-response-callback-heading-text-color);

    --panel-body-padding-local: 0 0 var(--spacing-base) var(--spacing-lg);
  }

  // @tokens End
`;

export const apiReferencePanels = css`
  /**
  * @tokens Panels spacing
  * @presenter Spacing
  */

  --panel-gap-horizontal: var(--spacing-xl);
  --panel-gap-vertical: var(--spacing-base);

  /**
  * @tokens Panel common
  */

  --panel-border-radius: var(--border-radius); // @presenter BorderRadius
  --panel-border: 1px solid var(--border-color-secondary); // @presenter Border

  --panel-line-height: var(--line-height-base); // @presenter LineHeight
  --panel-font-size: var(--font-size-base); // @presenter FontSize
  --panel-font-family: var(--font-family-base); // @presenter FontFamily
  --panel-font-weight: var(--font-weight-semibold); // @presenter FontWeight

  /**
  * @tokens Panel heading common
  */

  --panel-heading-font-family: var(--font-family-base); // @presenter FontFamily
  --panel-heading-font-size: 18px; // @presenter FontSize
  --panel-heading-font-weight: var(--font-weight-bold); // @presenter FontWeight
  --panel-heading-text-color: var(--text-color-primary);
  --panel-heading-padding: var(--spacing-md);
  --panel-heading-line-height: var(--line-height-base); // @presenter LineHeight
  --panel-heading-white-space: 'nowrap';
  --panel-heading-border: 1px solid var(--border-color-primary);

  /**
  * @tokens Panel body common
  */

  --panel-body-font-family: var(--font-family-base); // @presenter FontFamily
  --panel-body-font-size: var(--font-size-base); // @presenter FontSize
  --panel-body-font-weight: var(--font-weight-regular); // @presenter FontWeight
  --panel-body-text-color: var(--text-color-secondary);
  --panel-body-padding: var(--spacing-md);
  --panel-body-border: 1px solid var(--border-color-primary);

  /**
  * @tokens Panel default, response, callback, security schemas
  */

  .panel-request-schemas,
  .panel-response-schemas,
  .panel-callback-schemas,
  .panel-security-schemas,
  .panel-default {
    --panel-text-color: var(--text-color-primary); // @presenter Color
    --panel-font-family-local: var(--panel-font-family);
    --panel-font-size-local: var(--panel-font-size);
    --panel-font-weight-local: var(--panel-font-weight);
    --panel-bg-color: var(--bg-color); // @presenter Color
    --panel-border-local: var(--panel-border);
    --panel-border-radius-local: calc(1px + var(--panel-border-radius));
    --panel-chevron-icon-color: var(--text-color-primary); // @presenter Color

    --panel-body-text-color: var(--panel-text-color); // @presenter Color
    --panel-body-font-family-local: var(--panel-body-font-family);
    --panel-body-font-size-local: var(--panel-body-font-size);
    --panel-body-font-weight-local: var(--panel-body-font-weight);
    --panel-body-padding-local: var(--panel-body-padding);
    --panel-body-bg-color: var(--bg-color); // @presenter Color
    --panel-body-border: var(--panel-body-border); // @presenter Border

    --panel-heading-text-color: var(--panel-text-color); // @presenter Color
    --panel-heading-font-family-local: var(--panel-heading-font-family);
    --panel-heading-font-size-local: var(--panel-heading-font-size);
    --panel-heading-font-weight-local: var(--panel-heading-font-weight);
    --panel-heading-line-height-local: var(--panel-heading-line-height);
    --panel-heading-padding-local: var(--panel-heading-padding);
    --panel-heading-bg-color: var(--bg-color); // @presenter Color
    --panel-heading-border: var(--panel-heading-border); // @presenter Border
    --panel-heading-white-space-local: var(--panel-heading-white-space);
  }

  /**
  * @tokens Panel samples common
  */

  --panel-samples-block-bg-color: var(--bg-color); // @presenter Color
  --panel-samples-width: 50%;

  --panel-samples-text-color: var(--text-color-primary); // @presenter Color
  --panel-samples-font-family: var(--panel-font-family); // @presenter FontFamily
  --panel-samples-font-size: var(--panel-font-size); // @presenter FontSize
  --panel-samples-font-weight: var(--panel-font-weight); // @presenter FontWight
  --panel-samples-bg-color: var(--layer-color); // @presenter Color
  --panel-samples-border: var(--panel-border); // @presenter Border
  --panel-samples-chevron-icon-color: var(--text-color-primary); // @presenter Color

  /**
  * @tokens Panel samples body common
  */

  --panel-samples-body-text-color: var(--text-color-secondary); // @presenter Color
  --panel-samples-body-font-family: var(--panel-body-font-family); // @presenter FontFamily
  --panel-samples-body-font-size: var(--panel-body-font-size); // @presenter FontSize
  --panel-samples-body-font-weight: var(--panel-body-font-weight); // @presenter FontWeight
  --panel-samples-body-padding: var(--panel-body-padding);
  --panel-samples-body-bg-color: var(--layer-color); // @presenter Color
  --panel-samples-body-border: unset; // @presenter Border

  /**
  * @tokens Panel samples heading common
  */

  --panel-samples-heading-text-color: var(--text-color-primary); // @presenter Color
  --panel-samples-heading-font-family: var(--panel-heading-font-family); // @presenter FontFamily
  --panel-samples-heading-font-size: var(--panel-font-size); // @presenter FontSize
  --panel-samples-heading-font-weight: var(--panel-font-weight); // @presenter FontWeight
  --panel-samples-heading-line-height: var(--line-height-sm); // @presenter LineHeight
  --panel-samples-heading-padding: 14px var(--spacing-base) 10px 20px;
  --panel-samples-heading-bg-color: var(--layer-color); // @presenter Color
  --panel-samples-heading-border: unset; // @presenter Border

  /**
  * @tokens Panel samples default
  */
  .panel-samples-default {
    --text-color: var(--panel-samples-text-color);
    --panel-text-color: var(--panel-samples-text-color); // @presenter Color
    --panel-font-family-local: var(--panel-samples-font-family);
    --panel-font-size-local: var(--panel-samples-font-size);
    --panel-font-weight-local: var(--panel-samples-font-weight);
    --panel-bg-color: var(--panel-samples-bg-color); // @presenter Color
    --panel-border-local: var(--panel-samples-border);
    --panel-border-radius-local: calc(1px + var(--panel-border-radius));
    --panel-chevron-icon-color: var(--panel-samples-chevron-icon-color); // @presenter Color

    --panel-body-text-color: var(--panel-samples-body-text-color); // @presenter Color
    --panel-body-bg-color: var(--panel-samples-body-bg-color); // @presenter Color

    --panel-body-font-family-local: var(--panel-samples-body-font-family);
    --panel-body-font-size-local: var(--panel-samples-body-font-size);
    --panel-body-font-weight-local: var(--panel-samples-body-font-weight);
    --panel-body-padding-local: 0;
    --panel-body-border-local: var(--panel-samples-body-border);

    --panel-heading-text-color: var(--panel-samples-heading-text-color); // @presenter Color
    --panel-heading-bg-color: var(--panel-samples-heading-bg-color); // @presenter Color

    --panel-heading-font-family-local: var(--panel-samples-heading-font-family);
    --panel-heading-font-size-local: var(--panel-samples-heading-font-size);
    --panel-heading-font-weight-local: var(--panel-samples-heading-font-weight);
    --panel-heading-line-height-local: var(--panel-samples-heading-line-height);
    --panel-heading-padding-local: var(--panel-samples-heading-padding);

    --panel-heading-border: var(--panel-samples-heading-border); // @presenter Border
  }

  /**
  * @tokens Panel try-it, request-samples, response-samples, callback samples
  */

  .panel-language-list,
  .panel-overview,
  .panel-download,
  .panel-mcp-overview,
  .panel-servers-list,
  .panel-request-samples,
  .panel-response-samples,
  .panel-messages-samples,
  .panel-callback-samples {
    --text-color: var(--panel-samples-text-color);
    --panel-text-color: var(--panel-samples-text-color); // @presenter Color
    --panel-font-family-local: var(--panel-samples-font-family);
    --panel-font-size-local: var(--panel-samples-font-size);
    --panel-font-weight-local: var(--panel-samples-font-weight);
    --panel-bg-color: var(--panel-samples-bg-color); // @presenter Color
    --panel-border-local: var(--panel-samples-border);
    --panel-border-radius-local: var(--panel-border-radius);
    --panel-chevron-icon-color: var(--panel-samples-chevron-icon-color); // @presenter Color

    --panel-body-text-color: var(--panel-samples-body-text-color); // @presenter Color
    --panel-body-bg-color: var(--panel-samples-body-bg-color); // @presenter Color

    --panel-body-font-family-local: var(--panel-samples-body-font-family);
    --panel-body-font-size-local: var(--panel-samples-body-font-size);
    --panel-body-font-weight-local: var(--panel-samples-body-font-weight);
    --panel-body-padding-local: var(--panel-samples-body-padding);
    --panel-body-border-local: var(--panel-samples-body-border);

    --panel-heading-text-color: var(--panel-samples-heading-text-color); // @presenter Color
    --panel-heading-bg-color: var(--panel-samples-heading-bg-color); // @presenter Color

    --panel-heading-font-family-local: var(--panel-samples-heading-font-family);
    --panel-heading-font-size-local: var(--panel-samples-heading-font-size);
    --panel-heading-font-weight-local: var(--panel-samples-heading-font-weight);
    --panel-heading-line-height-local: var(--panel-samples-heading-line-height);
    --panel-heading-padding-local: var(--panel-samples-heading-padding);

    --panel-heading-border: var(--panel-samples-heading-border); // @presenter Border
    --panel-heading-border-bottom: var(--panel-samples-border);
  }

  .panel-container-response-samples {
    --panel-z-index: 0;
  }

  .panel-container-request-samples {
    --panel-z-index: 1;
  }

  /**
  * @tokens Panel samples tabs
  */

  --panel-samples-tabs-font-size: var(--panel-font-size); // @presenter FontSize
  --panel-samples-tabs-font-family: var(--panel-font-family); // @presenter FontFamily
  --panel-samples-tabs-font-weight: var(--panel-font-weight); // @presenter FontWeight

  --panel-samples-tabs-text-color: var(--text-color-secondary); // @presenter Color
  --panel-samples-tabs-text-color-hover: var(--text-color-primary); // @presenter Color
  --panel-samples-tabs-text-color-active: var(--text-color-primary); // @presenter Color
  --panel-samples-tabs-text-color-disabled: var(--button-content-color-disabled); // @presenter Color

  --panel-samples-tabs-bg-color: transparent; // @presenter Color
  --panel-samples-tabs-bg-color-hover: transparent; // @presenter Color
  --panel-samples-tabs-bg-color-active: var(--bg-color); // @presenter Color

  --panel-samples-code-block-bg-color: var(--code-block-bg-color); // @presenter Color

  /**
  * @tokens Panel samples other styles
  */
  --panel-samples-dropdown-bg-color: var(--bg-color); // @presenter Color
  --panel-samples-dropdown-color: var(--text-color-secondary); // @presenter Color
  --panel-samples-dropdown-border: 1px solid var(--border-color-primary); // @presenter Border

  /**
  * @tokens Panel servers-list other styles
  */
  --panel-servers-list-input-bg-color: var(--bg-color-raised); // @presenter Color

  // @tokens End
`;