// ServiceNow Design System

// NOW Dropdown Theme

@import '@servicenow/sass-theme/p';

$now-dropdown--border-top-left-radius: var(p(--now-dropdown--border-top-left-radius), $now-button--border-radius);
$now-dropdown--border-top-right-radius: var(p(--now-dropdown--border-top-right-radius), $now-button--border-radius);
$now-dropdown--border-bottom-right-radius: var(p(--now-dropdown--border-bottom-right-radius), $now-button--border-radius);
$now-dropdown--border-bottom-left-radius: var(p(--now-dropdown--border-bottom-left-radius), $now-button--border-radius);

$now-dropdown--primary--border-color--opened: var(p(--now-dropdown--primary--border-color--opened), $now-button--primary--border-color);
$now-dropdown--primary--border-color--opened_hover: var(p(--now-dropdown--primary--border-color--opened_hover), $now-button--primary--border-color--hover);
$now-dropdown--primary--border-color--opened_active: var(p(--now-dropdown--primary--border-color--opened_active), $now-button--primary--border-color--active);
$now-dropdown--primary--color--opened: var(p(--now-dropdown--primary--color--opened), $now-button--primary--color);
$now-dropdown--primary--color--opened_hover: var(p(--now-dropdown--primary--color--opened_hover), $now-button--primary--color--hover);
$now-dropdown--primary--color--opened_active: var(p(--now-dropdown--primary--color--opened_active), $now-button--primary--color--active);
$now-dropdown--primary--background-color--opened: var(p(--now-dropdown--primary--background-color--opened), $now-color--primary-3);
$now-dropdown--primary--background-color--opened_hover: var(p(--now-dropdown--primary--background-color--opened_hover), $now-button--primary--background-color--hover);
$now-dropdown--primary--background-color--opened_active: var(p(--now-dropdown--primary--background-color--opened_active), $now-button--primary--background-color--active);

$now-dropdown--secondary--border-color--opened: var(p(--now-dropdown--secondary--border-color--opened), $now-button--secondary--border-color);
$now-dropdown--secondary--border-color--opened_hover: var(p(--now-dropdown--secondary--border-color--opened_hover), $now-button--secondary--border-color--hover);
$now-dropdown--secondary--border-color--opened_active: var(p(--now-dropdown--secondary--border-color--opened_active), $now-button--secondary--border-color--active);
$now-dropdown--secondary--color--opened: var(p(--now-dropdown--secondary--color--opened), $now-color--secondary-3);
$now-dropdown--secondary--color--opened_hover: var(p(--now-dropdown--secondary--color--opened_hover), $now-button--secondary--color--hover);
$now-dropdown--secondary--color--opened_active: var(p(--now-dropdown--secondary--color--opened_active), $now-button--secondary--color--active);
$now-dropdown--secondary--background-color--opened: var(p(--now-dropdown--secondary--background-color--opened), $now-color--neutral-5);
$now-dropdown--secondary--background-color--opened_hover: var(p(--now-dropdown--secondary--background-color--opened_hover), $now-button--secondary--background-color--hover);
$now-dropdown--secondary--background-color--opened_active: var(p(--now-dropdown--secondary--background-color--opened_active), $now-button--secondary--background-color--active);

$now-dropdown--secondary-selected--border-color: var(p(--now-dropdown--secondary-selected--border-color), $now-button--secondary--border-color);
$now-dropdown--secondary-selected--border-color--hover: var(p(--now-dropdown--secondary-selected--border-color--hover), $now-button--secondary--border-color--hover);
$now-dropdown--secondary-selected--border-color--active: var(p(--now-dropdown--secondary-selected--border-color--active), $now-button--secondary--border-color--active);
$now-dropdown--secondary-selected--color: var(p(--now-dropdown--secondary-selected--color), $now-color--primary-2);
$now-dropdown--secondary-selected--color--hover: var(p(--now-dropdown--secondary-selected--color--hover), $now-color--primary-3);
$now-dropdown--secondary-selected--color--active: var(p(--now-dropdown--secondary-selected--color--active), $now-color--primary-3);
$now-dropdown--secondary-selected--background-color: var(p(--now-dropdown--secondary-selected--background-color), $now-button--secondary--background-color);
$now-dropdown--secondary-selected--background-color--hover: var(p(--now-dropdown--secondary-selected--background-color--hover), $now-button--secondary--background-color--hover);
$now-dropdown--secondary-selected--background-color--active: var(p(--now-dropdown--secondary-selected--background-color--active), $now-button--secondary--background-color--active);

$now-dropdown--bare_secondary--background-color--hover: var(p(--now-dropdown--bare_secondary--background-color--hover), $now-color--neutral-9);
$now-dropdown--bare_secondary--background-color--active: var(p(--now-dropdown--bare_secondary--background-color--active), $now-color--neutral-9);

