$resource-list-variables: (
  breakpoint-small: 458px,
  header-min-height: rem(56px),
  header-padding-small: rem(12px),
  header-vertical-padding: rem(10px),
  button-min-height: control-height(),
  header-content-min-height: control-height(),
  content-wrapper-stacking-order: 1,
  bulk-actions-wrapper-stacking-order: 2,
  header-outer-wrapper-stacking-order: 2,
  header-overlay-stacking-order: 4,
  spinner-stacking-order: 3,
  overlay-stacking-order: 2,
  list-stacking-order: 1,
  overlay-background: rgba(color('white'), 0.5),
);

@function resource-list($variable) {
  @return map-get($resource-list-variables, $variable);
}

// translate-offset equals handle-width - padding
$resource-list-item-variables: (
  padding: rem(12px),
  control-indent: -1 * rem(12px),
  min-height: rem(44px),
  handle-width: rem(48px),
  disclosure-width: rem(48px),
  translate-offset: rem(48px) - rem(12px) + spacing(extra-tight),
  clickable-stacking-order: 1,
  content-stacking-order: 2,
  actions-height: rem(56px),
);

@function resource-list-item($variable) {
  @return map-get($resource-list-item-variables, $variable);
}