import React from "react";
import { components } from "react-select";
import styled from "styled-components";
import Text from "../../asorted/Text";
export function getStyles() {
    return provided => ({
        ...provided,
        display: "flex",
        alignItems: "center",
        padding: 0,
        cursor: "inherit",
        background: "inherit",
        color: "inherit",
        boxShadow: "none",
        border: "none",
        ":active": undefined,
    });
}
const Wrapper = styled(Text).attrs({ as: "div" }) `
  height: 48px;
  display: flex;
  padding: 0 ${p => p.theme.space[5]}px;
  border-radius: ${p => `${p.theme.radii[1]}px`};
  ${p => (!p.disabled ? "cursor: pointer;" : "")}
  ${props => {
    const { theme, selected, focus, disabled } = props;
    if (selected) {
        return `
        color: ${theme.colors.primary.c90};
        background: ${theme.colors.primary.c20};
      `;
    }
    if (disabled) {
        return `
        color: ${theme.colors.neutral.c50};
        ${focus
            ? `&:not(:active) {
            background: ${theme.colors.neutral.c20};
          }`
            : ""}
      `;
    }
    return `
      color: ${theme.colors.neutral.c80};
      &:hover {
        color: ${theme.colors.neutral.c100};
        background: ${theme.colors.primary.c10};
      }
      &:active {
        color: ${theme.colors.neutral.c100};
        background: ${theme.colors.primary.c30};
      }
      ${focus
        ? `&:not(:active) {
          color: ${theme.colors.neutral.c100};
          background: ${theme.colors.primary.c10};
        }`
        : ""}
    `;
}};
`;
export function Option(props) {
    const { render, children, ...innerProps } = props;
    return (React.createElement(Wrapper, { disabled: props.isDisabled, selected: props.isSelected, focus: props.isFocused, fontWeight: "semiBold", variant: "paragraph" },
        React.createElement(components.Option, { ...innerProps }, render ? render(props) : children)));
}
//# sourceMappingURL=Option.js.map