import styled, { css } from 'styled-components';
import NormalizedElements from '../../common/NormalizedElements/index';
import { Flexbox, Separator } from '../..';
export var scrollStyles = css(["", ";", ";"], function (_ref) {
  var $scrollOptions = _ref.$scrollOptions;
  return $scrollOptions.active ? "\n  overflow: auto;\n  overflow-x: scroll;\n  white-space: nowrap;\n  " : "";
}, function (_ref2) {
  var $scrollOptions = _ref2.$scrollOptions;
  return $scrollOptions.scrollBarHidden ? " ::-webkit-scrollbar {\n    display: none;\n  }\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */" : "";
});
export var StyledSeparator = styled(Separator).withConfig({
  displayName: "Tabsstyles__StyledSeparator",
  componentId: "sc-bhi7sg-0"
})(["margin-top:-1px;"]);
export var StyledFlexbox = styled(Flexbox).withConfig({
  displayName: "Tabsstyles__StyledFlexbox",
  componentId: "sc-bhi7sg-1"
})(["list-style-type:none;padding:0;margin-top:0;margin-bottom:0;", ""], scrollStyles);
export var StyledButton = styled(NormalizedElements.Button).withConfig({
  displayName: "Tabsstyles__StyledButton",
  componentId: "sc-bhi7sg-2"
})(["background:none;display:flex;border:none;margin:0;padding:0;cursor:pointer;font-weight:inherit;color:", ";"], function (p) {
  return p.$active ? p.theme.colorTokens.neutral.text_default : p.theme.colorTokens.neutral.text_weak;
});
export var StyledUl = styled.ul.withConfig({
  displayName: "Tabsstyles__StyledUl",
  componentId: "sc-bhi7sg-3"
})(["padding:0;margin-top:0;margin-bottom:0;list-style:none;"]);