$now-dropdown--bare_secondary-selected--color: var(p(--now-dropdown--bare_secondary-selected--color), $now-color--primary-1);
$now-dropdown--bare_secondary-selected--color--hover: var(p(--now-dropdown--bare_secondary-selected--color--hover), $now-color--primary-2);
$now-dropdown--bare_secondary-selected--color--active: var(p(--now-dropdown--bare_secondary-selected--color--active), $now-color--primary-3);
$now-dropdown--bare_secondary-selected--background-color--hover: var(p(--now-dropdown--bare_secondary-selected--background-color--hover), $now-dropdown--bare_secondary--background-color--hover);
$now-dropdown--bare_secondary-selected--background-color--active: var(p(--now-dropdown--bare_secondary-selected--background-color--active), $now-dropdown--bare_secondary--background-color--active);

$now-dropdown--tertiary--border-color--opened: var(p(--now-dropdown--tertiary--border-color--opened), $now-button--tertiary--border-color);
$now-dropdown--tertiary--border-color--opened_hover: var(p(--now-dropdown--tertiary--border-color--opened_hover), $now-button--tertiary--border-color--hover);
$now-dropdown--tertiary--border-color--opened_active: var(p(--now-dropdown--tertiary--border-color--opened_active), $now-button--tertiary--border-color--active);
$now-dropdown--tertiary--color--opened: var(p(--now-dropdown--tertiary--color--opened), $now-color--secondary-3);
$now-dropdown--tertiary--color--opened_hover: var(p(--now-dropdown--tertiary--color--opened_hover), $now-button--tertiary--color--hover);
$now-dropdown--tertiary--color--opened_active: var(p(--now-dropdown--tertiary--color--opened_active), $now-button--tertiary--color--active);
$now-dropdown--tertiary--background-color--opened: var(p(--now-dropdown--tertiary--background-color--opened), $now-color--neutral-5);
$now-dropdown--tertiary--background-color--opened_hover: var(p(--now-dropdown--tertiary--background-color--opened_hover), $now-button--tertiary--background-color);
$now-dropdown--tertiary--background-color--opened_active: var(p(--now-dropdown--tertiary--background-color--opened_active), $now-button--tertiary--background-color--active);

$now-dropdown--tertiary-selected--border-color: var(p(--now-dropdown--tertiary-selected--border-color), $now-button--tertiary--border-color);
$now-dropdown--tertiary-selected--border-color--hover: var(p(--now-dropdown--tertiary-selected--border-color--hover), $now-button--tertiary--border-color--hover);
$now-dropdown--tertiary-selected--border-color--active: var(p(--now-dropdown--tertiary-selected--border-color--active), $now-button--tertiary--border-color--active);
$now-dropdown--tertiary-selected--color: var(p(--now-dropdown--tertiary-selected--color), $now-color--primary-2);
$now-dropdown--tertiary-selected--color--hover: var(p(--now-dropdown--tertiary-selected--color--hover), $now-color--primary-3);
$now-dropdown--tertiary-selected--color--active: var(p(--now-dropdown--tertiary-selected--color--active), $now-color--primary-3);
$now-dropdown--tertiary-selected--background-color: var(p(--now-dropdown--tertiary-selected--background-color), $now-button--tertiary--background-color);
$now-dropdown--tertiary-selected--background-color--hover: var(p(--now-dropdown--tertiary-selected--background-color--hover), $now-button--tertiary--background-color--hover);
$now-dropdown--tertiary-selected--background-color--active: var(p(--now-dropdown--tertiary-selected--background-color--active), $now-button--tertiary--background-color--active);

$now-dropdown--bare_tertiary--color: var(p(--now-dropdown--bare_tertiary--color), $now-color--secondary-1);
$now-dropdown--bare_tertiary--color--hover: var(p(--now-dropdown--bare_tertiary--color--hover), $now-color--secondary-2);
$now-dropdown--bare_tertiary--color--active: var(p(--now-dropdown--bare_tertiary--color--active), $now-color--secondary-3);

$now-dropdown--bare_tertiary--background-color: var(p(--now-dropdown--bare_tertiary--background-color), $now-color_background--primary);
$now-dropdown--bare_tertiary--background-color-alpha: var(p(--now-dropdown--bare_tertiary--background-color-alpha), 0);
$now-dropdown--bare_tertiary--background-color--hover: var(p(--now-dropdown--bare_tertiary--background-color--hover), $now-dropdown--bare_secondary--background-color--hover);
$now-dropdown--bare_tertiary--background-color-alpha--hover: var(p(--now-dropdown--bare_tertiary--background-color-alpha--hover), $now-global-opacity--least);
$now-dropdown--bare_tertiary--background-color--active: var(p(--now-dropdown--bare_tertiary--background-color--active), $now-dropdown--bare_secondary--background-color--active);
$now-dropdown--bare_tertiary--background-color-alpha--active: var(p(--now-dropdown--bare_tertiary--background-color-alpha--active), $now-global-opacity--less);

