oj-sp-empty-state {
  display: block;
  height: 100%;
}

oj-sp-empty-state .oj-sp-empty-state-container {
  height: 100%;
}

/** backgrounds */
oj-sp-empty-state.oj-sp-empty-state-background {
  background-color: rgb(var(--oj-palette-neutral-rgb-10)); /** theme controlled color? */
  background-repeat: no-repeat;
}

oj-sp-empty-state.oj-sp-empty-state-background-0 {
  background-image: url('images/empty-state-background-a-br.png'), url('images/empty-state-background-a-tr.png');
  background-position: bottom right, top right;
  background-blend-mode: difference;
}

@media print, screen and (min-width: 1024px) {
  oj-sp-empty-state.oj-sp-empty-state-background-0:not(.oj-sp-empty-state-layout-regular) {
    background-image: url('images/empty-state-background-a-bl.png'), url('images/empty-state-background-a-br.png'), url('images/empty-state-background-a-tr.png');
    background-position: bottom left, bottom right, top right;
    background-blend-mode: difference;
  }
}

oj-sp-empty-state.oj-sp-empty-state-background-1 {
  background-image: url('images/empty-state-background-b-bl.png'), url('images/empty-state-background-b-tl.png');
  background-position: bottom left, top left;
  background-blend-mode: difference;
}

@media print, screen and (min-width: 1024px) {
  oj-sp-empty-state.oj-sp-empty-state-background-1:not(.oj-sp-empty-state-layout-regular) {
    background-image: url('images/empty-state-background-b-bl.png'), url('images/empty-state-background-b-br.png'), url('images/empty-state-background-b-tl.png');
    background-position: bottom left, bottom right, top left;
    background-blend-mode: difference;
  }
}

oj-sp-empty-state.oj-sp-empty-state-background-2 {
  background-image: url('images/empty-state-background-c-tr.png');
  background-position: top right;
  background-blend-mode: difference;
}

oj-sp-empty-state.oj-sp-empty-state-background-3 {
  background-image: url('images/empty-state-background-d-br.png'), url('images/empty-state-background-d-tr.png');
  background-position: bottom right, top right;
  background-blend-mode: normal, normal;
}

/** default horizontal padding for regular layout */
oj-sp-empty-state.oj-sp-empty-state-layout-regular {
  padding-left: var(--oj-core-spacing-4x);
  padding-right: var(--oj-core-spacing-4x);
}

/** top padding for regular layout */
oj-sp-empty-state.oj-sp-empty-state-layout-regular .oj-sp-empty-state-container {
  padding-top: calc(var(--oj-core-spacing-1x) * 12);
  padding-bottom: calc(var(--oj-core-spacing-1x) * 12);
}

/** bottom padding for gravity layout */
oj-sp-empty-state.oj-sp-empty-state-layout-gravity .oj-sp-empty-state-container {
  padding-bottom: 7.125rem;
}

@media print, screen and (min-width: 600px) {
  oj-sp-empty-state.oj-sp-empty-state-layout-gravity .oj-sp-empty-state-container {
    padding-bottom: 11.125rem;
  }
}

/** left and right paddings in gravity layout */
oj-sp-empty-state.oj-sp-empty-state-layout-gravity {
  padding-left: calc(var(--oj-core-spacing-1x) * 6);
  padding-right: calc(var(--oj-core-spacing-1x) * 6);
}


@media print, screen and (min-width: 600px) {
  oj-sp-empty-state.oj-sp-empty-state-layout-gravity {
    padding-left: calc(var(--oj-core-spacing-1x) * 12);
    padding-right: calc(var(--oj-core-spacing-1x) * 12);
  }
}

@media print, screen and (min-width: 1024px) {
  oj-sp-empty-state.oj-sp-empty-state-layout-gravity {
    padding-left: calc(var(--oj-core-spacing-1x) * 24);
    padding-right: calc(var(--oj-core-spacing-1x) * 24);
  }
}

@media print, screen and (min-width: 1440px) {
  oj-sp-empty-state.oj-sp-empty-state-layout-gravity {
    padding-left: calc(var(--oj-core-spacing-1x) * 30);
    padding-right: calc(var(--oj-core-spacing-1x) * 30);
  }
}

/** max width */
@media print, screen and (min-width: 1024px) {
  oj-sp-empty-state .oj-sp-empty-state-container {
    max-width: 55rem;
  }
}

@media print, screen and (min-width: 1440px) {
  oj-sp-empty-state .oj-sp-empty-state-container {
    max-width: 67.5rem;
  }
}