{"version":3,"sources":["border_box.pcss"],"names":[],"mappings":"AAGA,KACE,4CAA6C,CAC7C,wCAAyC,CAGzC,mDAAqD,CAFrD,kBAAmB,CACnB,+CAEF,CAGA,gBACE,gBAyBF,CAfE,kFACE,yFACF,CAGE,6CAGE,gBAAiB,CADjB,iIAAsI,CADtI,yHAGF,CAGF,yBACE,yFACF,CAIA,2BAEE,gBAAiB,CADjB,iDAEF,CAEA,0BACE,mDACF,CAWE,gGAJA,iDAOA,CAHA,4CAEE,sGACF,CAGF,wBACE,iDACF,CAGF,YAGE,2CAA4C,CAC5C,wCAAyC,CACzC,kBAAmB,CAEnB,4DAA8D,CAC9D,6DAA+D,CAF/D,+CAAiD,CAJjD,kGAAuG,CADvG,+CAQF,CAEA,WACE,kDAAoD,CACpD,gDACF,CAEA,UAEE,kFAAoF,CADpF,+CASF,CALE,uBAGE,+DAAiE,CADjE,gEAAkE,CADlE,0DAGF,CAIF,SAME,6EAAqD,CAHrD,oBAAqB,CADrB,uDAA0D,CAD1D,+CAqDF,CA9CE,uBACE,4DAA8D,CAC9D,6DACF,CAEA,sBAEE,+DAAiE,CADjE,gEAEF,CAIA,yCAGE,qDACF,CAIE,gDACE,4BAA6B,CAC7B,WAAY,CACZ,SACF,CAGA,4DACE,eACF,CAQA,mFACE,2CAMF,CAHE,6DACE,SACF,CAMJ,sCACE,2CACF,CAIA,sCACE,2CACF,CAIA,2BACE,2CACF,CAIA,2BACE,2CACF,CAOA,yBADF,cAEI,6BAA8B,CAC9B,oBAOJ,CALI,oBACE,4BAA6B,CAC7B,oBACF,CACF,CAKF,sBACE,SACF,CAEA,YAME,6FAAgG,CADhG,+EAAqD,CAHrD,uDAA0D,CAD1D,+CAMF,CAGA,iBACE,gBAAiB,CACjB,eACF,CAOE,kCAFA,sCAKA,CAHA,uBACE,2CAEF,CAUA,gEACE,sCACF,CAeE,qFACE,yCACF,CAIJ,kBACE,2CAA4C,CAC5C,sCACF,CAIA,iBACE,8CACF,CAEA,eACE,2CACF,CAEA,eACE,2CACF,CAKE,6BAGE,eAAgB,CADhB,gIAAqI,CADrI,yHAGF","file":"border_box.css","sourcesContent":["/* BorderBox */\n\n/* TODO: Rename to BorderBox to match PVC */\n.Box {\n  background-color: var(--color-canvas-default);\n  border-color: var(--color-border-default);\n  border-style: solid;\n  border-width: var(--primer-borderWidth-thin, 1px);\n  border-radius: var(--primer-borderRadius-medium, 6px);\n}\n\n/* Box padding density options */\n.Box--condensed {\n  line-height: 1.25;\n\n  & .Box-header {\n    padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);\n  }\n\n  & .Box-body {\n    padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);\n  }\n\n  & .Box-footer {\n    padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);\n  }\n\n  & .Box-btn-octicon {\n    &.btn-octicon {\n      padding: var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);\n      margin: calc(var(--primer-controlStack-medium-gap-condensed, 8px) * -1) calc(var(--primer-controlStack-small-gap-spacious, 16px) * -1);\n      line-height: 1.25;\n    }\n  }\n\n  & .Box-row {\n    padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);\n  }\n}\n\n.Box--spacious {\n  & .Box-header {\n    padding: var(--primer-stack-padding-spacious, 24px);\n    line-height: 1.25;\n  }\n\n  & .Box-title {\n    font-size: var(--primer-text-title-size-medium, 20px);\n  }\n\n  & .Box-body {\n    padding: var(--primer-stack-padding-spacious, 24px);\n  }\n\n  & .Box-footer {\n    padding: var(--primer-stack-padding-spacious, 24px);\n  }\n\n  & .Box-btn-octicon {\n    &.btn-octicon {\n      padding: var(--primer-stack-padding-spacious, 24px);\n      margin: calc(var(--primer-stack-gap-spacious, 24px) * -1) calc(var(--primer-stack-gap-spacious, 24px) * -1);\n    }\n  }\n\n  & .Box-row {\n    padding: var(--primer-stack-padding-spacious, 24px);\n  }\n}\n\n.Box-header {\n  padding: var(--primer-stack-padding-normal, 16px);\n  margin: calc(var(--primer-borderWidth-thin, 1px) * -1) calc(var(--primer-borderWidth-thin, 1px) * -1) 0;\n  background-color: var(--color-canvas-subtle);\n  border-color: var(--color-border-default);\n  border-style: solid;\n  border-width: var(--primer-borderWidth-thin, 1px);\n  border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n  border-top-right-radius: var(--primer-borderRadius-medium, 6px);\n}\n\n.Box-title {\n  font-size: var(--primer-text-body-size-medium, 14px);\n  font-weight: var(--base-text-weight-semibold, 600);\n}\n\n.Box-body {\n  padding: var(--primer-stack-padding-normal, 16px);\n  border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);\n\n  /* Ensures bottom-border doesn't poke out when .Box-body used without box-footer */\n  &:last-of-type {\n    margin-bottom: calc(var(--primer-borderWidth-thin, 1px) * -1);\n    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);\n    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n  }\n}\n\n/* Box rows */\n.Box-row {\n  padding: var(--primer-stack-padding-normal, 16px);\n  margin-top: calc(var(--primer-borderWidth-thin, 1px) * -1);\n  list-style-type: none; /* To account for applying Box component to a list */\n  border-top-color: var(--color-border-muted);\n  border-top-style: solid;\n  border-top-width: var(--primer-borderWidth-thin, 1px);\n\n  &:first-of-type {\n    border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n    border-top-right-radius: var(--primer-borderRadius-medium, 6px);\n  }\n\n  &:last-of-type {\n    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);\n    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n  }\n\n  /* Adds a blue vertical line to the left of the row\n  ** For indicating a row item is unread */\n  &.Box-row--unread,\n  /* .unread to be deprecated with .Box-row-unread */\n  &.unread {\n    box-shadow: inset 2px 0 0 var(--color-accent-emphasis);\n  }\n\n  &.navigation-focus {\n    /* Focus styles for when drag icon */\n    & .Box-row--drag-button {\n      color: var(--color-accent-fg);\n      cursor: grab;\n      opacity: 100;\n    }\n\n    /* Grabbing while row is dragged */\n    &.is-dragging .Box-row--drag-button {\n      cursor: grabbing;\n    }\n\n    /* Row dragging styles */\n    &.sortable-chosen {\n      background-color: var(--color-canvas-subtle);\n    }\n\n    /* Makes dragging row background gray */\n    &.sortable-ghost {\n      background-color: var(--color-canvas-subtle);\n\n      /* Hides contents of row while dragging so row looks solid gray */\n      & .Box-row--drag-hide {\n        opacity: 0;\n      }\n    }\n  }\n}\n\n.Box-row--focus-gray {\n  &.navigation-focus {\n    background-color: var(--color-canvas-subtle);\n  }\n}\n\n.Box-row--focus-blue {\n  &.navigation-focus {\n    background-color: var(--color-accent-subtle);\n  }\n}\n\n.Box-row--hover-gray {\n  &:hover {\n    background-color: var(--color-canvas-subtle);\n  }\n}\n\n.Box-row--hover-blue {\n  &:hover {\n    background-color: var(--color-accent-subtle);\n  }\n}\n\n/* Optional link style\n** Makes links on mobile blue since they don't have hover state,\n** and links are dark-gray with blue hover on desktop. */\n.Box-row-link {\n  @media (min-width: 768px) {\n    color: var(--color-fg-default);\n    text-decoration: none;\n\n    &:hover {\n      color: var(--color-accent-fg);\n      text-decoration: none;\n    }\n  }\n}\n\n/* Optional drag icon styles for reordering items\n** Focus styles included in .Box-row above */\n.Box-row--drag-button {\n  opacity: 0;\n}\n\n.Box-footer {\n  padding: var(--primer-stack-padding-normal, 16px);\n  margin-top: calc(var(--primer-borderWidth-thin, 1px) * -1); /* prevents double border when used with .Box-body */\n  border-top-color: var(--color-border-default);\n  border-top-style: solid;\n  border-top-width: var(--primer-borderWidth-thin, 1px);\n  border-radius: 0 0 var(--primer-borderRadius-medium, 6px) var(--primer-borderRadius-medium, 6px);\n}\n\n/* Option for a box with scrolling content */\n.Box--scrollable {\n  max-height: 324px;\n  overflow: scroll;\n}\n\n/* Box themes */\n\n.Box--blue {\n  border-color: var(--color-accent-muted);\n\n  & .Box-header {\n    background-color: var(--color-accent-subtle);\n    border-color: var(--color-accent-muted);\n  }\n\n  & .Box-body {\n    border-color: var(--color-accent-muted);\n  }\n\n  & .Box-row {\n    border-color: var(--color-accent-muted);\n  }\n\n  & .Box-footer {\n    border-color: var(--color-accent-muted);\n  }\n}\n\n/* Applies and red border to the outside of the box,\n** but not to the border separating rows. */\n.Box--danger {\n  border-color: var(--color-danger-emphasis);\n\n  & .Box-row {\n    &:first-of-type {\n      border-color: var(--color-danger-emphasis);\n    }\n  }\n\n  & .Box-body {\n    &:last-of-type {\n      border-color: var(--color-danger-emphasis);\n    }\n  }\n}\n\n.Box-header--blue {\n  background-color: var(--color-accent-subtle);\n  border-color: var(--color-accent-muted);\n}\n\n/* Box row highlight themes */\n\n.Box-row--yellow {\n  background-color: var(--color-attention-subtle);\n}\n\n.Box-row--blue {\n  background-color: var(--color-accent-subtle);\n}\n\n.Box-row--gray {\n  background-color: var(--color-canvas-subtle);\n}\n\n/* Box with btn-octicon */\n.Box-btn-octicon {\n  /* Increase specificity when btn-octicon is used because comes after .Box in the cascade */\n  &.btn-octicon {\n    padding: var(--primer-control-medium-paddingInline-spacious, 16px) var(--primer-control-medium-paddingInline-spacious, 16px);\n    margin: calc(var(--primer-controlStack-small-gap-spacious, 16px) * -1) calc(var(--primer-controlStack-small-gap-spacious, 16px) * -1);\n    line-height: 1.5; /* override btn-octicon line-height */\n  }\n}\n"]}