@use 'sass:map';
@use 'design-tokens';
@use 'design-tokens-landing';
@use 'functions';
@use 'media';

@mixin spacing($properties, $map: map.get(design-tokens.$tokens, 'spacing')) {
  // Extract the correct spacing settings;
  @each $size, $i in $map {
    $value: map.get(design-tokens.$tokens, 'spacing', $size);
    &-#{$size} {
      @each $property in $properties {
        #{$property}: #{$value};
      }
    }
  }
}

@mixin typography($type, $level) {
  // Extract the correct typography settings based on the provided type and level
  $typo-settings: map.get(map.get(design-tokens.$tokens, $type), $level);

  // Ensure the level exists
  @if $typo-settings {
    margin-bottom: functions.mapGet($typo-settings, 'paragraphSpacing');
    font-family:
      functions.mapGet($typo-settings, 'fontFamily'), 'Helvetica Neue', Arial, sans-serif;
    font-feature-settings: 'salt';
    font-size: functions.mapGet($typo-settings, 'fontSize');
    font-weight: functions.mapGet($typo-settings, 'fontWeight');
    letter-spacing: functions.mapGet($typo-settings, 'letterSpacing');
    line-height: functions.mapGet($typo-settings, 'lineHeight');
    text-decoration: functions.mapGet($typo-settings, 'textDecoration');
    text-indent: functions.mapGet($typo-settings, 'paragraphIndent');
    text-transform: functions.mapGet($typo-settings, 'textCase');
  } @else {
    @error "Unknown typography type: #{$type} or level: #{$level}.";
  }
}

@mixin typographyLanding($type, $level) {
  $typo-settings-desktop: map.get(
    map.get(design-tokens-landing.$tokensLanding, desktop, $type),
    $level
  );
  $typo-settings-tablet: map.get(
    map.get(design-tokens-landing.$tokensLanding, tablet, $type),
    $level
  );
  $typo-settings-mobile: map.get(
    map.get(design-tokens-landing.$tokensLanding, mobile, $type),
    $level
  );

  @if $typo-settings-mobile {
    font-family:
      functions.mapGet($typo-settings-mobile, 'fontFamily'), 'Helvetica Neue', Arial,
      sans-serif;
    font-feature-settings: 'salt';
    font-size: functions.mapGet($typo-settings-mobile, 'fontSize');
    font-style: functions.mapGet($typo-settings-mobile, 'fontStyle');
    font-weight: functions.mapGet($typo-settings-mobile, 'fontWeight');
    letter-spacing: functions.mapGet($typo-settings-mobile, 'letterSpacing');
    line-height: functions.mapGet($typo-settings-mobile, 'lineHeight');
    text-decoration: functions.mapGet($typo-settings-mobile, 'textDecoration');
    text-indent: functions.mapGet($typo-settings-mobile, 'paragraphIndent');
    text-transform: functions.mapGet($typo-settings-mobile, 'textCase');
  }

  @if $typo-settings-tablet {
    @media #{media.$media-tablet} {
      font-family:
        functions.mapGet($typo-settings-tablet, 'fontFamily'), 'Helvetica Neue', Arial,
        sans-serif;
      font-feature-settings: 'salt';
      font-size: functions.mapGet($typo-settings-tablet, 'fontSize');
      font-style: functions.mapGet($typo-settings-tablet, 'fontStyle');
      font-weight: functions.mapGet($typo-settings-tablet, 'fontWeight');
      letter-spacing: functions.mapGet($typo-settings-tablet, 'letterSpacing');
      line-height: functions.mapGet($typo-settings-tablet, 'lineHeight');
      text-decoration: functions.mapGet($typo-settings-tablet, 'textDecoration');
      text-indent: functions.mapGet($typo-settings-tablet, 'paragraphIndent');
      text-transform: functions.mapGet($typo-settings-tablet, 'textCase');
    }
  }

  @if $typo-settings-desktop {
    @media #{media.$media-desktop} {
      font-family:
        functions.mapGet($typo-settings-desktop, 'fontFamily'), 'Helvetica Neue', Arial,
        sans-serif;
      font-feature-settings: 'salt';
      font-size: functions.mapGet($typo-settings-desktop, 'fontSize');
      font-style: functions.mapGet($typo-settings-desktop, 'fontStyle');
      font-weight: functions.mapGet($typo-settings-desktop, 'fontWeight');
      letter-spacing: functions.mapGet($typo-settings-desktop, 'letterSpacing');
      line-height: functions.mapGet($typo-settings-desktop, 'lineHeight');
      text-decoration: functions.mapGet($typo-settings-desktop, 'textDecoration');
      text-indent: functions.mapGet($typo-settings-desktop, 'paragraphIndent');
      text-transform: functions.mapGet($typo-settings-desktop, 'textCase');
    }
  }
}

@mixin text-ellipsis($lines: 1) {
  @if $lines == 1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  } @else {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $lines;
    text-overflow: ellipsis;
  }
}

@mixin visually-hidden {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}