/**
 * Copyright IBM Corp. 2016, 2023
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

@use '@carbon/styles/scss/breakpoint' as *;
@use '@carbon/styles/scss/config' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/theme' as *;
@use '../../globals/utils/flex-grid' as *;
@use '../../globals/vars' as *;
@use '../../globals/imports' as *;

// $carbon--layouts has been replaced by standard spacing tokens
$layout-spacings: $spacing-05, $spacing-06, $spacing-07, $spacing-09,
  $spacing-10, $spacing-12, $spacing-13;

/// A mixin to apply Carobn grid colspan style only in large breakpoint.
/// @param {Number} $span - The number of columns covered
/// @param {Number} $columns - The total number of columns available
@mixin cds--make-col($span, $columns) {
  @include make-col-ready();
  @include breakpoint(lg) {
    @include make-col($span, $columns);
  }
}

@mixin layout {
  .#{$prefix}--layout--sticky-mobile {
    @include breakpoint(lg) {
      position: sticky;
      z-index: 1;
      inset-block-start: 0;
      transform: translate3d(0, 0, 0);
    }
  }

  .#{$prefix}--layout--sticky {
    @include breakpoint(lg) {
      position: sticky;
      z-index: 1;
      inset-block-start: 0;
    }
  }

  @each $layout in $layout-spacings {
    $i: index($layout-spacings, $layout);
    .#{$prefix}--layout--top {
      &-layout-0#{$i} {
        margin-block-start: $layout;
      }
    }
    .#{$prefix}--layout--bottom {
      &-layout-0#{$i} {
        margin-block-end: $layout;
      }
    }
  }

  .#{$prefix}--layout--border {
    @include breakpoint(sm) {
      padding-block-end: $spacing-10;
    }

    @include breakpoint(md) {
      margin-inline: -$spacing-07;
      padding-block-end: $spacing-12;
      padding-inline: $spacing-05;
    }

    @include breakpoint(lg) {
      margin-inline-start: -$spacing-05;
      padding-block-end: $spacing-13;
    }

    @include breakpoint(max) {
      margin-inline-end: -$spacing-05;
    }

    border-block-end: solid 1px $toggle-off;
  }

  .#{$prefix}--layout-2-3 {
    @include cds--make-col(12, 16);
  }

  .#{$prefix}--layout-1-3 {
    @include cds--make-col(4, 16);
  }
}