{"version":3,"names":["scColumnCss","ScColumnStyle0","ScColumn","render","h","Host","key","scColumnsCss","ScColumnsStyle0","ScColumns","class","this","verticalAlignment","isStackedOnMobile","isFullHeight","isReversedOnMobile"],"sources":["src/components/ui/column/sc-column.css?tag=sc-column&encapsulation=shadow","src/components/ui/column/sc-column.tsx","src/components/ui/columns/sc-columns.scss?tag=sc-columns","src/components/ui/columns/sc-columns.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n::slotted(:not(.wp-block-spacer):not(:last-child):not(.is-empty):not(style)) {\n  margin-bottom: var(--sc-form-row-spacing, 0.75em);\n}\n\n::slotted(:not(.wp-block-spacer):not(:last-child):not(.is-empty):not(style):not(.is-layout-flex)) {\n  display: block;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'sc-column',\n  styleUrl: 'sc-column.css',\n  shadow: true,\n})\nexport class ScColumn {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n",".sc-columns {\n  display: flex;\n  box-sizing: border-box;\n  gap: var(--sc-column-spacing, var(--sc-spacing-xxxx-large));\n  margin-left: auto;\n  margin-right: auto;\n  width: 100%;\n\n  // Responsiveness: Allow wrapping on mobile.\n  flex-wrap: wrap !important;\n  @media (min-width: 782px) {\n    flex-wrap: nowrap !important;\n  }\n\n  // Ensure full vertical column stretch when alignment is not set.\n  // This overrides the Layout block support's default align-items setting of `center`.\n  align-items: initial !important;\n\n  /**\n\t* All Columns Alignment\n\t*/\n  &.are-vertically-aligned-top {\n    align-items: flex-start;\n  }\n\n  &.are-vertically-aligned-center {\n    align-items: center;\n  }\n\n  &.are-vertically-aligned-bottom {\n    align-items: flex-end;\n  }\n\n  &:not(.is-not-stacked-on-mobile).is-full-height > sc-column {\n    @media (max-width: 781px) {\n      padding: 30px !important;\n    }\n  }\n\n  &:not(.is-not-stacked-on-mobile) > sc-column {\n    max-width: none;\n    // Responsiveness: Show at most one columns on mobile. This must be\n    // important since the Column assigns its own width as an inline style.\n    @media (max-width: 781px) {\n      flex-basis: 100% !important;\n    }\n\n    // At large viewports, show all columns horizontally.\n    @media (min-width: 782px) {\n      // Available space should be divided equally amongst columns without an\n      // assigned width. This is achieved by assigning a flex basis that is\n      // consistent (equal), would not cause the sum total of column widths to\n      // exceed 100%, and which would cede to a column with an assigned width.\n      // The `flex-grow` allows columns to maximally and equally occupy space\n      // remaining after subtracting the space occupied by columns with\n      // explicit widths (if any exist).\n      flex-basis: 0;\n      flex-grow: 1;\n\n      // Columns with an explicitly-assigned width should maintain their\n      // `flex-basis` width and not grow.\n      &[style*='flex-basis'] {\n        flex-grow: 0;\n      }\n    }\n  }\n\n  &.is-not-stacked-on-mobile {\n    flex-wrap: nowrap !important;\n\n    > sc-column {\n      // Available space should be divided equally amongst columns.\n      flex-basis: 0;\n\n      flex-grow: 1;\n      // Columns with an explicitly-assigned width should maintain their\n      // `flex-basis` width and not grow.\n      &[style*='flex-basis'] {\n        flex-grow: 0;\n      }\n    }\n  }\n\n  &.is-full-height {\n    @media (min-width: 782px) {\n      min-height: 100vh !important;\n    }\n  }\n  &.is-reversed-on-mobile {\n    @media (max-width: 782px) {\n      flex-direction: column-reverse;\n    }\n  }\n}\n\nsc-column {\n  flex-grow: 1;\n\n  // Prevent the columns from growing wider than their distributed sizes.\n  min-width: 0;\n\n  // Prevent long unbroken words from overflowing.\n  word-break: break-word; // For back-compat.\n  overflow-wrap: break-word; // New standard.\n\n  /**\n\t* Individual Column Alignment\n\t*/\n  &.is-vertically-aligned-top {\n    align-self: flex-start;\n  }\n\n  &.is-vertically-aligned-center {\n    align-self: center;\n  }\n\n  &.is-vertically-aligned-bottom {\n    align-self: flex-end;\n  }\n\n  &.is-vertically-aligned-top,\n  &.is-vertically-aligned-center,\n  &.is-vertically-aligned-bottom {\n    width: 100%;\n  }\n\n  // if block constrained\n  @media (min-width: 782px) {\n    &.is-layout-constrained {\n      > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n        max-width: var(--sc-column-content-width) !important;\n      }\n\n      &.is-horizontally-aligned-right {\n        > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n          margin-left: auto !important;\n          margin-right: 0 !important;\n        }\n      }\n      &.is-horizontally-aligned-left {\n        > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n          margin-right: auto !important;\n          margin-left: 0 !important;\n        }\n      }\n    }\n  }\n\n  @media (min-width: 782px) {\n    &.is-sticky {\n      position: sticky !important;\n      align-self: flex-start;\n      top: 0;\n    }\n  }\n}\n","import { Component, Prop, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'sc-columns',\n  styleUrl: 'sc-columns.scss',\n  shadow: false,\n})\nexport class ScColumns {\n  /**\n   * The vertical alignment of the columns.\n   */\n  @Prop() verticalAlignment: string;\n  /**\n   * Is this stacked on mobile\n   */\n  @Prop() isStackedOnMobile: boolean;\n  /**\n   * Is this full vertical height\n   */\n  @Prop() isFullHeight: boolean;\n  /**\n   * Is this reverse ordered on mobile\n   */\n  @Prop() isReversedOnMobile: boolean;\n\n  render() {\n    return (\n      <Host\n        class={{\n          'sc-columns': true,\n          [`are-vertically-aligned-${this.verticalAlignment}`]: !!this.verticalAlignment,\n          'is-not-stacked-on-mobile': !this.isStackedOnMobile,\n          'is-full-height': !!this.isFullHeight,\n          'is-reversed-on-mobile': !!this.isReversedOnMobile,\n        }}\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAc,qQACpB,MAAAC,EAAeD,E,MCMFE,EAAQ,M,yBACnB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,6C,aCXR,MAAMC,EAAe,gyEACrB,MAAAC,EAAeD,E,MCMFE,EAAS,M,yJAkBpB,MAAAN,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHI,MAAO,CACL,aAAc,KACd,CAAC,0BAA0BC,KAAKC,uBAAwBD,KAAKC,kBAC7D,4BAA6BD,KAAKE,kBAClC,mBAAoBF,KAAKG,aACzB,0BAA2BH,KAAKI,qBAGlCX,EAAA,QAAAE,IAAA,6C","ignoreList":[]}