import React from 'react';
import styled from 'styled-components';
var StyledTitle = styled.span.withConfig({
  displayName: "TabTitle__StyledTitle",
  componentId: "sc-1sa0gl6-0"
})(["", " position:relative;display:inline-flex;align-items:center;font-size:", ";", ""], function (props) {
  return props.height ? "height: ".concat(props.theme.spacing.unit(props.height), "px;") : '';
}, function (props) {
  return props.variant === 'large' ? '16px' : '14px';
}, function (props) {
  if (props.active) {
    return "\n        &::after {\n          content: '';\n          background-color: ".concat(props.theme.color.cta, ";\n          display: block;\n          width: 100%;\n          height: 2px;\n          position: absolute;\n          bottom: 0;\n          left: 0;\n        }\n      ");
  }
  return '';
});
export var TabTitle = function TabTitle(_ref) {
  var _ref$active = _ref.active,
    active = _ref$active === void 0 ? false : _ref$active,
    _ref$height = _ref.height,
    height = _ref$height === void 0 ? 8 : _ref$height,
    children = _ref.children,
    _ref$variant = _ref.variant,
    variant = _ref$variant === void 0 ? 'normal' : _ref$variant;
  return React.createElement(StyledTitle, {
    active: active,
    height: height,
    variant: variant
  }, children);
};
TabTitle.displayName = 'TabTitle';