{"version":3,"sources":["../src/src/popover/popover.scss","../src/src/support/variables/layout.scss","../src/src/support/mixins/layout.scss"],"names":[],"mappings":"AAAA,SACE,iBAAkB,CAClB,WAAY,CACb,iBAGC,iBAAkB,CAClB,WAAY,CACZ,iBAAkB,CAClB,gBAAiB,CAJnB,iDASI,iBAAkB,CAClB,QAAS,CACT,oBAAqB,CACrB,UAAW,CAZf,yBAgBI,SCgBkB,CDdlB,gBAAiB,CAEjB,4BAA2C,CAC3C,+CAAgD,CArBpD,wBAyBI,SAAU,CACV,gBCAQ,CDER,4BAAqC,CAErC,2CAA4C,CA9BhD,qBAmCI,wCAAyC,CAC1C,yNASC,QAAS,CACT,+BAAgC,CANpC,8GAUI,YClBkB,CDmBlB,4CAA6C,CAXjD,2GAeI,YAAa,CAEb,wCAAyC,CAC1C,2DAMD,UAAW,CACX,cAAe,CAHjB,oJAOI,SAAU,CACV,aAAc,CARlB,2EAYI,UAAW,CAZf,yEAgBI,UAAW,CACZ,yDAMD,SAAU,CACV,aAAc,CAHhB,gJAOI,SCzDkB,CD0DlB,aAAc,CARlB,uEAYI,SAAmB,CACpB,gaAYC,OAAQ,CACR,SAAU,CACV,aAAc,CACd,+BAAgC,CAXpC,mNAgBI,eAA2B,CAhB/B,6MAoBI,eC9FQ,CD+FT,2GAQC,WCjGkB,CDkGlB,6CAA8C,CALlD,wGASI,WAAY,CAEZ,yCAA0C,CAC3C,wGAQC,UCjHkB,CDkHlB,8CAA+C,CALnD,qGASI,UAAW,CAEX,0CAA2C,CAC5C,4IAQC,QChIkB,CDiInB,wJAQC,QAAS,CAJb,6EAQI,WC9IkB,CDsItB,2EAYI,WAAqB,CEzKnB,0BF6KN,wBAGI,eAAgB,CAEnB","file":"popover.css","sourcesContent":[".Popover {\n  position: absolute;\n  z-index: 100;\n}\n\n.Popover-message {\n  position: relative;\n  width: 232px;\n  margin-right: auto;\n  margin-left: auto;\n\n  // Carets\n  &::before,\n  &::after {\n    position: absolute;\n    left: 50%;\n    display: inline-block;\n    content: \"\";\n  }\n\n  &::before {\n    top: -$spacer-3;\n    // stylelint-disable-next-line primer/spacing\n    margin-left: -9px;\n    // stylelint-disable-next-line primer/borders\n    border: $spacer-2 $border-style transparent;\n    border-bottom-color: var(--color-border-primary);\n  }\n\n  &::after {\n    top: -14px;\n    margin-left: -$spacer-2;\n    // stylelint-disable-next-line primer/borders\n    border: 7px $border-style transparent;\n    // stylelint-disable-next-line primer/borders\n    border-bottom-color: var(--color-bg-overlay);\n  }\n\n  // TODO: Refactor so that .Popover is not dependant on .Box\n  &.Box {\n    background-color: var(--color-bg-overlay);\n  }\n}\n\n// Bottom-oriented carets\n.Popover-message--bottom,\n.Popover-message--bottom-right,\n.Popover-message--bottom-left {\n  &::before,\n  &::after {\n    top: auto;\n    border-bottom-color: transparent;\n  }\n\n  &::before {\n    bottom: -$spacer-3;\n    border-top-color: var(--color-border-primary);\n  }\n\n  &::after {\n    bottom: -14px;\n    // stylelint-disable-next-line primer/borders\n    border-top-color: var(--color-bg-overlay);\n  }\n}\n\n// Top & Bottom: Right-oriented carets\n.Popover-message--top-right,\n.Popover-message--bottom-right {\n  right: -9px;\n  margin-right: 0;\n\n  &::before,\n  &::after {\n    left: auto;\n    margin-left: 0;\n  }\n\n  &::before {\n    right: 20px;\n  }\n\n  &::after {\n    right: 21px;\n  }\n}\n\n// Top & Bottom: Left-oriented carets\n.Popover-message--top-left,\n.Popover-message--bottom-left {\n  left: -9px;\n  margin-left: 0;\n\n  &::before,\n  &::after {\n    left: $spacer-4;\n    margin-left: 0;\n  }\n\n  &::after {\n    left: $spacer-4 + 1;\n  }\n}\n\n// Right- & Left-oriented carets\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom,\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n  &::before,\n  &::after {\n    top: 50%;\n    left: auto;\n    margin-left: 0;\n    border-bottom-color: transparent;\n  }\n\n  &::before {\n    // stylelint-disable-next-line primer/spacing\n    margin-top: -($spacer-2 + 1);\n  }\n\n  &::after {\n    margin-top: -$spacer-2;\n  }\n}\n\n// Right-oriented carets\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom {\n  &::before {\n    right: -$spacer-3;\n    border-left-color: var(--color-border-primary);\n  }\n\n  &::after {\n    right: -14px;\n    // stylelint-disable-next-line primer/borders\n    border-left-color: var(--color-bg-overlay);\n  }\n}\n\n// Left-oriented carets\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n  &::before {\n    left: -$spacer-3;\n    border-right-color: var(--color-border-primary);\n  }\n\n  &::after {\n    left: -14px;\n    // stylelint-disable-next-line primer/borders\n    border-right-color: var(--color-bg-overlay);\n  }\n}\n\n// Right & Left: Top-oriented carets\n.Popover-message--right-top,\n.Popover-message--left-top {\n  &::before,\n  &::after {\n    top: $spacer-4;\n  }\n}\n\n// Right & Left: Bottom-oriented carets\n.Popover-message--right-bottom,\n.Popover-message--left-bottom {\n  &::before,\n  &::after {\n    top: auto;\n  }\n\n  &::before {\n    bottom: $spacer-3;\n  }\n\n  &::after {\n    bottom: $spacer-3 + 1;\n  }\n}\n\n.Popover-message--large {\n\n  @include breakpoint(sm) {\n    min-width: 320px;\n  }\n}\n","// Layout variables\n\n// these are values for the display CSS property\n$display-values: (\n  block,\n  flex,\n  inline,\n  inline-block,\n  inline-flex,\n  none,\n  table,\n  table-cell\n) !default;\n\n// maps edges to respective corners for border-radius\n$edges: (\n  top: (top-left, top-right),\n  right: (top-right, bottom-right),\n  bottom: (bottom-right, bottom-left),\n  left: (bottom-left, top-left)\n) !default;\n\n// These are our margin and padding utility spacers. The default step size we\n// use is 8px. This gives us a key of:\n//    0 => 0px\n//    1 => 4px\n//    2 => 8px\n//    3 => 16px\n//    4 => 24px\n//    5 => 32px\n//    6 => 40px\n$spacer: 8px !default;\n\n// Our spacing scale\n$spacer-0: 0 !default;                  // 0\n$spacer-1: round($spacer / 2) !default; // 4px\n$spacer-2: $spacer !default;            // 8px\n$spacer-3: $spacer * 2 !default;        // 16px\n$spacer-4: $spacer * 3 !default;        // 24px\n$spacer-5: $spacer * 4 !default;        // 32px\n$spacer-6: $spacer * 5 !default;        // 40px\n\n// The list of spacer values\n$spacers: (\n  $spacer-0,\n  $spacer-1,\n  $spacer-2,\n  $spacer-3,\n  $spacer-4,\n  $spacer-5,\n  $spacer-6,\n) !default;\n\n// And the map of spacers, for easier looping:\n// @each $scale, $length in $spacer-map { ... }\n$spacer-map: (\n  0: $spacer-0,\n  1: $spacer-1,\n  2: $spacer-2,\n  3: $spacer-3,\n  4: $spacer-4,\n  5: $spacer-5,\n  6: $spacer-6,\n) !default;\n\n// Increases the core spacing scale first by 8px for $spacer-7, then by 16px\n// increments from $spacer-8 to $spacer-12, i.e. after 40px, we have 48, 64,\n// 80, 96, etc.\n$spacer-7:  $spacer * 6 !default;  // 48px\n$spacer-8:  $spacer * 8 !default;  // 64px\n$spacer-9:  $spacer * 10 !default; // 80px\n$spacer-10: $spacer * 12 !default; // 96px\n$spacer-11: $spacer * 14 !default; // 112px\n$spacer-12: $spacer * 16 !default; // 128px\n\n$spacers-large: (\n  7: $spacer-7,\n  8: $spacer-8,\n  9: $spacer-9,\n  10: $spacer-10,\n  11: $spacer-11,\n  12: $spacer-12,\n) !default;\n\n$spacer-map-extended: map-merge(\n  (\n    0: 0,\n    1: $spacer-1,\n    2: $spacer-2,\n    3: $spacer-3,\n    4: $spacer-4,\n    5: $spacer-5,\n    6: $spacer-6,\n  ),\n  $spacers-large,\n) !default;\n\n// Em spacer variables\n$em-spacer-1: 0.0625em !default; // 1/16\n$em-spacer-2: 0.125em !default;  // 1/8\n$em-spacer-3: 0.25em !default;   // 1/4\n$em-spacer-4: 0.375em !default;  // 3/8\n$em-spacer-5: 0.5em !default;    // 1/2\n$em-spacer-6: 0.75em !default;   // 3/4\n\n// Size scale\n// Used for buttons, inputs, labels, avatars etc.\n$size: 16px !default;\n\n$size-0: 0 !default;\n$size-1: $size !default;           // 16px\n$size-2: $size-1 +  4px !default;  // 20px\n$size-3: $size-2 +  4px !default;  // 24px\n$size-4: $size-3 +  4px !default;  // 28px\n$size-5: $size-4 +  4px !default;  // 32px\n$size-6: $size-5 +  8px !default;  // 40px\n$size-7: $size-6 +  8px !default;  // 48px\n$size-8: $size-7 + 16px !default;  // 64px\n\n// Fixed-width container variables\n$container-width: 980px !default;\n$grid-gutter:     10px !default;\n\n// Breakpoint widths\n$width-xs: 0 !default;\n// Small screen / phone\n$width-sm: 544px !default;\n// Medium screen / tablet\n$width-md: 768px !default;\n// Large screen / desktop (980 + (16 * 2)) <= container + gutters\n$width-lg: 1012px !default;\n// Extra large screen / wide desktop\n$width-xl: 1280px !default;\n\n// Responsive container widths\n$container-sm: $width-sm !default;\n$container-md: $width-md !default;\n$container-lg: $width-lg !default;\n$container-xl: $width-xl !default;\n\n// Breakpoints in the form (name: length)\n$breakpoints: (\n  sm: $width-sm,\n  md: $width-md,\n  lg: $width-lg,\n  xl: $width-xl\n) !default;\n\n// This map in the form (breakpoint: variant) is used to iterate over\n// breakpoints and create both responsive and non-responsive classes in one\n// loop:\n//\n// ```scss\n// @each $breakpoint, $variant of $responsive-variants {\n//   @include breakpoint($breakpoint) {\n//     .foo#{$variant}-bar { foo: bar !important; }\n//   }\n// }\n// ```\n$responsive-variants: (\n  \"\": \"\",\n  sm: \"-sm\",\n  md: \"-md\",\n  lg: \"-lg\",\n  xl: \"-xl\",\n) !default;\n\n// responive utility position values\n$responsive-positions: (\n  static,\n  relative,\n  absolute,\n  fixed,\n  sticky\n) !default;\n","// Responsive media queries\n\n@mixin breakpoint($breakpoint) {\n  @if $breakpoint == \"\" {\n    @content;\n  }\n\n  @else {\n    // Retrieves the value from the key\n    $value: map-get($breakpoints, $breakpoint);\n\n    // If the key exists in the map\n    @if $value != null {\n      // Prints a media query based on the value\n      @media (min-width: $value) {\n        @content;\n      }\n    }\n\n    // If the key doesn't exist in the map\n    @else {\n      @warn \"Unfortunately, no value could be retrieved from `#{$breakpoint}`. \"\n        + \"Please make sure it is defined in `$breakpoints` map.\";\n    }\n  }\n}\n\n// Retina media query\n\n@mixin retina-media-query {\n  @media\n    only screen and (-webkit-min-device-pixel-ratio: 2),\n    only screen and (min--moz-device-pixel-ratio: 2),\n    only screen and (-moz-min-device-pixel-ratio: 2),\n    only screen and (-o-min-device-pixel-ratio: 2/1),\n    only screen and (min-device-pixel-ratio: 2),\n    only screen and (min-resolution: 192dpi),\n    only screen and (min-resolution: 2dppx) {\n    @content;\n  }\n}\n\n// Clearfix\n//\n// Clears floats via mixin.\n\n@mixin clearfix {\n  &::before {\n    display: table;\n    content: \"\";\n  }\n\n  &::after {\n    display: table;\n    clear: both;\n    content: \"\";\n  }\n}\n"]}