/// To be used on flex items. Resolves some common layout issues, such as
/// text truncation not respecting padding or breaking out of container.
/// https://css-tricks.com/flexbox-truncated-text/

@mixin layout-flex-fix {
  min-width: 0;
  max-width: 100%;
}

/// Returns a safe-area-inset for iPhone X screen obtrusions.
///
/// @param {String} $property - The property name i.e. padding-left.
/// @param {Space} $spacing - The spacing value to be added to the safe-area
/// value. i.e. spacing().
/// @param {string} $area - The area where the inset is to be added. i.e. left
///
/// If overriding an existing padding / margin that value should be used as
/// $spacing.
@mixin safe-area-for($property, $spacing, $area) {
  $spacing: if($spacing == 0, #{$spacing}px, $spacing);
  #{$property}: #{$spacing};
  #{$property}: calc(#{$spacing} + constant(safe-area-inset-#{$area}));
  #{$property}: calc(#{$spacing} + env(safe-area-inset-#{$area}));
}

@mixin after-topbar-sheet {
  @include breakpoint-after(450px) {
    @content;
  }
}