/*
 * Section component
 *
 */

@use '../../../style/core/utilities.scss' as utilities;

:root {
  --section-z-index: var(--z-index-section);
}

.dnb-section {
  position: relative;

  // Create a new stacking context without affecting global z-order.
  // This keeps the ::before (z-index: -1) inside the section,
  // so nested sections still render their border correctly.
  isolation: isolate;

  // 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: var(--token-radius-xl);
  --outline: 0 0 0 var(--outline-width, 1px)
    var(--outline-color, transparent);
  --outline-none: 0 0 0 0 transparent;
  --outline-color--value: var(--token-color-stroke-neutral-subtle);
  --drop-shadow-none: var(--outline-none);
  --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);
  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 utilities.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);
    --outline-width: var(--outline-width--small);
    --drop-shadow: var(--drop-shadow--small);
    --rounded-corner: var(
      --rounded-corner--small,
      var(--rounded-corner--fallback)
    );
  }
  @include utilities.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);
    --outline-width: var(--outline-width--medium);
    --drop-shadow: var(--drop-shadow--medium);
    --rounded-corner: var(
      --rounded-corner--medium,
      var(--rounded-corner--fallback)
    );
  }
  @include utilities.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);
    --outline-width: var(--outline-width--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;
  }

  // Section colors
  &--divider {
    --text-color: var(--token-color-text-neutral);
    --background-color: var(--token-color-background-neutral);
    --separator-color: var(--token-color-stroke-neutral-subtle);

    // will else cover parts of the divider lines
    z-index: 0;

    &::after {
      --box-shadow:
        99vw 0 0 0 currentcolor, 198vw 0 0 0 currentcolor,
        297vw 0 0 0 currentcolor, 396vw 0 0 0 currentcolor,
        0 0.0625rem 0 0 var(--separator-color),
        99vw 0.0625rem 0 0 var(--separator-color),
        0 -0.0625rem 0 0 var(--separator-color),
        99vw -0.0625rem 0 0 var(--separator-color),
        198vw 0.0625rem 0 0 var(--separator-color),
        198vw -0.0625rem 0 0 var(--separator-color);
    }
  }

  &--transparent {
    --background-color: transparent;
  }

  &--default {
    --text-color: var(
      --text-color--value,
      var(--token-color-text-neutral)
    );
    --background-color: var(
      --background-color--value,
      var(--token-color-background-neutral)
    );
  }

  // GlobalStatus states and Section variant colors
  &--error {
    --text-color: var(--token-color-text-neutral);
    --background-color: var(--token-color-background-error-subtle);
  }

  &--information,
  // No designs for success state in Figma, treat as information until verified by design team
  &--success {
    --text-color: var(--token-color-text-neutral);
    --background-color: var(--token-color-background-info-subtle);
  }

  &--warning {
    --text-color: var(--token-color-text-neutral);
    --background-color: var(--token-color-background-warning-subtle);
  }

  &--surface-dark {
    --text-color: var(--token-color-text-neutral-ondark);
    --background-color: var(--token-color-decorative-first-bold-static);
  }
}