import styled, { css } from 'styled-components';
import { selectors } from '@defencedigital/design-tokens';
import { BORDER_RADIUS } from '../../../styled-components';
import { COMPONENT_SIZE } from '../../Forms';
import { TEXT_INPUT_INPUT_HEIGHT } from '../../TextInput/partials/StyledInput';
var color = selectors.color,
  zIndex = selectors.zIndex;
function getTopBorder() {
  return css(["&::before{content:'';position:absolute;left:0;top:0;height:1px;width:100%;border-bottom:1px solid ", ";}"], color('neutral', '200'));
}
function getBoxShadow() {
  return css(["&::after{z-index:", ";content:'';position:absolute;top:-", ";left:0;right:0;bottom:0;box-shadow:0 0 0 3px ", ",0 0 0 6px ", ",0 2px 22px rgba(0,0,0,0.2);pointer-events:none;border-radius:", ";}"], zIndex('dropdown', 0), TEXT_INPUT_INPUT_HEIGHT[COMPONENT_SIZE.FORMS], color('action', '500'), color('action', '100'), BORDER_RADIUS[COMPONENT_SIZE.FORMS]);
}
export var StyledOptionsWrapper = styled.div.withConfig({
  displayName: "StyledOptionsWrapper",
  componentId: "sc-zvt3ga-0"
})(["display:", ";z-index:", ";position:absolute;width:100%;background:", ";border-radius:0 0 ", " ", ";margin-bottom:5px;", " ", ""], function (_ref) {
  var $isVisible = _ref.$isVisible;
  return $isVisible ? 'block' : 'none';
}, zIndex('dropdown', 1), color('neutral', 'white'), BORDER_RADIUS[COMPONENT_SIZE.FORMS], BORDER_RADIUS[COMPONENT_SIZE.FORMS], getTopBorder(), getBoxShadow());