import styled, { css } from 'styled-components';
import { selectors } from '@defencedigital/design-tokens';
import { COMPONENT_SIZE } from '../../Forms';
import { TEXT_INPUT_INPUT_HEIGHT } from '../../TextInput/partials/StyledInput';
var color = selectors.color,
  fontSize = selectors.fontSize,
  spacing = selectors.spacing;
export var StyledOption = styled.li.withConfig({
  displayName: "StyledOption",
  componentId: "sc-dnaem5-0"
})(["height:", ";padding:0 11px;display:flex;align-items:center;cursor:pointer;color:", ";font-size:", ";&:hover:not([disabled]){background-color:", ";}&[disabled]{color:", ";cursor:not-allowed;}", " & > svg{height:16px;width:16px;transform:translateY(1px);margin-right:", ";}"], TEXT_INPUT_INPUT_HEIGHT[COMPONENT_SIZE.FORMS], color('neutral', '900'), fontSize('m'), color('neutral', '100'), color('neutral', '400'), function (_ref) {
  var $isHighlighted = _ref.$isHighlighted;
  return $isHighlighted && css(["background-color:", ";"], color('neutral', '100'));
}, spacing('4'));