/*
 * Helper Classes
 *
 */

@use 'sass:meta';
@use '../utilities.scss' as utilities;

// Focus management
.dnb-no-focus {
  outline: none;
}

.dnb-tab-focus {
  outline: none;

  &:focus {
    @include utilities.focusRing('keyboard');
  }
}

.dnb-mouse-focus {
  outline: none;

  &:focus {
    @include utilities.focusRing('mouse');
  }
}

.dnb-focus-ring {
  @include utilities.fakeBorder(
    var(--token-color-stroke-action-focus),
    var(--focus-ring-width),
    null,
    !important
  );
}

.dnb-scrollbar-appearance {
  @include utilities.scrollbarAppearance();
}

@include meta.load-css('skip-link');

.dnb-alignment-helper {
  @include utilities.alignmentHelperClass();
  @include utilities.alignmentHelper();
}
.dnb-alignment-helper--pseudo-element-only {
  @include utilities.alignmentHelper();
}

.dnb-drop-shadow {
  @include utilities.defaultDropShadow();
}

.dnb-sharp-drop-shadow {
  @include utilities.sharpDropShadow();
}

.dnb-sr-only {
  @include utilities.srOnly();
}

.dnb-suffix {
  padding-left: 0.5rem;

  font-size: var(--font-size-basis);
  line-height: var(--line-height-basis);
  word-break: normal; // because of "kr" usage together with "stretch" on a input/textarea
}

.dnb-page-background {
  // Ensure themed body has a token color for page backgrounds
  background-color: var(--token-color-background-page-background, white);
}

// ::selection appearance helper
.dnb-selection::selection,
.dnb-selection ::selection,
[class^='dnb-']::selection,
[class^='dnb-'] ::selection {
  background-color: var(--token-color-decorative-first-subtle);
  color: var(--token-color-text-neutral);
  text-shadow: none;
}