$now-dropdown-list--border-width: var(p(--now-dropdown-list--border-width), $now-menu--border-width);
$now-dropdown-list--font-style: var(p(--now-dropdown-list--font-style), $now-menu--font-style);
$now-dropdown-list--font-weight: var(p(--now-dropdown-list--font-weight), $now-menu--font-weight);
$now-dropdown-list--font-family: var(p(--now-dropdown-list--font-family), $now-menu--font-family);
$now-dropdown-list--text-transform: var(p(--now-dropdown-list--text-transform), $now-menu--text-transform);

$now-dropdown-list--border-color: var(p(--now-dropdown-list--border-color), $now-menu--border-color);
$now-dropdown-list--color: var(p(--now-dropdown-list--color), $now-color_text--primary);
$now-dropdown-list--color--focus: var(p(--now-dropdown-list--color--focus), $now-color_text--primary);
$now-dropdown-list--color--disabled: var(p(--now-dropdown-list--color--disabled), $now-color_text--primary);
$now-dropdown-list--background-color: var(p(--now-dropdown-list--background-color), $now-menu--background-color);
$now-dropdown-list--background-color--focus: var(p(--now-dropdown-list--background-color--focus), $now-color--secondary-0);
$now-dropdown-list--color--highlighted: var(p(--now-dropdown-list--color--highlighted), $now-dropdown-list--color);
$now-dropdown-list--background-color--highlighted: var(p(--now-dropdown-list--background-color--highlighted), $now-color_alert--warning-0);

$now-dropdown-list_checkmark--color: var(p(--now-dropdown-list_checkmark--color), $now-color--primary-2);

$now-dropdown-list_heading--height-scale: var(p(--now-dropdown-list_heading--height-scale), $now-button--height-scale);
$now-dropdown-list_heading--font-style: var(p(--now-dropdown-list_heading--font-style), $now-menu_heading--font-style);
$now-dropdown-list_heading--font-weight: var(p(--now-dropdown-list_heading--font-weight), $now-menu_heading--font-weight);
$now-dropdown-list_heading--font-family: var(p(--now-dropdown-list_heading--font-family), $now-menu_heading--font-family);
$now-dropdown-list_heading--text-transform: var(p(--now-dropdown-list_heading--text-transform), $now-menu_heading--text-transform);
$now-dropdown-list_heading--color: var(p(--now-dropdown-list_heading--color), $now-color_text--tertiary);
$now-dropdown-list_heading--background-color: var(p(--now-dropdown-list_heading--background-color), $now-color_background--secondary);

$now-dropdown-list_item--height-scale: var(p(--now-dropdown-list_item--height-scale), $now-button--height-scale);

$now-dropdown-list_sublabel--font-style: var(p(--now-dropdown-list_sublabel--font-style), $now-menu_sublabel--font-style);
$now-dropdown-list_sublabel--font-weight: var(p(--now-dropdown-list_sublabel--font-weight), $now-menu_sublabel--font-weight);
$now-dropdown-list_sublabel--font-family: var(p(--now-dropdown-list_sublabel--font-family), $now-menu_sublabel--font-family);
$now-dropdown-list_sublabel--text-transform: var(p(--now-dropdown-list_sublabel--text-transform), $now-menu_sublabel--text-transform);
$now-dropdown-list_sublabel--color: var(p(--now-dropdown-list_sublabel--color), $now-color_text--tertiary);

$now-dropdown-list_divider--width: var(p(--now-dropdown-list_divider--width), $now-menu_divider--width);
$now-dropdown-list_divider--color: var(p(--now-dropdown-list_divider--color), $now-menu_divider--color);

$now-dropdown-list_search--font-style: var(p(--now-dropdown-list_search--font-style), $now-menu_search--font-style);
$now-dropdown-list_search--font-weight: var(p(--now-dropdown-list_search--font-weight), $now-menu_search--font-weight);
$now-dropdown-list_search--font-family: var(p(--now-dropdown-list_search--font-family), $now-menu_search--font-family);
$now-dropdown-list_search--text-transform: var(p(--now-dropdown-list_search--text-transform), $now-menu_search--text-transform);
$now-dropdown-list_search--border-width: var(p(--now-dropdown-list_search--border-width), 1px);

$now-dropdown-list_search--border-color: var(p(--now-dropdown-list_search--border-color), $now-menu--border-color);
$now-dropdown-list_search--background-color: var(p(--now-dropdown-list_search--background-color), $now-menu--background-color);
$now-dropdown-list_search--background-color--hover: var(p(--now-dropdown-list_search--background-color--hover), $now-color_background--secondary);