"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.FilterBarTab = void 0;

var _react = _interopRequireDefault(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _filterBarTab = require("./filter-bar-tab.proptypes");

var _branding = require("../../../../mixins/branding");

var _typography = require("../../../../mixins/typography");

var _typography2 = require("../../../typography");

var _filterBarTab2 = require("./filter-bar-tab.css-rules");

var _focus = require("../../../../mixins/focus");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var FilterBarTabButton = _styledComponents["default"].button.attrs(function () {
  return {
    fontSize: 'f1'
  };
}).withConfig({
  displayName: "FilterBarTabButton",
  componentId: "sc-1crk90x-0"
})(["padding:0;margin:0 10px;background:transparent;font-size:", ";font-family:", ";color:", ";border:0;position:relative;", " ", " span{color:", ";border-color:", ";}&:hover{color:", ";}&:active{color:", ";}"], _typography.getFontSize, _typography.getFontFamily, (0, _branding.getPaletteColor)('greyscale-medium'), (0, _focus.getBaseFocusState)({
  hoverTransition: false,
  activeTransition: false
}), _focus.FOCUS_VISIBLE_SELECTOR, (0, _branding.getPaletteColor)('greyscale-black'), (0, _branding.getPaletteColor)('greyscale-black'), (0, _branding.getPaletteColor)('brand-secondary-base'), (0, _branding.getPaletteColor)('brand-secondary-base'));

var FilterBarTabPlaceholder = (0, _styledComponents["default"])(_typography2.Span).withConfig({
  displayName: "FilterBarTabPlaceholder",
  componentId: "sc-1crk90x-1"
})(["visibility:hidden;", ""], _filterBarTab2.getSelectedStyles);
var FilterBarTabContent = (0, _styledComponents["default"])(_typography2.Span).withConfig({
  displayName: "FilterBarTabContent",
  componentId: "sc-1crk90x-2"
})(["position:absolute;left:50%;transform:translateX(-50%);", ""], _filterBarTab2.getSelectedStyles);

var FilterBarTab = function FilterBarTab(_ref) {
  var label = _ref.label,
      selected = _ref.selected,
      onClick = _ref.onClick;
  return _react["default"].createElement(FilterBarTabButton, {
    onClick: onClick
  }, _react["default"].createElement(FilterBarTabPlaceholder, {
    selected: true
  }, label), _react["default"].createElement(FilterBarTabContent, {
    selected: selected
  }, label));
};

exports.FilterBarTab = FilterBarTab;
FilterBarTab.displayName = 'FilterBarTab';
FilterBarTab.propTypes = _filterBarTab.filterBarTabPropTypes;