@use 'sass:map';
@use './config';
@use './variables';

@mixin if-mobile-screen($theme-config) {
  $dbx-screen-config: config.get-dbx-screen-config($theme-config);
  $mobile-screen-cutoff: map.get($dbx-screen-config, 'mobile');

  @media screen and (max-width: #{$mobile-screen-cutoff}) {
    @content;
  }
}

@mixin if-small-screen($theme-config) {
  $dbx-screen-config: config.get-dbx-screen-config($theme-config);
  $small-screen-cutoff: map.get($dbx-screen-config, 'small');

  @media screen and (max-width: #{$small-screen-cutoff}) {
    @content;
  }
}

@mixin if-medium-screen($theme-config) {
  $dbx-screen-config: config.get-dbx-screen-config($theme-config);
  $medium-screen-cutoff: map.get($dbx-screen-config, 'medium');

  @media screen and (max-width: #{$medium-screen-cutoff}) {
    @content;
  }
}

@mixin if-large-screen($theme-config) {
  $dbx-screen-config: config.get-dbx-screen-config($theme-config);
  $large-screen-cutoff: map.get($dbx-screen-config, 'large');

  @media screen and (max-width: #{$large-screen-cutoff}) {
    @content;
  }
}

@mixin if-tiny-vertical-screen($theme-config) {
  $dbx-screen-config: config.get-dbx-screen-config($theme-config);
  $tiny-vertical-screen-cutoff: map.get($dbx-screen-config, 'tiny-vertical');

  @media screen and (max-width: #{$tiny-vertical-screen-cutoff}) {
    @content;
  }
}

/**
  Convenience function for page height that sets the height to $page-height with an optional offset.
*/
@mixin app-height($additionalOffset: 0) {
  @if $additionalOffset !=0 {
    // set the variable, which will update the css calculation at runtime
    #{variables.$dbx-app-height-additional-offset-var}: #{$additionalOffset};
  }

  #{variables.$dbx-app-height-base-var}: variables.$app-height-base;
  #{variables.$dbx-app-height-var}: variables.$app-height;
  height: var(variables.$dbx-app-height-var);
}

/**
  Convenience function for page height that sets the height to $page-height with an optional offset.
*/
@mixin page-height($additionalOffset: 0) {
  @if $additionalOffset !=0 {
    #{variables.$dbx-page-height-additional-offset-var}: #{$additionalOffset};
  }

  #{variables.$dbx-page-height-base-var}: variables.$page-height-base;
  #{variables.$dbx-page-height-var}: variables.$page-height;
  height: var(variables.$dbx-page-height-var);
}

/**
  Content height that sets the height to $content-height with an optional offset.
*/
@mixin content-height($additionalOffset: 0, $headers: 0) {
  @if $additionalOffset !=0 {
    #{variables.$dbx-content-height-additional-offset-var}: #{$additionalOffset};
  }

  #{variables.$dbx-content-headers-count-var}: #{$headers};
  #{variables.$dbx-content-height-base-var}: variables.$content-height-base;
  #{variables.$dbx-content-height-var}: variables.$content-height;
  #{variables.$dbx-nested-content-height-var}: variables.$nested-content-height;
  height: var(variables.$dbx-content-height-var);
}

/**
  Nested content height that sets the height to $content-height minus the total number of $content-navbar-heights above it, with an optional offset.
*/
@mixin nested-content-height($headers: 1, $additionalOffset: 0) {
  @if $headers < 1 {
    @error 'Headers count #{$headers} must be greater than 1.';
  }

  @include content-height($additionalOffset, $headers);
}

/**
  Will set the minimum height to the screen size on tiny-vertical screens.
*/
@mixin vh100-on-tiny-vertical-screen($theme-config, $additionalOffset: 0) {
  @include if-tiny-vertical-screen($theme-config) {
    min-height: $vh100;
  }
}

@mixin limit-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}