import { css } from "styled-components";

export const versionPicker = css`
  /**
    * @tokens Version picker
    * */

  --version-picker-font-size: var(--font-size-base); // @presenter FontSize
  --version-picker-font-weight: var(--select-font-weight); // @presenter FontWeight
  --version-picker-line-height: var(--select-line-height); // @presenter LineHeight
  --version-picker-text-color: var(--select-text-color); // @presenter Color
  --version-picker-border-radius: var(--select-border-radius); // @presenter BorderRadius
  --version-picker-padding-vertical: 10px; // @presenter Spacing
  --version-picker-padding-horizontal: var(--sidebar-margin-horizontal); // @presenter Spacing
  --version-picker-border-bottom: 1px solid var(--border-color-primary); // @presenter Border

  --version-picker-label-font-size: var(--font-size-base);
  --version-picker-label-font-weight: var(--font-weight-bold);

  --version-picker-input-padding-horizontal: var(--select-input-padding-horizontal); // @presenter Spacing
  --version-picker-input-padding-vertical: var(--select-input-padding-vertical); // @presenter Spacing
  --version-picker-input-border: 1px solid var(--border-color-primary); // @presenter Border
  --version-picker-input-border-radius: var(--select-input-border-radius); // @presenter BorderRadius

  --version-picker-list-min-width: var(--select-list-min-width);
  --version-picker-list-max-width: var(--select-list-max-width);
  --version-picker-list-padding: var(--select-list-padding); // @presenter Spacing
  --version-picker-list-border-radius: var(--select-list-border-radius); // @presenter BorderRadius
  --version-picker-list-bg-color: var(--select-list-bg-color); // @presenter Color
  --version-picker-list-box-shadow: var(--select-list-box-shadow); // @presenter Shadow

  --version-picker-list-item-padding-horizontal: var(--select-list-item-padding-horizontal); // @presenter Spacing
  --version-picker-list-item-padding-vertical: var(--select-list-item-padding-vertical); // @presenter Spacing
  --version-picker-list-item-border-radius: var(--select-list-item-border-radius); // @presenter BorderRadius
  --version-picker-list-item-bg-color-active: var(--select-list-item-bg-color-active); // @presenter Color
  --version-picker-list-item-bg-color-hover: var(--select-list-item-bg-color-hover); // @presenter Color

  // @tokens End
`;