import e from "styled-components";
import { getSpacing as d, getFontSize as r, getColorAlias as o, getDefaultTransition as a, getDarkenColor as i, convertToTransientProps as n } from "../../utils/index.js";
import { getTabsColor as l } from "./utils.js";
const g = e.div`
  display: flex;
  position: relative;
  flex-direction: column;
  direction: ${(t) => t.rtl ? "rtl" : "ltr"};
  max-width: 100%;
`, f = e.div`
  display: grid;
  grid-template-columns: 85% 15%;
  overflow: hidden;
  position: relative;
`, m = e.div`
  display: flex;
  position: relative;
  padding: 1px;
  overflow-x: scroll;
  scroll-behavior: smooth;
  &::-webkit-scrollbar {
    display: none;
  }
  -ms-overflow-style: none; /* IE and Edge */
`, u = e.div.withConfig({
  shouldForwardProp: n([
    "narrow",
    "selected",
    "disabled"
  ])
})`
  display: flex;
  justify-content: center;
  align-items: center;
  padding: ${(t) => t.narrow ? "12px" : "8px 16px"};
  border-radius: ${(t) => t.theme.radius.roundedA};
  width: ${(t) => t.narrow ? "70%" : "fit-content"};
  margin-bottom: ${d("s01")};
  ${(t) => l(t)}
  font-family: ${(t) => t.theme.font.familyPrimary};
  ${r("size16")};
  font-weight: ${(t) => t.theme.font.weightBold};
  outline-color: ${o("focusOuter")};
  max-width: 400px;
  cursor: pointer;
  ${a("background")}

  &:hover {
    background: ${i("hover01", "containerDefault")};
  }
  &:active {
    background: ${i("active01", "containerDefault")};
  }
`, h = e.div.withConfig({
  shouldForwardProp: n(["brandColor"])
})`
  position: absolute;
  width: ${(t) => t.width}px;
  bottom: 0;
  left: ${(t) => t.left}px;
  height: 4px;
  border-top-left-radius: ${(t) => t.theme.radius.roundedA};
  border-top-right-radius: ${(t) => t.theme.radius.roundedA};
  background: ${(t) => o(
  t.brandColor ? "interactiveBrand" : "interactivePrimary"
)};
  transition: ${({ theme: t }) => `${t.motion.speed.defaultS} ${t.motion.easing.easeDefault}`};
`, b = e.div`
  position: absolute;
  padding: 8px 16px;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  border: none;
  margin-bottom: 16px;
  transform: translate(0, -50%);
  top: 50%;
  left: ${(t) => t.left}px;
  min-width: 84px;
  min-height: ${(t) => t.minHeight}px;
`, $ = e.div``, x = e.div.withConfig({
  shouldForwardProp: n(["disabled"])
})`
  padding: 12px;
  cursor: ${(t) => t.disabled ? "not-allowed" : "pointer"};
  display: flex;
  align-items: center;
  border-bottom: 1px solid ${o("dividerDefault")};
  opacity: ${(t) => t.disabled ? 0.5 : 1};
  &:hover {
    background: ${(t) => t.disabled ? "initial" : i("hover01", "containerDefault")};
  }
  &:active {
    background: ${(t) => t.disabled ? "initial" : i("active01", "containerDefault")};
  }

  svg {
    fill: ${o("contentSubdued")};
    stroke: ${o("contentSubdued")};
  }
`, v = e.div`
  display: flex;
  flex-direction: column;
  width: 95%;
  padding-right: 20px;
`, w = e.span`
  font-weight: ${(t) => t.selected ? t.theme.font.weightBold : t.theme.font.weightRegular};
  ${r("size16")};
`, y = e.span`
  ${r("size14")};
  color: ${o("contentSubdued")};
`, k = e.div`
  padding-top: ${d("s04")};
  margin: 0 auto;
  width: 95%;
`;
e.div`
  border-bottom: 1px solid ${o("borderDefault")};
  width: 100%;
`;
e.div`
  height: 500px;
  width: 100%;
  font-family: ${(t) => t.theme.font.familyPrimary};
`;
export {
  k as DismissWrapper,
  b as ExpandWrapper,
  v as ExpandedItemText,
  w as ExpandedLabel,
  y as ExpandedSecondary,
  x as ExpandedTabItem,
  f as InnerWrapper,
  h as TabIndicator,
  $ as TabList,
  u as TabWrapper,
  m as TabsContainer,
  g as Wrapper
};
