/*
 * Section component
 *
 */

@import '../../../style/core/utilities.scss';

.dnb-section {
  position: relative;

  // flow-root allows content to have margin top and bottom
  // it eliminates margin-collapsing
  display: flow-root;

  --breakout--on: visible;
  --breakout--off: hidden;
  --rounded-corner--value: 0.5rem;
  --outline: 0 0 0 var(--outline-width, 1px)
    var(--outline-color, transparent);
  --outline-none: 0 0 0 0 transparent;
  --top: 0;
  --left: -100vw;
  --width: 100vw;
  --height: 100%;
  --color-transparent: transparent;
  // reset to prevent inheriting from parent
  --rounded-corner--small: 0;
  --rounded-corner--medium: 0;
  --rounded-corner--large: 0;

  color: var(--text-color, black);
  border-radius: var(--rounded-corner, 0);

  &[style*='--background-color'] {
    background-color: var(--background-color, white);
  }

  // The outline border
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    box-shadow: var(--drop-shadow, var(--outline-none)),
      var(--outline, var(--outline-none));
    border-radius: var(--rounded-corner, 0);
  }

  // The background color
  &::after {
    content: '';
    visibility: var(--breakout, hidden);
    position: absolute;
    z-index: -15;
    left: var(--left);
    top: var(--top);
    width: var(--width);
    height: var(--height);
    color: var(--background-color, currentcolor);
    background-color: currentcolor;

    --box-shadow: 99vw 0 0 0 currentcolor, 198vw 0 0 0 currentcolor,
      297vw 0 0 0 currentcolor, 396vw 0 0 0 currentcolor;

    // we use box-shadow to avoid a horizontal scrollbar
    // We lower the left position, so we get an overlap
    box-shadow: var(--box-shadow);
    border-radius: var(--rounded-corner, 0);
  }

  &:not([style*='--breakout']) {
    --breakout: var(--breakout--on);
  }

  &[style*='--outset'] {
    &.dnb-space[style]:not(.dnb-card) {
      padding-left: calc(var(--padding-left) * calc(1 - var(--outset)));
      padding-right: calc(var(--padding-right) * calc(1 - var(--outset)));
    }

    &::before {
      margin-left: calc(
        var(--outset-left, var(--padding-left)) * -1 * var(--outset)
      );
      margin-right: calc(
        var(--outset-right, var(--padding-right)) * -1 * var(--outset)
      );

      // Because of the margin usage, we need to inherit the background color.
      background-color: inherit;
    }
  }

  @include allBelow(medium) {
    --breakout: var(--breakout--small, var(--breakout--fallback));
    --outset: var(--outset--small, var(--outset--fallback));
    --background-color--value: var(--background-color--small);
    --text-color--value: var(--text-color--small);
    --outline-color: var(--outline-color--small);
    --drop-shadow: var(--drop-shadow--small);
    --rounded-corner: var(
      --rounded-corner--small,
      var(--rounded-corner--fallback)
    );
  }
  @include allBetween(small, medium) {
    --breakout: var(--breakout--medium, var(--breakout--fallback));
    --outset: var(--outset--medium, var(--outset--fallback));
    --background-color--value: var(--background-color--medium);
    --text-color--value: var(--text-color--medium);
    --outline-color: var(--outline-color--medium);
    --drop-shadow: var(--drop-shadow--medium);
    --rounded-corner: var(
      --rounded-corner--medium,
      var(--rounded-corner--fallback)
    );
  }
  @include allAbove(medium) {
    --breakout: var(--breakout--large, var(--breakout--fallback));
    --outset: var(--outset--large, var(--outset--fallback));
    --background-color--value: var(--background-color--large);
    --text-color--value: var(--text-color--large);
    --outline-color: var(--outline-color--large);
    --drop-shadow: var(--drop-shadow--large);
    --rounded-corner: var(
      --rounded-corner--large,
      var(--rounded-corner--fallback)
    );
  }

  & &::after {
    z-index: -14;
  }

  & & &::after {
    z-index: -13;
  }

  & & & &::after {
    z-index: -12;
  }

  & & & & &::after {
    z-index: -11;
  }

  & & & & & &::after {
    z-index: -10;
  }

  & & & & & & &::after {
    z-index: -9;
  }

  & & & & & & & &::after {
    z-index: -8;
  }

  & & & & & & & & &::after {
    z-index: -7;
  }

  // deprecated and can be removed in v11
  &--spacing-x-small {
    padding-top: var(--spacing-x-small);
    padding-bottom: var(--spacing-x-small);
  }
  &--spacing-small {
    padding-top: var(--spacing-small);
    padding-bottom: var(--spacing-small);
  }
  &--spacing-medium {
    padding-top: var(--spacing-medium);
    padding-bottom: var(--spacing-medium);
  }
  &--spacing,
  &--spacing-large {
    padding-top: var(--spacing-large);
    padding-bottom: var(--spacing-large);
  }
  &--spacing-x-large {
    padding-top: var(--spacing-x-large);
    padding-bottom: var(--spacing-x-large);
  }
  &--spacing-xx-large {
    padding-top: var(--spacing-xx-large);
    padding-bottom: var(--spacing-xx-large);
  }
}