import { css } from 'styled-components';

export const menu = css`
  /**
    * @tokens Menu
    */
  --menu-padding: 0px;
  --menu-margin: 0px;
  --menu-list-style: none;

  --menu-content-color: var(--text-color-secondary); // @presenter Color
  --menu-content-title-color: var(--text-color-description); // @presenter Color
  --menu-content-color-active: var(--text-color-primary); // @presenter Color
  --menu-content-color-disabled: var(--text-color-disabled); // @presenter Color

    /**
    * @tokens Menu item typography
    */
  --menu-item-font-family: var(--sidebar-font-family); // @presenter FontFamily
  --menu-item-font-size: var(--sidebar-font-size); // @presenter FontSize
  --menu-item-font-weight: var(--font-weight-regular); // @presenter FontSize
  --menu-item-line-height: var(--line-height-base); // @presenter LineHeight

    /**
    * @tokens Menu item colors
    *  @presenter Color
    */
  --menu-item-text-color: var(--sidebar-text-color); // @presenter Color
  --menu-item-bg-color: transparent; // @presenter Color
  --menu-item-bg-color-hover: var(--color-hover-base); // @presenter Color
  --menu-item-bg-color-active: var(--tree-bg-color-active); // @presenter Color

  --menu-item-color-hover: var(--tree-content-color-hover); // @presenter Color
  --menu-item-color-active: var(--tree-content-color-default); // @presenter Color

  /**
   * @tokens Menu item spacing
   * @presenter Spacing
   */
  --menu-item-padding-vertical: var(--spacing-unit); // @presenter Spacing
  --menu-item-padding-horizontal: var(--spacing-xxs); // @presenter Spacing
  --menu-item-nested-offset: var(--spacing-sm); // @presenter Spacing
  --menu-header-container-gap: var(--spacing-sm); // @presenter Spacing

  /**
   * @tokens Menu item label
   */
  --menu-item-label-align-items: center;
  --menu-item-label-transition: background-color 0.3s, color 0.3s;
  --menu-item-label-word-break: break-word;
  --menu-item-label-margin-horizontal: var(--sidebar-margin-horizontal);
  --menu-item-label-margin-vertical: 0;
  --menu-item-label-margin: var(--menu-item-label-margin-vertical) var(--menu-item-label-margin-horizontal);
  --menu-item-label-padding: var(--menu-item-padding-vertical) var(--menu-item-padding-horizontal);
  --menu-item-label-gap: var(--spacing-xxs);
  --menu-item-label-border-radius: 6px;
  --menu-item-label-chevron-size: 12px;
  --menu-item-label-chevron-offset: calc(var(--menu-item-label-gap) + var(--menu-item-label-chevron-size));

  /**
   * @tokens Menu item sublabel
   */
  --menu-item-sublabel-font-family: inherit; // sublabel is for drilldown only but I would like to support it in general
  --menu-item-sublabel-font-size: var(--font-size-sm); // @presenter FontSize
  --menu-item-sublabel-font-weight: var(--font-weight-regular); // @presenter FontWeight
  --menu-item-sublabel-text-color: var(--menu-item-text-color); // @presenter Color
  --menu-item-sublabel-margin: 0 0 0 var(--spacing-base); // @presenter Spacing

  /**
   * @tokens Menu item icons
   */
  --menu-item-icon-size: var(--spacing-base);
  --menu-item-icon-margin: 0 var(--spacing-xxs) 0 0;
  --menu-item-icon-border-radius: 100%;

  --menu-item-external-icon-size: 10px;

  /**
   * @tokens Menu item separator line
   */
  --menu-item-separator-line-height: 1px;
  --menu-item-separator-line-bg-color: var(--border-color-secondary);
  --menu-item-separator-offest: var(--spacing-xxs);

  /**
   * @tokens Menu back button
   */
  --menu-back-button-font-family: var(--menu-item-font-family);
  --menu-back-button-font-size: var(--menu-item-font-size); // @presenter FontSize
  --menu-back-button-transform: inherit; // @presenter TextTransform
  --menu-back-button-text-color: var(--menu-item-text-color); // @presenter Color
  --menu-back-button-bg-color: transparent; // @presenter Color
  --menu-back-button-text-color-hover: var(--menu-item-color-active); // @presenter Color
  --menu-back-button-bg-color-hover: transparent; // @presenter Color
  --menu-back-button-icon-size: var(--menu-item-label-chevron-size); // @presenter Color
  --menu-back-button-icon-color: var(--menu-item-text-color); // @presenter Color
  --menu-back-button-margin: 0 0 var(--spacing-base) var(--sidebar-margin-horizontal); // @presenter Spacing
  --menu-back-padding-left: var(--spacing-xs); // @presenter Spacing
  --menu-back-button-gap: var(--spacing-xs);
  --menu-back-button-icon: none;

  /**
   * @tokens Menu items
   */

  .menu-item-type-separator {
    --menu-item-label-chevron-offset: 0px;
  }

  .menu-item-type-separator-primary {
    --menu-item-font-weight: var(--font-weight-bold);
    --menu-item-text-color: var(--text-color-primary);
    --menu-item-font-size: var(--sidebar-font-size);
    --menu-item-line-height: var(--line-height-base);
  }

  .menu-item-type-separator-secondary {
    --menu-item-font-weight: var(--font-weight-bold);
    --menu-item-text-color: var(--text-color-secondary);
    --menu-item-font-size: var(--font-size-sm);
    --menu-item-line-height: var(--line-height-sm);
  }

  // @tokens End
`;

