/*Offcanvas*/

@layer component {
  @scope ([data-component-id$=":offcanvas"]) {
    --_bounce: linear(
      0,
      1 37.8%,
      0.884 44.2%,
      0.847 50%,
      0.999 65.4%,
      0.958 73%,
      1 84.4%,
      1
    );
    position: fixed;
    width: 100%;
    /*min-width: 320px;*/
    max-width: 450px;
    z-index: 100;
    bottom: 0;
    top: 0;
    right: -500px;
    /*background-color: pink;*/
    background-color: hsl(from var(--clr-light) h s calc(l - 0) / 0.6);
    backdrop-filter: blur(25px);
    display: flex;
    flex-flow: column nowrap;
    transition: right var(--speed-500);
    /*transition-timing-function: var(--_bounce);*/

    &.open {
      right: 0 /*16px*/;
      transition: right var(--speed-500);
      transition-timing-function: var(--_bounce);
    }

    @media (min-width: 1024px) {
      display: none;
    }
  }
  .inner {
    /* 132px is height of <header> */
    padding: calc(132px + var(--sp-4)) var(--sp-4) var(--sp-4) var(--sp-4);
    /*background-color: hotpink;*/
  }

    .is-admin .inner {
      padding-top: calc(132px + var(--sp-24));
    }
}