@primer/react/dist/SegmentedControl/SegmentedControl-6389d0da.css.map

An implementation of GitHub's Primer Design System using React

{"version":3,"sources":["../src/SegmentedControl/SegmentedControl.module.css.js"],"names":[],"mappings":"AAAA,6CAEE,mCAAoC,CASpC,8EAAkD,CAClD,8FAAuF,CACvF,gDAAyC,CATzC,mBAAoB,CAMpB,8CAAuC,CAHvC,WAAY,CAEZ,QAAS,CADT,SA0HF,CAlHE,mEACE,YAAa,CACb,UAAW,CAEX,mCACF,CAEA,oEACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CAEA,wCACE,0EACE,YAAa,CACb,UAAW,CAEX,mCACF,CAEA,2EACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CACF,CAEA,yBACE,2EACE,YAAa,CACb,UAAW,CAEX,mCACF,CAEA,4EACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CACF,CAEA,2BACE,wEACE,YAAa,CACb,UAAW,CAEX,mCACF,CASA,qLACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CACF,CAQA,2KACE,YACF,CAEA,wCAKE,yLACE,YACF,CACF,CAEA,yBAKE,2LACE,YACF,CACF,CAEA,2BAKE,qLACE,YACF,CACF,CAEA,sEAGE,4CAAsC,CADtC,WAEF,CAGF,8CACE,YAwBF,CArBE,qEACE,aACF,CAEA,wCACE,4EACE,aACF,CACF,CAEA,yBACE,6EACE,aACF,CACF,CAEA,2BACE,0EACE,aACF,CACF,CAGF,iCAEE,aAAc,CAKd,WAAY,CADZ,kBAAmB,CAFnB,eAAgB,CAHhB,iBAgDF,CAxCE,kDAEE,gBAiBF,CAfE,wDAQE,uEAA4C,CAJ5C,+BAA0B,CAE1B,UAAW,CALX,iBAAkB,CAElB,yCAAoC,CADpC,4BAAuB,CAGvB,SAIF,CAEA,6JAEE,4BACF,CAGF,kEACE,4BACF,CAEA,6CAEE,gBACF,CAEA,4CAEE,iBACF,CAEA,qEAGE,kBAAmB,CADnB,YAAa,CADb,4CAGF,CAGF,mCAEE,6CAA8C,CAC9C,uCAAwC,CACxC,oEAA4D,CAW5D,4BAA6B,CAC7B,wBAAyB,CAGzB,mDAAoD,CAFpD,cAAe,CAJf,kBAAmB,CACnB,cAAe,CAJf,mBAAoB,CACpB,iBAAkB,CAClB,8CAA2C,CAL3C,WAAY,CAEZ,gDAAiD,CAHjD,UAmEF,CApDE,uCACE,+CAA0B,CAC1B,gDACF,CAGA,wDAGE,eAAgB,CAFhB,qFAAuD,CACvD,mBAOF,CAHE,4EACE,6BACF,CAIF,gEAGE,eAAgB,CAFhB,qFAAuD,CACvD,mBAEF,CAGA,8EAEE,OACF,CAEA,gFAGE,4BAA6B,CAD7B,6DAA8B,CAD9B,kBAQF,CAJE,oFACE,4DAA6B,CAC7B,6DACF,CAGF,wBACE,0CAME,UAAW,CAFX,MAAO,CACP,eAAgB,CAJhB,iBAAkB,CAElB,OAAQ,CADR,OAAQ,CAKR,0BACF,CACF,CAGF,uCACE,8CACF,CAEA,oCAiBE,kBAAmB,CAVnB,wBAAyB,CASzB,sGAAyG,CARzG,kBAAmB,CACnB,6CAAqC,CARrC,YAAa,CACb,WAAY,CAgBZ,sBAAuB,CAZvB,2GAA4G,CAF5G,4GAeF,CAEA,sDAEE,gDAA6C,CAD7C,SAaF,CAVE,0FAKE,4EAAiD,CACjD,gFAAiD,CAEjD,mDAAoD,CAJpD,0DAA2D,CAF3D,2DAOF,CAIA,2HACE,qFACF,CAEA,4HACE,uFACF,CAGF,uCAOE,uBAAwB,CANxB,aAAc,CAGd,gDAA6C,CAF7C,QAAS,CACT,eAAgB,CAEhB,mBAAoB,CAGpB,wBAAiB,CAAjB,gBAAiB,CAFjB,iBAGF,CAEA,wCACE,sCACF","file":"SegmentedControl-6389d0da.css","sourcesContent":[".SegmentedControl {\n  /* TODO: use primitive `control.medium.size` when it is available instead of '32px' */\n  --segmented-control-icon-width: 32px;\n\n  display: inline-flex;\n\n  /* TODO: use primitive `control.{small|medium}.size` when it is available */\n  height: 32px;\n  padding: 0;\n  margin: 0;\n  font-size: var(--text-body-size-medium);\n  background-color: var(--controlTrack-bgColor-rest);\n  border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest, transparent);\n  border-radius: var(--borderRadius-medium);\n\n  /* Responsive full-width */\n  &[data-full-width='true'] {\n    display: flex;\n    width: 100%;\n\n    --segmented-control-icon-width: 100%;\n  }\n\n  &[data-full-width='false'] {\n    display: inline-flex;\n    width: auto;\n\n    --segmented-control-icon-width: 32px;\n  }\n\n  @media (--viewportRange-narrow) {\n    &[data-full-width-narrow='true'] {\n      display: flex;\n      width: 100%;\n\n      --segmented-control-icon-width: 100%;\n    }\n\n    &[data-full-width-narrow='false'] {\n      display: inline-flex;\n      width: auto;\n\n      --segmented-control-icon-width: 32px;\n    }\n  }\n\n  @media (--viewportRange-regular) {\n    &[data-full-width-regular='true'] {\n      display: flex;\n      width: 100%;\n\n      --segmented-control-icon-width: 100%;\n    }\n\n    &[data-full-width-regular='false'] {\n      display: inline-flex;\n      width: auto;\n\n      --segmented-control-icon-width: 32px;\n    }\n  }\n\n  @media (--viewportRange-wide) {\n    &[data-full-width-wide='true'] {\n      display: flex;\n      width: 100%;\n\n      --segmented-control-icon-width: 100%;\n    }\n\n    &[data-full-width-wide='false'] {\n      display: inline-flex;\n      width: auto;\n\n      --segmented-control-icon-width: 32px;\n    }\n\n    &[data-full-width-regular='true']:not([data-full-width-wide='true']) {\n      display: inline-flex;\n      width: auto;\n\n      --segmented-control-icon-width: 32px;\n    }\n  }\n\n  /* Hide when dropdown variant is active */\n  &[data-variant='dropdown'] {\n    display: none;\n  }\n\n  /* Handle hideLabels variant - hide button text */\n  &[data-variant='hideLabels'] .Text {\n    display: none;\n  }\n\n  @media (--viewportRange-narrow) {\n    &[data-variant-narrow='dropdown'] {\n      display: none;\n    }\n\n    &[data-variant-narrow='hideLabels'] .Text {\n      display: none;\n    }\n  }\n\n  @media (--viewportRange-regular) {\n    &[data-variant-regular='dropdown'] {\n      display: none;\n    }\n\n    &[data-variant-regular='hideLabels'] .Text {\n      display: none;\n    }\n  }\n\n  @media (--viewportRange-wide) {\n    &[data-variant-wide='dropdown'] {\n      display: none;\n    }\n\n    &[data-variant-wide='hideLabels'] .Text {\n      display: none;\n    }\n  }\n\n  &:where([data-size='small']) {\n    /* TODO: use primitive `control.{small|medium}.size` when it is available */\n    height: 28px;\n    font-size: var(--text-body-size-small);\n  }\n}\n\n.DropdownContainer {\n  display: none;\n\n  /* Show when dropdown variant is active */\n  &[data-variant='dropdown'] {\n    display: block;\n  }\n\n  @media (--viewportRange-narrow) {\n    &[data-variant-narrow='dropdown'] {\n      display: block;\n    }\n  }\n\n  @media (--viewportRange-regular) {\n    &[data-variant-regular='dropdown'] {\n      display: block;\n    }\n  }\n\n  @media (--viewportRange-wide) {\n    &[data-variant-wide='dropdown'] {\n      display: block;\n    }\n  }\n}\n\n.Item {\n  position: relative;\n  display: block;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-top: -1px;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: -1px;\n  flex-grow: 1;\n\n  &:not(:last-child) {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-right: 1px;\n\n    &::after {\n      position: absolute;\n      top: var(--base-size-8);\n      right: calc(-1 * var(--base-size-2));\n      bottom: var(--base-size-8);\n      width: 1px;\n      content: '';\n      /* stylelint-disable-next-line primer/colors */\n      background-color: var(--borderColor-default);\n    }\n\n    &:has(+ [data-selected])::after,\n    &:where([data-selected])::after {\n      background-color: transparent;\n    }\n  }\n\n  &:focus-within:has(:focus-visible) {\n    background-color: transparent;\n  }\n\n  &:first-child {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-left: -1px;\n  }\n\n  &:last-child {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-right: -1px;\n  }\n\n  .Counter {\n    margin-inline-start: var(--base-size-8);\n    display: flex;\n    align-items: center;\n  }\n}\n\n.Button {\n  /* TODO: use primitive `primer.control.medium.paddingInline.normal` when it is available */\n  --segmented-control-button-inner-padding: 12px;\n  --segmented-control-button-bg-inset: 4px;\n  --segmented-control-outer-radius: var(--borderRadius-medium);\n\n  width: 100%;\n  height: 100%;\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--segmented-control-button-bg-inset);\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: var(--base-text-weight-normal);\n  color: currentColor;\n  cursor: pointer;\n  background-color: transparent;\n  border-color: transparent;\n  border-width: 0;\n  /* stylelint-disable-next-line primer/borders */\n  border-radius: var(--segmented-control-outer-radius);\n\n  & svg {\n    fill: var(--fgColor-muted);\n    color: var(--fgColor-muted);\n  }\n\n  /* fallback :focus state */\n  &:focus:not(:disabled) {\n    outline: var(--base-size-2) solid var(--fgColor-accent);\n    outline-offset: -1px;\n    box-shadow: none;\n\n    /* remove fallback :focus if :focus-visible is supported */\n    &:not(:focus-visible) {\n      outline: solid 1px transparent;\n    }\n  }\n\n  /* default focus state */\n  &:focus-visible:not(:disabled) {\n    outline: var(--base-size-2) solid var(--fgColor-accent);\n    outline-offset: -1px;\n    box-shadow: none;\n  }\n\n  /* stylelint-disable-next-line selector-max-specificity */\n  &:focus:focus-visible:not(:last-child)::after {\n    /* fixes an issue where the focus outline shows over the pseudo-element */\n    width: 0;\n  }\n\n  &[aria-disabled='true']:not([aria-current='true']) {\n    cursor: not-allowed;\n    color: var(--fgColor-disabled);\n    background-color: transparent;\n\n    & svg {\n      fill: var(--fgColor-disabled);\n      color: var(--fgColor-disabled);\n    }\n  }\n\n  @media (pointer: coarse) {\n    &::before {\n      position: absolute;\n      top: 50%;\n      right: 0;\n      left: 0;\n      min-height: 44px;\n      content: '';\n      transform: translateY(-50%);\n    }\n  }\n}\n\n.IconButton {\n  width: var(--segmented-control-icon-width, 32px);\n}\n\n.Content {\n  display: flex;\n  height: 100%;\n  /* stylelint-disable-next-line primer/spacing */\n  padding-right: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n  /* stylelint-disable-next-line primer/spacing */\n  padding-left: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n  border-color: transparent;\n  border-style: solid;\n  border-width: var(--borderWidth-thin);\n\n  /*\n    innerRadius = outerRadius - distance/2\n    https://stackoverflow.com/questions/2932146/math-problem-determine-the-corner-radius-of-an-inner-border-based-on-outer-corn\n  */\n  /* stylelint-disable-next-line primer/borders */\n  border-radius: calc(var(--segmented-control-outer-radius) - var(--segmented-control-button-bg-inset) / 2);\n  align-items: center;\n  justify-content: center;\n}\n\n.Button[aria-current='true'] {\n  padding: 0;\n  font-weight: var(--base-text-weight-semibold);\n\n  .Content {\n    /* stylelint-disable-next-line primer/spacing */\n    padding-right: var(--segmented-control-button-inner-padding);\n    /* stylelint-disable-next-line primer/spacing */\n    padding-left: var(--segmented-control-button-inner-padding);\n    background-color: var(--controlKnob-bgColor-rest);\n    border-color: var(--controlKnob-borderColor-rest);\n    /* stylelint-disable-next-line primer/borders */\n    border-radius: var(--segmented-control-outer-radius);\n  }\n}\n\n.Button:not([aria-current='true'], [aria-disabled='true']) {\n  &:hover .Content {\n    background-color: var(--controlTrack-bgColor-hover);\n  }\n\n  &:active .Content {\n    background-color: var(--controlTrack-bgColor-active);\n  }\n}\n\n.Text::after {\n  display: block;\n  height: 0;\n  overflow: hidden;\n  font-weight: var(--base-text-weight-semibold);\n  pointer-events: none;\n  visibility: hidden;\n  content: attr(data-text);\n  user-select: none;\n}\n\n.LeadingIcon {\n  margin-right: var(--base-size-4);\n}\n"]}