import { selectors } from '@defencedigital/design-tokens';
import styled, { css } from 'styled-components';
var color = selectors.color,
  fontSize = selectors.fontSize,
  zIndex = selectors.zIndex;
export var ACTIVE_TAB_BORDER = "1px solid ".concat(color('neutral', '300'));
export var ACTIVE_TAB_HEIGHT = '52px';
function getActiveStyles() {
  return css(["text-decoration:none;font-weight:bold;background-color:", ";height:", ";margin-top:0;border-left:", ";border-right:", ";border-top:", ";z-index:", ";"], color('neutral', 'white'), ACTIVE_TAB_HEIGHT, ACTIVE_TAB_BORDER, ACTIVE_TAB_BORDER, "6px solid ".concat(color('action', '500')), zIndex('header', 2));
}
export var StyledTab = styled.button.withConfig({
  displayName: "StyledTab",
  componentId: "sc-956jkl-0"
})(["width:100%;text-align:center;cursor:pointer;font-size:", ";font-weight:normal;text-decoration:underline;background-color:", ";height:46px;margin-top:6px;border:1px solid transparent;border-top:none;border-bottom:none;position:relative;z-index:", ";padding:0 24px;& > div{margin:0 auto;}*{color:", ";}", ""], fontSize('base'), color('neutral', '100'), zIndex('header', 1), color('neutral', '600'), function (_ref) {
  var $isActive = _ref.$isActive;
  return $isActive && getActiveStyles();
});