export const mobileMenu = css`

  /**
    * @tokens Mobile Menu
    * */
  /* Fallback for older browsers. dvh accounts for dynamic UI elements like mobile address bars */
  --menu-mobile-height: calc(100vh - var(--navbar-height) - var(--banner-height));
  --menu-mobile-height: calc(100dvh - var(--navbar-height) - var(--banner-height));
  --menu-mobile-width: 100%;
  --menu-mobile-z-index: var(--z-index-raised);
  --menu-mobile-left: 0;
  --menu-mobile-top: calc(var(--navbar-height) + var(--banner-height));
  --menu-mobile-transition: 0.5s;
  --menu-mobile-bg: var(--bg-color); // @presenter Color
  --menu-mobile-margin: var(--menu-mobile-items-margin-top) var(--menu-mobile-margin-horizontal) 0 var(--menu-mobile-margin-horizontal);
  --menu-mobile-line-height: var(--line-height-base); // @presenter LineHeight
  --menu-mobile-padding-top: var(--spacing-sm); // @presenter Spacing
  --menu-mobile-margin-horizontal: var(--spacing-xs); // @presenter Spacing
  --menu-mobile-items-margin-top: var(--spacing-xxs); // @presenter Spacing

  --menu-mobile-profile-bg-color: var(--bg-color); // @presenter Color
  --menu-mobile-profile-border-color: var(--border-color-secondary); // @presenter Color

  /**
    * @tokens Mobile Menu control button
    * */
  --menu-mobile-control-button-padding-vertical: var(--spacing-xxs); // @presenter Spacing
  --menu-mobile-control-button-padding-horizontal: var(--spacing-xxs); // @presenter Spacing
  --menu-mobile-control-button-padding: var(--menu-mobile-control-button-padding-vertical) var(--menu-mobile-control-button-padding-horizontal); // @presenter Spacing
  --menu-mobile-control-button-margin-vertical: 0; // @presenter Spacing
  --menu-mobile-control-button-margin-horizontal: var(--spacing-xs); // @presenter Spacing
  --menu-mobile-control-button-margin: var(--menu-mobile-control-button-margin-vertical) var(--menu-mobile-control-button-margin-horizontal); // @presenter Spacing
  --menu-mobile-control-button-font-size: var(--font-size-sm); // @presenter FontSize
  --menu-mobile-control-button-weight: var(--font-weight-regular); // @presenter FontWeight
  --menu-mobile-control-button-line-height: var(--line-height-sm); // @presenter LineHeight
  --menu-mobile-control-button-color: var(--menu-item-text-color); // @presenter Color
  --menu-mobile-control-button-color-hover: var(--text-color-primary); // @presenter Color
  --menu-mobile-control-button-text-align: center;


  /**
    * @tokens Mobile Menu Product
    * */
  --menu-mobile-product-name-font-size: var(--menu-item-font-size);
  --menu-mobile-product-name-font-weight: var(--font-weight-bold);
  --menu-mobile-product-name-line-height: var(--line-height-base);
  --menu-mobile-product-name-text-color: var(--menu-item-text-color);
  --menu-mobile-product-name-border-radius: var(--menu-item-label-border-radius);
  --menu-mobile-product-name-border: none;
  --menu-mobile-product-name-padding: var(--menu-item-padding-vertical) var(--menu-item-padding-horizontal);
  --menu-mobile-product-name-margin: var(--menu-item-label-margin);

  // @tokens End

  --menu-container-padding-top: var(--sidebar-offset-top);
`;