import { css } from 'styled-components';

export const select = css`
  /**
    * @tokens Select
    * */
  --select-font-size: var(--font-size-base); // @presenter FontSize
  --select-font-weight: var(--font-weight-regular); // @presenter FontWeight
  --select-line-height: var(--line-height-base); // @presenter LineHeight
  --select-text-color: var(--text-color-secondary); // @presenter Color
  --select-border-radius: var(--border-radius); // @presenter BorderRadius
  --select-border: var(--border-width) var(--border-style) var(--border-color-primary); // @presenter Border
  
  --select-input-padding-vertical: 6px; // @presenter Spacing
  --select-input-padding-horizontal: 6px; // @presenter Spacing
  --select-input-padding: var(--select-input-padding-vertical) var(--select-input-padding-horizontal);
  --select-input-gap: var(--spacing-xs); // @presenter Spacing
  --select-input-value-gap: var(--spacing-unit); // @presenter Spacing
  --select-input-border-radius: var(--border-radius); // @presenter BorderRadius
  --select-input-font-size: var(--font-size-base); // @presenter FontSize
  --select-input-font-weight: var(--font-weight-regular); // @presenter FontWeight
  --select-input-line-height: var(--line-height-base); // @presenter LineHeight
  --select-input-bg-color: var(--bg-color); // @presenter Color
  --select-input-placeholder-color: var(--input-content-placeholder-color); // @presenter Color

  --select-list-min-width: 100px;
  --select-list-max-width: 300px;
  --select-list-padding: var(--spacing-xxs); // @presenter Spacing
  --select-list-border-radius: var(--border-radius-lg); // @presenter BorderRadius
  --select-list-bg-color: var(--bg-color); // @presenter Color
  --select-list-box-shadow: var(--bg-raised-shadow); // @presenter Shadow

  --select-list-item-padding-vertical: var(--spacing-xs); // @presenter Spacing
  --select-list-item-padding-horizontal: var(--spacing-base); // @presenter Spacing
  --select-list-item-padding: var(--select-list-item-padding-vertical) var(--select-list-item-padding-horizontal);

  --select-list-item-gap: var(--spacing-xs); // @presenter Spacing
  --select-list-item-border-radius: var(--border-radius); // @presenter BorderRadius
  --select-list-item-bg-color-active: transparent; // @presenter Color
  --select-list-item-bg-color-hover: var(--menu-item-bg-color-hover); // @presenter Color
  --select-list-item-font-weight-active: var(--font-weight-medium); // @presenter Color  

  --select-placeholder-color: var(--color-warm-grey-6); // @presenter Color
  // @tokens End
`;