import n, { css as r } from "styled-components";
import { getFontSize as i, getColorAlias as t, getSpacing as a, getDarkenColor as o, convertToTransientProps as s } from "../../../../utils/index.js";
const c = n.button.withConfig({
  shouldForwardProp: s([
    "hasFocus",
    "segmentPadding",
    "isActive"
  ])
})`
  display: flex;
  align-items: center;
  justify-content: center;
  padding: ${(e) => e.segmentPadding};
  cursor: ${(e) => e.disabled ? "not-allowed" : "pointer"};
  border: 2px solid transparent;
  background: transparent;
  border-radius: ${({ theme: e }) => e.radius.roundedE};
  font-weight: ${(e) => e.theme.font.weightBold};
  font-family: ${(e) => e.theme.font.familyPrimary};
  ${i("size14")};
  color: ${(e) => t(e.disabled ? "contentDisabled" : "contentDefault")};
  svg {
    margin-right: ${a("s01")};
    fill: ${(e) => t(e.disabled ? "contentDisabled" : "contentDefault")};
  }

  ${(e) => !e.disabled && r`
      &:hover {
        background: ${o("hover02", "containerStrong")};
      }
      &:focus {
        border: 2px solid
          ${e.hasFocus ? t("focusOuter") : "transparent"};
      }
      &:active {
        background: ${o("active01", "containerStrong")};
      }
    `};

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
`, g = n.div`
  display: flex;
  align-items: center;
`;
export {
  g as SegmentLabel,
  c as SegmentWrapper
};
