.Box--overlay { // stylelint-disable-next-line primer/responsive-widths width: 448px; margin-right: auto; margin-left: auto; background-color: var(--bgColor-default, var(--color-canvas-default)); background-clip: padding-box; border-color: var(--borderColor-default, var(--color-border-default)); // stylelint-disable-next-line primer/box-shadow box-shadow: 0 0 18px rgba(0, 0, 0, 0.4); .Box-header { margin: 0; border-width: 0; border-bottom-width: $border-width; border-top-left-radius: $border-radius; border-top-right-radius: $border-radius; } } .Box-overlay--narrow { width: 320px; } .Box-overlay--wide { // stylelint-disable-next-line primer/responsive-widths width: 640px; } .Box-body { &.scrollable-overlay { max-height: 400px; overflow-y: scroll; } .help { padding-top: $spacer-2; margin: 0; color: var(--fgColor-muted, var(--color-fg-muted)); text-align: center; } }