import e, { css as n } from "styled-components";
import { getFontSize as o, getSpacing as a, convertToTransientProps as r, getColorAlias as i } from "../../utils/index.js";
const p = e.div`
  font-family: ${(t) => t.theme.font.familyPrimary};
  display: flex;
  flex-direction: column;
  width: 100%;
  ${o("size16")};
`, c = e.div.withConfig({
  shouldForwardProp: r(["isThumbText"])
})`
  position: relative;
  display: flex;
  min-width: 150px;
  width: 100%;
  height: 40px;
  ${(t) => t.isThumbText ? n`
          margin-bottom: ${a("s02")};
        ` : n`
          margin-bottom: ${a("s00")};
        `};
  cursor: pointer;
  align-items: center;
`, d = e.input``, h = e.span.withConfig({
  shouldForwardProp: r(["trackColor"])
})`
  width: 100%;
  height: 4px;
  border-radius: ${(t) => t.theme.radius.roundedA};
  ${(t) => n`
    background: linear-gradient(
      to right,
      ${t.trackColor === "primary" ? i("interactiveBrand") : i("supportInfoInverse")}
        0%,
      ${t.trackColor === "primary" ? i("interactiveBrand") : i("supportInfoInverse")}
        ${t.position}%,
      ${i("interactiveSecondary")} ${t.position}%,
      ${i("interactiveSecondary")} 100%
    );
  `}
`, m = e.div`
  cursor: pointer;
  position: absolute;
  left: ${(t) => t.position ? `calc(${t.position}% - 10px)` : "0%"};
  top: 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
`, u = e.span`
  ${o("size14")};
  white-space: nowrap;
  position: absolute;
  top: 18px;
  color: ${i("containerInverse")};
`, x = e.span`
  width: 16px;
  height: 16px;
  background: ${i("interactiveLight")};
  border-radius: ${(t) => t.theme.radius.roundedE};
  box-shadow: ${(t) => t.theme.elevation.e2};
  top: 11px;
`, f = e.div.withConfig({
  shouldForwardProp: r(["onlyMax"])
})`
  ${o("size14")}
  color: ${i("contentDisabled")};
  display: flex;
  align-items: center;
  justify-content: ${(t) => t.onlyMax ? "space-between" : "flex-start"};
`, $ = e.div`
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
`, g = e.div`
  display: flex;
  justify-content: space-between;
  margin-bottom: -8px;
`, y = e.span`
  ${o("size14")};
  font-weight: ${(t) => t.theme.font.weightBold};
  color: ${i("containerInverse")};
`, v = e.span`
  ${o("size14")};
  display: flex;
  color: ${i("contentDisabled")};
  align-items: flex-end;
`;
e.div`
  display: flex;
  justify-content: center;
  > div {
    width: 300px;
  }
`;
export {
  $ as Col,
  d as Input,
  f as MinMaxValuesWrapper,
  c as SliderWrapper,
  v as SupportText,
  g as TextWrapper,
  x as Thumb,
  u as ThumbValue,
  m as ThumbWrapper,
  y as Title,
  h as Track,
  p as Wrapper
};
