import React from 'react';
import styled, { css } from 'styled-components';
import { Box, Flexbox, Typography } from '../../../../..';
var hoverIfNotKeyboardNav = css(["", ""], function (p) {
  return p.disabled || p.isKeyboardNavigation ? '' : "\n&:hover { \nbackground: ".concat(p.theme.color.background, ";\n}\n");
});
var StyledBoxWithBorder = styled(Box).withConfig({
  displayName: "Action__StyledBoxWithBorder",
  componentId: "sc-k6v935-0"
})(["cursor:", ";", " ", ""], function (p) {
  return p.disabled ? 'not-allowed' : 'pointer';
}, function (p) {
  return p.focused && p.isKeyboardNavigation ? "\nbackground: ".concat(p.theme.color.background, ";\n") : '';
}, hoverIfNotKeyboardNav);
var EllipsizingText = styled.span.withConfig({
  displayName: "Action__EllipsizingText",
  componentId: "sc-k6v935-1"
})(["width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;line-height:0.7;padding-top:5px !important;padding-bottom:5px;margin:-5px 0;"]);
export var Action = function Action(_ref) {
  var isKeyboardNavigation = _ref.isKeyboardNavigation,
    focused = _ref.focused,
    label = _ref.label,
    icon = _ref.icon,
    disabled = _ref.disabled;
  return React.createElement(StyledBoxWithBorder, {
    px: 3,
    py: 2,
    isKeyboardNavigation: isKeyboardNavigation,
    focused: focused,
    disabled: disabled
  }, React.createElement(Typography, {
    type: "secondary",
    weight: "bold",
    color: function color(t) {
      return disabled ? t.color.disabledText : t.color.cta;
    }
  }, React.createElement(Flexbox, {
    container: true,
    gap: 2,
    alignItems: "center"
  }, icon, React.createElement(EllipsizingText, null, label))));
};