//
// Copyright IBM Corp. 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 'sass:map';
@use 'sass:list';

@use './config' as *;
@use './utilities/custom-property';
@use './utilities/convert';
@use './spacing' as *;

$layout-tokens: (
  size: (
    height: (
      xs: convert.to-rem(24px),
      sm: convert.to-rem(32px),
      md: convert.to-rem(40px),
      lg: convert.to-rem(48px),
      xl: convert.to-rem(64px),
      2xl: convert.to-rem(80px),
    ),
  ),
  density: (
    padding-inline: (
      condensed: $spacing-03,
      normal: $spacing-05,
    ),
  ),
);

@mixin emit-layout-tokens {
  @each $group, $properties in $layout-tokens {
    @each $property, $steps in $properties {
      @each $step, $value in $steps {
        @include custom-property.declaration(
          'layout-#{$group}-#{$property}-#{$step}',
          $value
        );
      }

      // CSS max() doesn't accept '0' as a value without a unit
      // stylelint-disable length-zero-no-unit
      @include custom-property.declaration(
        'layout-#{$group}-#{$property}-min',
        0px
      );
      // stylelint-enable length-zero-no-unit

      @include custom-property.declaration(
        'layout-#{$group}-#{$property}-max',
        999999999px
      );
    }
  }
}

@each $group, $properties in $layout-tokens {
  @each $property, $steps in $properties {
    @each $step, $value in $steps {
      .#{$prefix}--layout--#{$group}-#{$step} {
        @include custom-property.declaration(
          'layout-#{$group}-#{$property}-context',
          custom-property.get-var(
            'layout-#{$group}-#{$property}-#{$step}',
            $value
          )
        );
        @include custom-property.declaration(
          'layout-#{$group}-#{$property}',
          custom-property.get-var('layout-#{$group}-#{$property}-context')
        );
      }

      .#{$prefix}--layout-constraint--#{$group}__default-#{$step} {
        @include custom-property.declaration(
          'layout-#{$group}-#{$property}',
          custom-property.get-var(
            'layout-#{$group}-#{$property}-context',
            custom-property.get-var(
              'layout-#{$group}-#{$property}-#{$step}',
              $value
            )
          )
        );
      }

      @each $constraint in ('min', 'max') {
        .#{$prefix}--layout-constraint--#{$group}__#{$constraint}-#{$step} {
          @include custom-property.declaration(
            'layout-#{$group}-#{$property}-#{$constraint}',
            custom-property.get-var(
              'layout-#{$group}-#{$property}-#{$step}',
              $value
            )
          );
        }
      }
    }
  }
}

/// Emits layout context tokens for shadow host elements.
@mixin emit-layout-tokens-to-shadow-host($host-selector) {
  @each $group, $properties in $layout-tokens {
    @each $property, $steps in $properties {
      @each $step, $value in $steps {
        :host(#{$host-selector}[#{$group}='#{$step}']) {
          @include custom-property.declaration(
            'layout-#{$group}-#{$property}-context',
            custom-property.get-var(
              'layout-#{$group}-#{$property}-#{$step}',
              $value
            )
          );
          @include custom-property.declaration(
            'layout-#{$group}-#{$property}',
            custom-property.get-var('layout-#{$group}-#{$property}-context')
          );
        }
      }
    }
  }
}

:root {
  @include emit-layout-tokens();
}