/* See ./spacer.md for design notes and rationale. */

/* stylelint-disable selector-class-pattern -- EDS BEM */

.spacer-container,
main > .section.spacer-container {
  margin: 0;
  padding: 0;
}

main > .section.spacer-container > .spacer-wrapper {
  max-inline-size: none;
  margin: 0;
  padding: 0;
}

.spacer.block {
  display: block;
  overflow: hidden;
  block-size: var(--spc-sm, 0);
}

.spacer.block:not([data-spacer-ready]) {
  block-size: auto;
  overflow: visible;
}

.spacer.block:not([data-spacer-ready]) > div > div > div:first-child {
  font-weight: var(--ds-font-weight-medium);
  color: var(--nc-color-text-secondary);
}

.spacer.block:not([data-spacer-ready]) > div > div:first-child:not(:only-child) {
  font-weight: var(--ds-font-weight-medium);
  color: var(--nc-color-text-secondary);
}

.spacer.block:not([data-spacer-ready]) > div > div:only-child::before {
  display: block;
  font-weight: var(--ds-font-weight-medium);
  color: var(--nc-color-text-secondary);
}

.spacer.block:not([data-spacer-ready]) > div:nth-child(1) > div:only-child::before {
  content: 'Desktop';
}

.spacer.block:not([data-spacer-ready]) > div:nth-child(2) > div:only-child::before {
  content: 'Tablet';
}

.spacer.block:not([data-spacer-ready]) > div:nth-child(3) > div:only-child::before {
  content: 'Mobile';
}

@media (width >= 768px) {
  .spacer.block {
    block-size: var(--spc-md, var(--spc-sm, 0));
  }
}

@media (width >= 1022px) {
  .spacer.block {
    block-size: var(--spc-lg, var(--spc-md, var(--spc-sm, 0)));
  }
}