import { css } from 'styled-components';

export const dropdown = css`
  /**
    * @tokens Dropdown
    **/
  --dropdown-menu-font-size: var(--font-size-base); // @presenter FontSize
  --dropdown-menu-font-weight: var(--font-weight-regular); // @presenter FontWeight
  --dropdown-menu-line-height: var(--line-height-base); // @presenter LineHeight
  --dropdown-menu-text-color: var(--text-color-secondary); // @presenter Color
  --dropdown-menu-z-index: var(--z-index-raised); // @presenter ZIndex

  --dropdown-menu-padding-top: var(--spacing-xxs);
  --dropdown-menu-min-width: 100px;
  --dropdown-menu-max-width: 424px;
  --dropdown-menu-max-height: 300px;
  --dropdown-menu-padding: var(--spacing-xxs); // @presenter Spacing
  --dropdown-menu-border-radius: var(--border-radius-lg); // @presenter BorderRadius
  --dropdown-menu-box-shadow: var(--bg-raised-shadow); // @presenter Shadow
  --dropdown-menu-border-color: var(--border-color-secondary); // @presenter Color
  --dropdown-menu-bg-color: var(--bg-color-raised); // @presenter Color

  --dropdown-menu-item-gap: 0; // @presenter Spacing
  --dropdown-menu-item-padding-horizontal: var(--spacing-base); // @presenter Spacing
  --dropdown-menu-item-padding-vertical: 5px; // @presenter Spacing
  --dropdown-menu-item-separator-padding-top: var(--spacing-xs); // @presenter Spacing
  --dropdown-menu-item-separator-padding-bottom: var(--spacing-xxs); // @presenter Spacing
  --dropdown-menu-item-border-radius: var(--border-radius); // @presenter BorderRadius
  --dropdown-menu-item-bg-color: transparent;
  --dropdown-menu-item-bg-color-active: var(--bg-color-hover); // @presenter Color
  --dropdown-menu-item-bg-color-hover: var(--bg-color-hover); // @presenter Color
  --dropdown-menu-item-bg-color-disabled: var(--dropdown-menu-item-bg-color); // @presenter Color
  --dropdown-menu-item-separator-border-color: var(--border-color-primary); // @presenter Color
  --dropdown-menu-item-separator-font-size: var(--font-size-sm); // @presenter FontSize
  --dropdown-menu-item-separator-line-height: var(--line-height-sm); // @presenter LineHeight
  --dropdown-menu-item-separator-text-color: var(--text-color-disabled); // @presenter Color
  --dropdown-menu-item-justify-content: flex-start;
  --dropdown-menu-item-color: var(--dropdown-menu-text-color); // @presenter Color
  --dropdown-menu-item-color-hover: var(--dropdown-menu-item-color); // @presenter Color
  --dropdown-menu-item-color-active: var(--dropdown-menu-item-color); // @presenter Color
  --dropdown-menu-item-color-disabled: var(--text-color-disabled); // @presenter Color

  --dropdown-menu-item-color-dangerous: var(--color-error-base);

  --dropdown-menu-item-border-color-focused: var(--button-border-color-focused);
  // @tokens End
`;