@import 'variables';
@import '../spacing/tokens';
@import '../borders/variables';
@import '../borders/mixins';

@mixin telia-focus-shadow() {
  box-shadow: 0 0 0 $telia-focus-border-width $telia-focus-color;
}

@mixin telia-focus-outline($offset: $telia-spacing-2) {
  outline: solid $telia-focus-border-width $telia-focus-color;
  outline-offset: $offset;
}

@mixin telia-pseudo-element-focus-style(
  $offset: $telia-spacing-4,
  $radius: full
) {
  @include telia-border-radius($radius);
  @include telia-focus-shadow();
  bottom: calc(-1 * #{$offset});
  content: '';
  display: block;
  left: calc(-1 * #{$offset});
  position: absolute;
  right: calc(-1 * #{$offset});
  top: calc(-1 * #{$offset});
}
