import { css } from "styled-components";

export const markdownTabs = css`
  /**
  *  @tokens Markdown Tabs
  */

  --md-tabs-container-text-color: inherit; // @presenter Color
  --md-tabs-container-font-size: var(--md-content-font-size); // @presenter FontSize
  --md-tabs-container-font-family: var(--md-content-font-family); // @presenter FontFamily
  --md-tabs-container-font-style: normal; // @presenter FontStyle
  --md-tabs-container-font-weight: var(--font-weight-regular); // @presenter FontWeight
  --md-tabs-container-bg-color: inherit; // @presenter Color
  --md-tabs-container-margin: 10px 0; // @presenter Spacing
  --md-tabs-container-padding: 0; // @presenter Spacing
  --md-tabs-container-border: none; // @presenter Border

  --md-tabs-border: solid var(--border-color-secondary); // @presenter Color
  --md-tabs-border-width: 0 0 1px 0; // @presenter Spacing
  --md-tabs-padding: 0; // @presenter Spacing

  --md-tabs-content-text-color: inherit; // @presenter Color
  --md-tabs-content-font-size: var(--md-content-font-size); // @presenter FontSize
  --md-tabs-content-font-family: var(--md-content-font-family); // @presenter FontFamily
  --md-tabs-content-font-style: normal; // @presenter FontStyle
  --md-tabs-content-font-weight: var(--font-weight-regular); // @presenter FontWeight
  --md-tabs-content-bg-color: inherit; // @presenter Color
  --md-tabs-content-margin: 0; // @presenter Spacing
  --md-tabs-content-padding: var(--spacing-base) 0; // @presenter Spacing
  --md-tabs-content-border: none; // @presenter Border

  --md-tabs-gap: var(--spacing-xs); // @presenter Spacing

  --md-tabs-tab-text-color: var(--text-color-primary); // @presenter Color
  --md-tabs-tab-font-family: var(--md-content-font-family); // @presenter FontFamily
  --md-tabs-tab-font-style: normal; // @presenter FontStyle
  --md-tabs-tab-bg-color: none; // @presenter Color
  --md-tabs-tab-margin: 0 0 -1px 0; // @presenter Spacing
  --md-tabs-tab-wrapper-padding: var(--spacing-unit) 0; // @presenter Spacing

  --md-tabs-medium-tab-padding: var(--spacing-unit) var(--spacing-sm); // @presenter Spacing
  --md-tabs-medium-tab-border-width: 0 0 1px 0; // @presenter Spacing
  --md-tabs-medium-tab-border-radius: 0; // @presenter BorderRadius
  --md-tabs-medium-tab-font-weight: var(--font-weight-regular); // @presenter FontWeight
  --md-tabs-medium-tab-line-height: var(--line-height-lg); // @presenter LineHeight
  --md-tabs-medium-tab-font-size: var(--font-size-lg); // @presenter FontSize

  --md-tabs-small-tab-border-width: var(--md-tabs-medium-tab-border-width); // @presenter Spacing
  --md-tabs-small-tab-padding: 1px var(--spacing-xs); // @presenter Spacing
  --md-tabs-small-tab-font-size: var(--font-size-base); // @presenter FontSize
  --md-tabs-small-tab-font-weight: var(--font-weight-regular); // @presenter FontWeight
  --md-tabs-small-tab-line-height: var(--line-height-base); // @presenter LineHeight
  --md-tabs-small-tab-border-radius: var(--border-radius); // @presenter BorderRadius

  --md-tabs-active-tab-text-color: var(--text-color-primary); // @presenter Color
  --md-tabs-active-tab-font-family: var(--md-tabs-tab-font-family); // @presenter FontFamily
  --md-tabs-active-tab-font-style: normal; // @presenter FontStyle
  --md-tabs-active-tab-bg-color: var(--bg-color-active); // @presenter Color
  --md-tabs-active-tab-border-color: var(--text-color-primary); // @presenter Color

  --md-tabs-medium-active-tab-font-size: var(--md-tabs-medium-tab-font-size); // @presenter FontSize
  --md-tabs-medium-active-tab-font-weight: var(--md-tabs-medium-tab-font-weight); // @presenter FontWeight
  --md-tabs-medium-active-tab-line-height: var(--md-tabs-medium-tab-line-height); // @presenter LineHeight
  --md-tabs-medium-active-tab-padding: var(--md-tabs-medium-tab-padding); // @presenter Spacing
  --md-tabs-medium-active-tab-border-width: var(--md-tabs-medium-tab-border-width); // @presenter Spacing
  --md-tabs-medium-active-tab-border-radius: 6px; // @presenter BorderRadius

  --md-tabs-small-active-tab-font-size: var(--md-tabs-small-tab-font-size); // @presenter FontSize
  --md-tabs-small-active-tab-font-weight: var(--md-tabs-small-tab-font-weight); // @presenter FontWeight
  --md-tabs-small-active-tab-line-height: var(--md-tabs-small-tab-line-height); // @presenter LineHeight
  --md-tabs-small-active-tab-padding: var(--md-tabs-small-tab-padding); // @presenter Spacing
  --md-tabs-small-active-tab-border-width: var(--md-tabs-medium-tab-border-width); // @presenter Spacing
  --md-tabs-small-active-tab-border-radius: var(--border-radius); // @presenter BorderRadius

  --md-tabs-hover-tab-text-color: var(--md-tabs-tab-text-color); // @presenter Color
  --md-tabs-hover-tab-font-family: var(--md-tabs-tab-font-family); // @presenter FontFamily
  --md-tabs-hover-tab-font-style: normal; // @presenter FontStyle
  --md-tabs-hover-tab-bg-color: var(--color-hover-base); // @presenter Color
  --md-tabs-hover-tab-border-color: transparent; // @presenter Color

  --md-tabs-medium-hover-tab-font-size: var(--md-tabs-medium-tab-font-size); // @presenter FontSize
  --md-tabs-medium-hover-tab-font-weight: var(--md-tabs-medium-tab-font-weight); // @presenter FontWeight
  --md-tabs-medium-hover-tab-line-height: var(--md-tabs-medium-tab-line-height); // @presenter LineHeight
  --md-tabs-medium-hover-tab-padding: var(--md-tabs-medium-tab-padding); // @presenter Spacing
  --md-tabs-medium-hover-tab-border-width: var(--md-tabs-medium-tab-border-width); // @presenter Spacing
  --md-tabs-medium-hover-tab-border-radius: var(--md-tabs-medium-active-tab-border-radius); // @presenter BorderRadius

  --md-tabs-small-hover-tab-font-size: var(--md-tabs-small-tab-font-size); // @presenter FontSize
  --md-tabs-small-hover-tab-font-weight: var(--md-tabs-small-tab-font-weight); // @presenter FontWeight
  --md-tabs-small-hover-tab-line-height: var(--md-tabs-small-tab-line-height); // @presenter LineHeight
  --md-tabs-small-hover-tab-padding: var(--md-tabs-small-tab-padding); // @presenter Spacing
  --md-tabs-small-hover-tab-border-width: var(--md-tabs-medium-tab-border-width); // @presenter Spacing
  --md-tabs-small-hover-tab-border-radius: var(--border-radius); // @presenter BorderRadius

  --md-tabs-tab-text-disabled-color: var(--text-color-disabled); // @presenter Color

  --md-tabs-tab-focused-padding: var(--spacing-unit); // @presenter Spacing

  // @tokens End
  `;