@mixin luci-accessibly-hidden() {
  clip: rect(0 0 0 0);
  left: 0;
  position: absolute;
  z-index: -1;
}

// sass-lint:disable force-pseudo-nesting
@mixin luci-box-sizing() {
  &,
  &:before,
  &:after {
    box-sizing: border-box;
  }

  *,
  *:before,
  *:after {
    box-sizing: border-box;
  }
}
// sass-lint:enable force-pseudo-nesting

// luci-text-crop mixin
// Use to eliminate "extra" white space added by text nodes in the DOM. This will crop the top of the text to the Cap height and the bottom of the text to the baseline
// Use to align text with non text elements (images, icons, etc.) or to eliminate "non-system" space within an element
@mixin luci-text-crop($line-height: 1.25, $top-adjustment: 0px, $bottom-adjustment: 0px) { // sass-lint:disable-line zero-unit - The px unit needs to be here so the calc() functions work correctly
  $offset-top: max((79 + ($line-height - 1.375) * (200 / 2)), 0) / 200;
  $offset-bottom: max((70 + ($line-height - 1.375) * (200 / 2)), 0) / 200;

  line-height: $line-height;

  &::before,
  &::after {
    content: '';
    display: block;
    height: 0;
    width: 0;
  }

  &::before {
    margin-bottom: calc(-#{$offset-top}em + #{$top-adjustment});
  }

  &::after {
    margin-top: calc(-#{$offset-bottom}em + #{$bottom-adjustment});
  }
}

// Use this mixin to neutralize the vertical space created by an icon while keeping it vertically centered
// This allows an icon's height to not influence the overall vertical spacing
// This is useful when the text-crop mixin is being used to crop text to the cap height and baseline
@mixin n-icon-height-removal() {
  margin-bottom: -30px;
  margin-top: -30px;
}