{"version":3,"sources":["layout.pcss"],"names":[],"mappings":"AAAA,WAAW;;AAgFX;EACE,aAAa;;EAEb,6BAA6B;EAC7B,qBAAqB;AA+IvB;;AA7IE;;AANF;IA5EE,qCAAqC;AA+NvC;;AAnJA;IA7EE,mBAAmB;AAgOrB;IA7NE;;;IAGE,sBAAsB;IACtB,yBAAyB;EAC3B;IAGE;MACE,WAAW;IACb;;IAEA;MACE,oBAAoB;IACtB;IAIA;MACE,oBAAoB;IACtB;;IAEA;MACE,WAAW;IACb;IAIA;MACE,aAAa;IACf;IAGF;IAoBA,kBAAkB;EAJlB;IAMA;IACE,WAAW;IACX,WAAW;EAcb;;IAZE;MACE,aAAa;IACf;;IAEA;MACE,WAAW;MACX,eAAe;MACf,qCAAqC;MACrC,yCAAyC;MACzC,mBAAmB;MACnB,mDAAmD;IACrD;;IAlCA;MACE,oBAAoB;IACtB;MAGE;QACE,oBAAoB;MACtB;;MAEA;QACE,WAAW;MACb;EAmCJ;;AAGE;;AADF;MAtFA,qCAAqC;EA0FrC;;AAJA;MAvFA,mBAAmB;EA2FnB;MAxFA;;;IAGE,sBAAsB;IACtB,yBAAyB;EAC3B;IAGE;MACE,WAAW;IACb;;IAEA;MACE,oBAAoB;IACtB;IAIA;MACE,oBAAoB;IACtB;;IAEA;MACE,WAAW;IACb;IAIA;MACE,aAAa;IACf;MAGF;IAoBA,kBAAkB;EAJlB;IAMA;IACE,WAAW;IACX,WAAW;EAcb;;IAZE;MACE,aAAa;IACf;;IAEA;MACE,WAAW;MACX,eAAe;MACf,qCAAqC;MACrC,yCAAyC;MACzC,mBAAmB;MACnB,mDAAmD;IACrD;;IAlCA;MACE,oBAAoB;IACtB;MAGE;QACE,oBAAoB;MACtB;;MAEA;QACE,WAAW;MACb;IAwCF;;AAIA;;AADF;MA5FA,qCAAqC;EAgGrC;;AAJA;MA7FA,mBAAmB;EAiGnB;MA9FA;;;IAGE,sBAAsB;IACtB,yBAAyB;EAC3B;IAGE;MACE,WAAW;IACb;;IAEA;MACE,oBAAoB;IACtB;IAIA;MACE,oBAAoB;IACtB;;IAEA;MACE,WAAW;IACb;IAIA;MACE,aAAa;IACf;MAGF;IAoBA,kBAAkB;EAJlB;IAMA;IACE,WAAW;IACX,WAAW;EAcb;;IAZE;MACE,aAAa;IACf;;IAEA;MACE,WAAW;MACX,eAAe;MACf,qCAAqC;MACrC,yCAAyC;MACzC,mBAAmB;MACnB,mDAAmD;IACrD;;IAlCA;MACE,oBAAoB;IACtB;MAGE;QACE,oBAAoB;MACtB;;MAEA;QACE,WAAW;MACb;IA8CF;;AAnBJ;;EAsBE,mBAAmB;;EAEnB,sBAAsB;EACtB,wGAAwG,EAAE,2CAA2C;EACrJ,8BAA8B;AAyHhC;;AAvHE;IACE,cAAc;EAChB;;AAEA;IACE,aAAa;EACf;;AAEA;IACE,uBAAuB;EACzB;;AAEA,mBAAmB;;AAEnB;;AA1CF;IA2CI,qBAAqB;AAwGzB;EAvGE;;AAEA;IACE,oDAAoD;IACpD,oBAAoB,EAAE,qBAAqB;EAC7C;;AAEA;IACE,qBAAqB;EACvB;;AAGE;;AADF;MAEI,qBAAqB;EAMzB;IALE;;AAEA;;AALF;MAMI,qBAAqB;EAEzB;IADE;;AAGF,kBAAkB;;AAClB;;AAlEF;IAmEI,6BAA6B;AAgFjC;EA/EE;;AAEA;;AAtEF;IAuEI,6BAA6B;AA4EjC;EA3EE;;AAEA;;AA1EF;IA2EI,6BAA6B;AAwEjC;EAvEE;;AAGE;;AADF;MAEI,6BAA6B;EAMjC;IALE;;AAEA;;AALF;MAMI,6BAA6B;EAEjC;IADE;;AAIA;;AADF;MAEI,6BAA6B;EAMjC;IALE;;AAEA;;AALF;MAMI,6BAA6B;EAEjC;IADE;;AAGF,qBAAqB;;AAGnB;MACE,cAAc;IAChB;;AAEA;MACE,uBAAuB;IACzB;;AAGF;IACE,wGAAwG;EAS1G;;AAPE;MACE,cAAc;IAChB;;AAEA;MACE,uBAAuB;IACzB;;AAGF,oBAAoB;;AAGlB;MACE,cAAc;MACd,cAAc;MACd,UAAU;MACV,kBAAkB;MAClB,uCAAuC;IACzC;;AAEA;MACE,uBAAuB;IACzB;;AAGE;QACE,uBAAuB;MACzB;;AAEA;QACE,cAAc;MAChB;;AAKN;EACE,aAAa;EACb,UAAU;AACZ;;AAEA;EACE,kCAAkC;AACpC;;AAEA;EACE,YAAY;;EAEZ;mCACiC;AAyBnC;;AAxBE;;;IAGE,kBAAkB;IAClB,iBAAiB;EAOnB;;AALE;;;;;;;;;MAGE,cAAc;IAChB;;AAGF;IACE,4GAA4G;EAC9G;;AAEA;IACE,4GAA4G;EAC9G;;AAEA;IACE,6GAA6G;EAC/G","file":"layout.css","sourcesContent":["/* Layout */\n\n@define-mixin flow-as-row {\n  grid-auto-flow: row;\n  grid-template-columns: 1fr !important;\n\n  & .Layout-sidebar,\n  & .Layout-divider,\n  & .Layout-main {\n    width: 100% !important;\n    grid-column: 1 !important;\n  }\n\n  &.Layout--sidebarPosition-flowRow-start {\n    & .Layout-sidebar {\n      grid-row: 1;\n    }\n\n    & .Layout-main {\n      grid-row: 2 / span 2;\n    }\n  }\n\n  &.Layout--sidebarPosition-flowRow-end {\n    & .Layout-sidebar {\n      grid-row: 2 / span 2;\n    }\n\n    & .Layout-main {\n      grid-row: 1;\n    }\n  }\n\n  &.Layout--sidebarPosition-flowRow-none {\n    & .Layout-sidebar {\n      display: none;\n    }\n  }\n\n  &.Layout--divided {\n    @mixin flow-as-row-divider;\n\n    & .Layout-main {\n      grid-row: 3 / span 1;\n    }\n\n    &.Layout--sidebarPosition-flowRow-end {\n      & .Layout-sidebar {\n        grid-row: 3 / span 1;\n      }\n\n      & .Layout-main {\n        grid-row: 1;\n      }\n    }\n  }\n}\n\n@define-mixin flow-as-row-divider {\n  --Layout-gutter: 0;\n\n  & .Layout-divider {\n    height: 1px;\n    grid-row: 2;\n\n    &.Layout-divider--flowRow-hidden {\n      display: none;\n    }\n\n    &.Layout-divider--flowRow-shallow {\n      height: 8px;\n      margin-right: 0;\n      background: var(--color-canvas-inset);\n      border-color: var(--color-border-default);\n      border-style: solid;\n      border-width: var(--yattho-borderWidth-thin, 1px) 0;\n    }\n  }\n}\n\n.Layout {\n  display: grid;\n\n  --Layout-sidebar-width: 220px;\n  --Layout-gutter: 16px;\n\n  @media (max-width: calc(544px - 0.02px)) {\n    @mixin flow-as-row;\n  }\n\n  &.Layout--flowRow-until-md {\n    @media (max-width: calc(768px - 0.02px)) {\n      @mixin flow-as-row;\n    }\n  }\n\n  &.Layout--flowRow-until-lg {\n    @media (max-width: calc(1012px - 0.02px)) {\n      @mixin flow-as-row;\n    }\n  }\n\n  /* Flow as column */\n\n  grid-auto-flow: column;\n  grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))); /* sidebar column, separator, main column */\n  grid-gap: var(--Layout-gutter);\n\n  & .Layout-sidebar {\n    grid-column: 1;\n  }\n\n  & .Layout-divider {\n    display: none;\n  }\n\n  & .Layout-main {\n    grid-column: 2 / span 2;\n  }\n\n  /* Gutter spacing */\n\n  @media (min-width: 1012px) {\n    --Layout-gutter: 24px;\n  }\n\n  &.Layout--gutter-none {\n    /* stylelint-disable-next-line length-zero-no-unit */\n    --Layout-gutter: 0px; /* Neds px in value */\n  }\n\n  &.Layout--gutter-condensed {\n    --Layout-gutter: 16px;\n  }\n\n  &.Layout--gutter-spacious {\n    @media (min-width: 1012px) {\n      --Layout-gutter: 32px;\n    }\n\n    @media (min-width: 1280px) {\n      --Layout-gutter: 40px;\n    }\n  }\n\n  /* Sidebar width */\n  @media (min-width: 544px) {\n    --Layout-sidebar-width: 220px;\n  }\n\n  @media (min-width: 768px) {\n    --Layout-sidebar-width: 256px;\n  }\n\n  @media (min-width: 1012px) {\n    --Layout-sidebar-width: 296px;\n  }\n\n  &.Layout--sidebar-narrow {\n    @media (min-width: 768px) {\n      --Layout-sidebar-width: 240px;\n    }\n\n    @media (min-width: 1012px) {\n      --Layout-sidebar-width: 256px;\n    }\n  }\n\n  &.Layout--sidebar-wide {\n    @media (min-width: 1012px) {\n      --Layout-sidebar-width: 320px;\n    }\n\n    @media (min-width: 1280px) {\n      --Layout-sidebar-width: 336px;\n    }\n  }\n\n  /* Sidebar position */\n\n  &.Layout--sidebarPosition-start {\n    & .Layout-sidebar {\n      grid-column: 1;\n    }\n\n    & .Layout-main {\n      grid-column: 2 / span 2;\n    }\n  }\n\n  &.Layout--sidebarPosition-end {\n    grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto;\n\n    & .Layout-main {\n      grid-column: 1;\n    }\n\n    & .Layout-sidebar {\n      grid-column: 2 / span 2;\n    }\n  }\n\n  /* Sidebar divider */\n\n  &.Layout--divided {\n    & .Layout-divider {\n      display: block;\n      grid-column: 2;\n      width: 1px;\n      margin-right: -1px;\n      background: var(--color-border-default);\n    }\n\n    & .Layout-main {\n      grid-column: 3 / span 1;\n    }\n\n    &.Layout--sidebarPosition-end {\n      & .Layout-sidebar {\n        grid-column: 3 / span 1;\n      }\n\n      & .Layout-main {\n        grid-column: 1;\n      }\n    }\n  }\n}\n\n.Layout-divider {\n  display: none;\n  width: 1px;\n}\n\n.Layout-sidebar {\n  width: var(--Layout-sidebar-width);\n}\n\n.Layout-main {\n  min-width: 0;\n\n  /* Centered main column\n  ** FIXME: right-aligned sidebar */\n  & .Layout-main-centered-md,\n  & .Layout-main-centered-lg,\n  & .Layout-main-centered-xl {\n    margin-right: auto;\n    margin-left: auto;\n\n    & > .container-md,\n    & > .container-lg,\n    & > .container-xl {\n      margin-left: 0;\n    }\n  }\n\n  & .Layout-main-centered-md {\n    max-width: calc(var(--yattho-breakpoint-medium, 768px) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n\n  & .Layout-main-centered-lg {\n    max-width: calc(var(--yattho-breakpoint-large, 1012px) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n\n  & .Layout-main-centered-xl {\n    max-width: calc(var(--yattho-breakpoint-xlarge, 1280px) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n}"]}