import { css } from 'styled-components';

export const userMenu = css`
  /**
    * @tokens User Menu
    */

  --user-menu-navbar-button-width: var(--control-height-base); // @presenter Spacing
  --user-menu-navbar-button-height: var(--control-height-base); // @presenter Spacing

  --user-menu-avatar-width: var(--spacing-xxl); // @presenter Spacing
  --user-menu-avatar-height: var(--spacing-xxl); // @presenter Spacing
  --user-menu-avatar-border-radius: 50%; // @presenter BorderRadius
  --user-menu-avatar-bg-color: var(--button-bg-color-secondary);

  --user-menu-avatar-font-family: var(--navbar-item-font-family); // @presenter FontFamily
  --user-menu-avatar-font-size: var(--navbar-item-font-size); // @presenter FontSize
  --user-menu-avatar-font-weight: var(--font-weight-regular); // @presenter FontWeight
  --user-menu-avatar-line-height: var(--line-height-base); // @presenter LineHeight

  --user-menu-user-details-padding-vertical: var(--spacing-base);
  --user-menu-user-details-padding-horizontal: var(--spacing-md);
  --user-menu-user-details-bg-color: var(--layer-color);

  --user-menu-name-font-weight: var(--font-weight-medium);
  --user-menu-name-font-size: var(--font-size-lg);
  --user-menu-name-line-height: var(--line-height-lg);

  --user-menu-user-info-items-gap: var(--spacing-base);

  --user-menu-email-font-size: var(--font-size-sm);
  --user-menu-email-line-height: var(--line-height-sm);

  --user-menu-dropdown-font-size: var(--dropdown-menu-font-size); // @presenter FontSize
  --user-menu-dropdown-font-weight: var(--dropdown-menu-font-weight); // @presenter FontWeight
  --user-menu-dropdown-line-height: var(--dropdown-menu-line-height); // @presenter LineHeight
  --user-menu-dropdown-text-color: var(--dropdown-menu-text-color); // @presenter Color

  --user-menu-dropdown-min-width: 180px;
  --user-menu-dropdown-max-width: var(--dropdown-menu-max-width);
  --user-menu-dropdown-max-height: none;
  --user-menu-dropdown-padding: var(--dropdown-menu-padding ); // @presenter Spacing
  --user-menu-dropdown-border-radius: var(--dropdown-menu-border-radius); // @presenter BorderRadius
  --user-menu-dropdown-box-shadow: var(--dropdown-menu-box-shadow); // @presenter Shadow
  --user-menu-dropdown-border-color: var(--dropdown-menu-border-color); // @presenter Color
  --user-menu-dropdown-bg-color: var(--dropdown-menu-bg-color); // @presenter Color

  --user-menu-dropdown-item-padding-horizontal: 20px; // @presenter Spacing
  --user-menu-dropdown-item-padding-vertical: var(--dropdown-menu-item-padding-vertical); // @presenter Spacing
  --user-menu-dropdown-item-separator-padding-top: var(--dropdown-menu-item-separator-padding-top ); // @presenter Spacing
  --user-menu-dropdown-item-separator-padding-bottom: var(--dropdown-menu-item-separator-padding-bottom ); // @presenter Spacing
  --user-menu-dropdown-item-border-radius: var(--dropdown-menu-item-border-radius ); // @presenter BorderRadius
  --user-menu-dropdown-item-bg-color-active: var(--dropdown-menu-item-bg-color-active); // @presenter Color
  --user-menu-dropdown-item-bg-color-hover: var(--dropdown-menu-item-bg-color-hover); // @presenter Color
  --user-menu-dropdown-item-bg-color-disabled: var(--dropdown-menu-item-bg-color-disabled); // @presenter Color
  --user-menu-dropdown-item-separator-border-color: var(--dropdown-menu-item-separator-border-color); // @presenter Color
  --user-menu-dropdown-item-color-dangerous: var(--dropdown-menu-item-color-dangerous);
  --user-menu-dropdown-item-color-disabled: var(--dropdown-menu-item-color-disabled);
  --user-menu-dropdown-item-color-active: var(--dropdown-menu-item-color-active);
  --user-menu-dropdown-item-color-hover: var(--dropdown-menu-item-color-hover);
  --user-menu-dropdown-item-border-color-focused: var(--dropdown-menu-item-border-color-focused);

  // @tokens End
`;