{"version":3,"sources":["underline_nav.pcss","<no source>"],"names":[],"mappings":"AAAA,iBAAiB;;AAEjB;EACE,aAAa;EACb,qCAAqC;EACrC,gBAAgB;EAChB,kBAAkB;EAClB,oDAAoD;EACpD,gCAAgC;EAChC,8BAA8B;AAYhC;;AAVE;IACE,kDAAkD;IAClD,8BAA8B;IAC9B,4CAA4C;EAC9C;;AAEA;IACE,kCAAkC;IAClC,+CAA+C;EACjD;;AAGF;EACE,aAAa;EACb,mBAAmB;EACnB,0CAA0C;EAC1C,gBAAgB;AAClB;;AAEA;EACE,kBAAkB;EAClB,aAAa;EACb,oEAAoE;EACpE,oDAAoD;EACpD,iBAAiB;EACjB,8BAA8B;EAC9B,kBAAkB;EAClB,mBAAmB;EACnB,eAAe;EACf,6BAA6B;EAC7B,SAAS;EACT,qDAAqD;EACrD,mBAAmB;AAwDrB;;AAtDE;;;IAGE,8BAA8B;IAC9B,qBAAqB;IACrB,+CAA+C;IAC/C,oBAAoB;IACpB,8CAA8C;EAChD;;AAEA,sHAAsH;;AACtH;IACE,cAAc;IACd,SAAS;IACT,kDAAkD;IAClD,kBAAkB;IAClB,2BAA2B;EAC7B;;AAEA,+BAA+B;;AAE7B;EClEJ,mBAAA;EAAA,SAAA;EAAA,UAAA;EAAA,YAAA;EAAA,aAAA;EAAA,iBAAA;EAAA,YAAA;EAAA;ADkE8B;;AAG5B,qDAAqD;;AACrD;IACE;MACE,8BAA8B;MAC9B,qBAAqB;MACrB,0DAA0D;MAC1D,qCAAqC;IACvC;EACF;;AAEA;;;IAGE,kDAAkD;IAClD,8BAA8B;IAC9B,sDAAsD;;IAEtD,+BAA+B;EAYjC;;AAXE;MACE,kBAAkB;MAClB,UAAU;MACV,wBAAwB,EAAE,uCAAuC;MACjE,WAAW;MACX,WAAW;MACX,WAAW;MACX,6CAA6C;MAC7C,qDAAqD;MACrD,+BAA+B;IACjC;;AAIJ;EACE,yBAAyB;AAK3B;;AAHE;IACE,cAAc;EAChB;;AAGF;EACE,kBAAkB;AACpB;;AAEA;EACE,cAAc;;EAEd,oEAAoE;AAItE;;AAHE;IACE,qCAAqC;EACvC;;AAGF;EACE,0BAA0B;AAI5B;;AALA;EAEE,mDAAmD;EACnD,4BAA4B;EAC5B,2BAA2B;AAC7B;;AAEA;EACE,aAAa;EACb,8BAA8B;AAChC","file":"underline_nav.css","sourcesContent":["/* UnderlineNav */\n\n.UnderlineNav {\n  display: flex;\n  min-height: var(--base-size-48, 48px);\n  overflow-x: auto;\n  overflow-y: hidden;\n  box-shadow: inset 0 -1px 0 var(--color-border-muted);\n  -webkit-overflow-scrolling: auto;\n  justify-content: space-between;\n\n  & .Counter {\n    margin-left: var(--yattho-control-medium-gap, 8px);\n    color: var(--color-fg-default);\n    background-color: var(--color-neutral-muted);\n  }\n\n  & .Counter--primary {\n    color: var(--color-fg-on-emphasis);\n    background-color: var(--color-neutral-emphasis);\n  }\n}\n\n.UnderlineNav-body {\n  display: flex;\n  align-items: center;\n  gap: var(--yattho-control-medium-gap, 8px);\n  list-style: none;\n}\n\n.UnderlineNav-item {\n  position: relative;\n  display: flex;\n  padding: 0 var(--yattho-control-medium-paddingInline-condensed, 8px);\n  font-size: var(--yattho-text-body-size-medium, 14px);\n  line-height: 30px;\n  color: var(--color-fg-default);\n  text-align: center;\n  white-space: nowrap;\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n  border-radius: var(--yattho-borderRadius-medium, 6px);\n  align-items: center;\n\n  &:hover,\n  &:focus,\n  &:focus-visible {\n    color: var(--color-fg-default);\n    text-decoration: none;\n    border-bottom-color: var(--color-neutral-muted);\n    outline-offset: -2px;\n    transition: border-bottom-color 0.12s ease-out;\n  }\n\n  /* renders a visibly hidden \"copy\" of the label in bold, reserving box space for when label becomes bold on selected */\n  & [data-content]::before {\n    display: block;\n    height: 0;\n    font-weight: var(--base-text-weight-semibold, 600);\n    visibility: hidden;\n    content: attr(data-content);\n  }\n\n  /* increase touch target area */\n  &::before {\n    @mixin minTouchTarget 48px;\n  }\n\n  /* hover state was \"sticking\" on mobile after click */\n  @media (pointer: fine) {\n    &:hover {\n      color: var(--color-fg-default);\n      text-decoration: none;\n      background: var(--color-action-list-item-default-hover-bg);\n      transition: background 0.12s ease-out;\n    }\n  }\n\n  &.selected,\n  &[role='tab'][aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    font-weight: var(--base-text-weight-semibold, 600);\n    color: var(--color-fg-default);\n    border-bottom-color: var(--color-yattho-border-active);\n\n    /* current/selected underline */\n    &::after {\n      position: absolute;\n      right: 50%;\n      bottom: calc(50% - 25px); /* 48px total height / 2 (24px) + 1px */\n      width: 100%;\n      height: 2px;\n      content: '';\n      background: var(--color-yattho-border-active);\n      border-radius: var(--yattho-borderRadius-medium, 6px);\n      transform: translate(50%, -50%);\n    }\n  }\n}\n\n.UnderlineNav--right {\n  justify-content: flex-end;\n\n  & .UnderlineNav-actions {\n    flex: 1 1 auto;\n  }\n}\n\n.UnderlineNav-actions {\n  align-self: center;\n}\n\n.UnderlineNav--full {\n  display: block;\n\n  /* required for underline to align with additional wrapper element */\n  & .UnderlineNav-body {\n    min-height: var(--base-size-48, 48px);\n  }\n}\n\n.UnderlineNav-octicon {\n  display: inline !important;\n  margin-right: var(--yattho-control-medium-gap, 8px);\n  color: var(--color-fg-muted);\n  fill: var(--color-fg-muted);\n}\n\n.UnderlineNav-container {\n  display: flex;\n  justify-content: space-between;\n}",null]}