// Basic
export const color = 'color';
export const fontFamily = 'font-family';
export const backgroundColor = 'background-color';
// Typography
export const text = `text ${color} ${fontFamily}`;
export const textPrimary = `text-primary ${text}`;
export const textSecondary = `text-secondary ${text}`;
export const textDanger = `text-danger ${text}`;
export const heading = `heading ${text}`;
export const paragraph = `paragraph ${text}`;
export const heading1 = `heading-1 ${heading}`;
export const heading2 = `heading-2 ${heading}`;
export const heading3 = `heading-3 ${heading}`;
export const heading4 = `heading-4 ${heading}`;
export const heading5 = `heading-5 ${heading}`;
export const link = `link text ${fontFamily}`;
// Button
export const button = `button ${text}`;
export const buttonPrimary = `button-primary ${button}`;
export const buttonSecondary = `button-secondary ${button}`;
export const buttonDanger = `button-danger ${button}`;
export const buttonSuccess = `button-success ${button}`;
export const buttonWarning = `button-warning ${button}`;
export const buttonInfo = `button-info ${button}`;
export const buttonLight = `button-light ${button}`;
export const buttonDark = `button-dark ${button}`;
export const buttonLink = `button-link ${button}`;
export const buttonOutlinePrimary = `button-outline-primary ${button}`;
export const buttonOutlineSecondary = `button-outline-secondary ${button}`;
export const buttonLoading = `button-loading`;
export const buttonDisabled = `button-disabled ${button}`;
// Input
export const label = `label ${text}`;
export const input = `input ${text} ${backgroundColor}`;
export const inputGroup = `input-group ${input}`;
export const inputInvalid = `input-invalid ${input}`;
export const inputDisabled = `input-disabled ${input}`;
export const inputFocused = `input-focused ${input}`;
export const inputInvalidAndFocused = `input-invalid-and-focused ${input}`;
export const inputRadio = `input-radio`;
export const inputRadioFocused = `input-radio-focused ${inputRadio}`;
export const inputRadioChecked = `input-radio-checked ${inputRadio}`;
export const inputRadioCheckedFocused = `input-radio-checked-focused ${inputRadio}`;
export const inputRadioInvalid = `input-radio-invalid ${inputRadio}`;
export const inputCheckbox = `input-checkbox`;
export const inputCheckboxInvalid = `input-checkbox-invalid ${inputCheckbox}`;
export const inputCheckboxFocused = `input-checkbox-focused ${inputCheckbox}`;
export const inputCheckboxChecked = `input-checkbox-checked ${inputCheckbox}`;
export const inputCheckboxCheckedFocused = `input-checkbox-checked-focused ${inputCheckbox}`;
export const inputAdornment = `input-adornment ${text}`;
// Alert
export const alert = `alert ${text}`;
export const alertDanger = `alert-danger ${alert}`;
// Tooltip
export const tooltip = `tooltip ${text}`;
export const tooltipIcon = `tooltip-icon ${text}`;
export const tooltipInner = `tooltip-inner ${text}`;
// Card
export const card = `card ${text} ${backgroundColor}`;
// Table
export const table = `table ${text} ${backgroundColor}`;
export const tableRow = `table-row ${text} ${backgroundColor}`;
export const tableCell = `table-cell ${text} ${backgroundColor}`;
export const tableHead = `table-head`;
export const tableHeadRow = `table-head-row ${text} ${backgroundColor}`;
export const tableHeadCell = `table-head-cell ${tableCell}`;
export const tableFoot = `table-foot`;
export const tableFootRow = `table-foot-row ${text} ${backgroundColor}`;
export const tableFootCell = `table-foot-cell ${tableCell}`;
export const tableCellEven = `table-cell-even ${tableCell}`;
export const tableCellOdd = `table-cell-odd ${tableCell}`;
export const getAlternateTableCellPart = (index) => index % 2 ? tableCellEven : tableCellOdd;
export const tableEmpty = `table-empty ${text} ${backgroundColor}`;
export const tableError = `table-error ${text} ${backgroundColor}`;
// Pagination
export const paginationButton = `pagination-button ${button}`;
export const paginationButtonDisabled = `pagination-button-disabled ${buttonDisabled}`;
export const paginationButtonText = `pagination-button-text ${text}`;
export const paginationButtonIcon = `pagination-button-icon ${text}`;
export const paginationButtonIconNext = `pagination-button-icon-next ${paginationButtonIcon}`;
export const paginationButtonIconPrevious = `pagination-button-icon-previous ${paginationButtonIcon}`;
// Loading spinner
export const loadingSpinner = `loading-spinner`;
// Badge
export const badge = `badge ${fontFamily}`;
export const badgePrimary = `${badge} badge-primary`;
export const badgeSecondary = `${badge} badge-secondary`;
export const badgeSuccess = `${badge} badge-success`;
export const badgeDanger = `${badge} badge-danger`;
export const badgeWarning = `${badge} badge-warning`;
export const badgeInfo = `${badge} badge-info`;
export const badgeLight = `${badge} badge-light`;
export const badgeDark = `${badge} badge-dark`;
// Dropdown-menu
export const dropdownMenu = `dropdown-menu ${text}`;
export const dropdownMenuButton = `dropdown-menu-button ${buttonPrimary}`;
// Radio List Item
export const radioListItem = `radio-list-item ${text}`;
// Bootstrap list-group
export const listGroup = `list-group ${text} ${backgroundColor}`;
export const listGroupItem = `list-group-item ${text} ${backgroundColor}`;
// Skeleton
export const skeleton = `skeleton`;
// Image
export const image = `image`;
// Component specific
// This allows specific sections of a component to be hidden, for example
// ::part(billing-form) { display: none; }
export const billingForm = `billing-form`;
export const checkoutSummary = `checkout-summary`;
// Filters
export const filterMenu = `filter-menu`;
export const filterParam = `filter-param`;
