@use "mediaQueries.scss" as *;
@use "colors.scss" as *;
@use "metrics.scss" as *;

@mixin ds-hover($includeSelector: false) {
  @include ds-mq-smallest-breakpoint(desktop, "and (hover: hover)") {
    @if $includeSelector {
      &:hover {
        @content;
      }
    } @else {
      @content;
    }
  }
}

@mixin _ds-focus($offset, $width, $color) {
  outline: $width solid $color;
  @if $offset {
    outline-offset: $offset;
  }
}

@mixin ds-focus(
  $offset: false,
  $includeSelector: true,
  $width: ds-border-width(xs),
  $color: $ds-color-border-primary-strongest
) {
  @if not $includeSelector {
    @include _ds-focus($offset, $width, $color);
  } @else {
    &:focus-visible {
      @include _ds-focus($offset, $width, $color);
    }
  }
}