@layer ds_components {
  .comp-drawer {
    padding-block: var(--ds-component-drawer-padding-block);
    padding-inline-start: var(--ds-semantic-whitespace-box-inline-compact);
    padding-inline-end: var(--ds-semantic-whitespace-box-inline-compact);

    :where(:has([data-drawer-open="true"])) & {
      box-shadow: var(--ds-semantic-ui-box-shadow-default);
    }

    @container body (width > 50rem) {
      padding-inline-start: 0;
      padding-inline-end: var(--ds-component-drawer-padding-inline-end);
      box-shadow: none;
      background-color: transparent;
      box-shadow: none;
    }
  }
}