{"version":3,"sources":["button_group.pcss","../../../../lib/postcss_mixins/clearfix.pcss"],"names":[],"mappings":"AAKA,UACE,oBAAqB,CACrB,qBASF,CCVE,iCAHE,UAAW,CADX,aAQF,CAJA,gBAEE,UAEF,CDEA,mCAEE,+CACF,CAGF,mBAIE,eAAgB,CADhB,oBAAqB,CADrB,UAAW,CADX,iBA4BF,CAvBE,+BAEE,+DAAiE,CADjE,4DAEF,CAEA,8BAGE,gEAAkE,CAFlE,qDAAuD,CACvD,6DAEF,CAEA,+IAKE,qDAMF,CAJE,ygBAEE,mBACF,CAIJ,iBACE,UAgCF,CA9BE,4CAEE,+DAAiE,CADjE,4DAEF,CAEA,2CAGE,gEAAkE,CAFlE,qDAAuD,CACvD,6DAEF,CAEA,gCAEE,eAAgB,CADhB,oBAEF,CAOE,gNACE,qDACF,CAEA,qfAEE,mBACF,CAOF,0FAEE,SACF","file":"button_group.css","sourcesContent":["/* BtnGroup */\n\n/* A button group is a series of buttons laid out next to each other, all part\n** of one visual button, but separated by rules to be separate. */\n\n.BtnGroup {\n  display: inline-block;\n  vertical-align: middle;\n\n  @mixin clearfix;\n\n  /* Proper spacing for multiple button groups (a la, gollum editor) */\n  & + .BtnGroup,\n  & + .btn {\n    margin-left: var(--primer-control-small-gap, 4px);\n  }\n}\n\n.BtnGroup-item.btn {\n  position: relative;\n  float: left;\n  border-right-width: 0;\n  border-radius: 0;\n\n  &:first-child {\n    border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n  }\n\n  &:last-child {\n    border-right-width: var(--primer-borderWidth-thin, 1px);\n    border-top-right-radius: var(--primer-borderRadius-medium, 6px);\n    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);\n  }\n\n  &.selected,\n  &[aria-selected='true'],\n  &:focus,\n  &:active,\n  &:hover {\n    border-right-width: var(--primer-borderWidth-thin, 1px);\n\n    & + .BtnGroup-item,\n    & + .BtnGroup-parent .BtnGroup-item {\n      border-left-width: 0;\n    }\n  }\n}\n\n.BtnGroup-parent {\n  float: left;\n\n  &:first-child .BtnGroup-item {\n    border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n  }\n\n  &:last-child .BtnGroup-item {\n    border-right-width: var(--primer-borderWidth-thin, 1px);\n    border-top-right-radius: var(--primer-borderRadius-medium, 6px);\n    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);\n  }\n\n  & .BtnGroup-item {\n    border-right-width: 0;\n    border-radius: 0;\n  }\n\n  &.selected,\n  &[aria-selected='true'],\n  &:focus,\n  &:active,\n  &:hover {\n    & .BtnGroup-item {\n      border-right-width: var(--primer-borderWidth-thin, 1px);\n    }\n\n    & + .BtnGroup-item,\n    & + .BtnGroup-parent .BtnGroup-item {\n      border-left-width: 0;\n    }\n  }\n}\n\n/* ensure that the focus ring sits above the adjacent buttons */\n.BtnGroup-item,\n.BtnGroup-parent {\n  &:focus,\n  &:active {\n    z-index: 1;\n  }\n}\n","@define-mixin clearfix {\n  &::before {\n    display: table;\n    content: '';\n  }\n\n  &::after {\n    display: table;\n    clear: both;\n    content: '';\n  }\n}\n"]}