@layer atoms {
  :root,
  :host,
  ::backdrop {
    --drawer-transition-duration: 0;
    /* Backdrop colour fallback */
    --backdrop-color: #18181d;
    --backdrop-blur: 4px;
  }

  /* Enable transitions only if reduce motion flag is off */
  @media (prefers-reduced-motion: no-preference) {
    :root,
    :host,
    ::backdrop {
      --drawer-transition-duration: 300ms;
    }
  }

  .mobius-drawer {
    --drawer-width: min(100%, 560px);
    --drawer-height: min(100%, 560px); /* Default height TBD */

    position: fixed;
    display: flex;
    flex-direction: column;
    top: 0;
    padding: 0;
    margin: 0;
    border: none;
    background-color: var(--color-background);
    overflow: hidden;

    &:not([open]) {
      display: none;
    }

    &:focus-visible {
      outline: none;
    }

    &::backdrop {
      background-color: transparent;
      transition: background-color var(--drawer-transition-duration) ease-in-out;
      backdrop-filter: blur(var(--backdrop-blur));
    }

    /* Injected by "dialog-polyfill" */
    /* Required for iOS <= 15.2 */
    & + .backdrop {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: var(--backdrop-color);
      opacity: 0.3;
      backdrop-filter: blur(var(--backdrop-blur));

      @supports (background-color: color-mix(in srgb, red 50%, blue)) {
        background-color: color-mix(
          in srgb,
          var(--backdrop-color) 30%,
          transparent
        );
        opacity: 1;
      }

      & + ._dialog_overlay {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }
    }

    &.--top,
    &.--bottom {
      width: 100vw;
      max-width: 100vw;
      height: var(--drawer-height);
      max-height: var(--drawer-height);
      transition: transform var(--drawer-transition-duration) ease-in-out;
      padding-bottom: 80px;
      @supports (height: 100dvh) {
        height: 100dvh;
        max-height: 100dvh;
        padding-bottom: 0;
      }
    }

    &.--left,
    &.--right {
      bottom: 0;
      width: 100%;
      max-width: var(--drawer-width);
      height: 100vh;
      max-height: 100vh;
      transition: transform var(--drawer-transition-duration) ease-in-out;
      padding-bottom: 80px;
      @supports (height: 100dvh) {
        height: 100dvh;
        max-height: 100dvh;
        padding-bottom: 0;
      }
    }

    /* tl;dr For devices runing iOS 15.2 or older animations are disabled */
    /* In iOS <= 15.2 Safari doesn't support CSS variables in calc() with negative values */
    /* This doesn't work */
    /* translateX(calc(var(--drawer-width) * -1)) */
    /* These work */
    /* translateX(calc(560px * -1)) */
    /* translateX(-560px) */
    /* Initially offset values that transition into view on open are required */
    /* to ensure correct <Drawer> positioning on iPad/iPhone orientation change */
    &:not(.--should-transition) {
      display: none;

      &[open] {
        display: flex;
      }

      &.--top {
        left: 0;
      }

      &.--bottom {
        top: auto;
        bottom: 0;
        left: 0;
      }

      &.--left {
        left: 0;
      }

      &.--right {
        right: 0;
      }
    }

    &.--should-transition {
      &.--transition {
        &::backdrop {
          background-color: var(--backdrop-color);
          opacity: 0.3;

          @supports (background-color: color-mix(in srgb, red 50%, blue)) {
            background-color: color-mix(
              in srgb,
              var(--backdrop-color) 30%,
              transparent
            );
            opacity: 1;
          }
        }
      }

      &.--top {
        top: calc(-1 * var(--drawer-height));

        &.--transition {
          transform: translateY(var(--drawer-height));
        }
      }

      &.--bottom {
        top: auto;
        bottom: calc(-1 * var(--drawer-height));

        &.--transition {
          transform: translateY(calc(-1 * var(--drawer-height)));
        }
      }

      &.--left {
        left: calc(-1 * var(--drawer-width));

        &.--transition {
          transform: translateX(var(--drawer-width));
        }
      }

      &.--right {
        left: auto;
        right: calc(-1 * var(--drawer-width));

        &.--transition {
          transform: translateX(calc(-1 * var(--drawer-width)));
        }
      }
    }
  }

  .mobius-drawer__header {
    display: grid;
    grid-template-columns: 1fr auto;
    justify-content: space-between;
    gap: var(--size-sm);
    align-items: center;
    padding: var(--size-sm) var(--size-lg);
    padding-bottom: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-small-title);

    & button {
      color: var(--color-primary);
      display: flex;
      gap: var(--size-xs);
    }

    & img {
      width: 144px;
    }
  }

  .mobius-drawer__content {
    flex-grow: 1;
    padding: var(--size-lg);
    padding-top: var(--size-sm);
    font-family: var(--font-family);
    overflow-y: auto;
  }
}
