// WebKit-style focus
@mixin tab-focus {
  outline: 0;
}

@mixin reset-link-text-decoration($text-decoration: none) {
  & {
    text-decoration: $text-decoration;
  }

  &:hover,
  &:focus,
  &:active {
    text-decoration: $text-decoration;
  }
}

@mixin text-emphasis-variant($color) {
  color: $color;

  a&:hover,
  a&:focus {
    color: darken($color, 10%);
  }
}

// Text overflow
// Requires inline-block or block for proper styling

@mixin ellipsis-basic {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin ellipsis($substract: 0) {
  @include ellipsis-basic;
  width: 100% - $substract;
}

// Drop shadow
@mixin drop-shadow($shadow) {
  filter: drop-shadow($shadow);
}

@mixin set-translate-transition($translateX: 0, $translateY: 0) {
  transform: translate(0, 0);

  &.rs-anim-in {
    transform: translate($translateX, $translateY);
  }
}

@mixin icon-bolder($width: 2px) {
  stroke: currentColor;
  stroke-width: $width;
  stroke-linecap: round;
}

// Useful when adding focus ring to an element
@mixin with-focus-ring {
  &:focus-visible {
    @include focus-ring;
  }
}

// Useful when appending the ring into an existing :focus rule
@mixin focus-ring {
  outline: 2px solid var(--rs-focus-ring-color);
  outline-offset: -1px;
}

@mixin focus-ring-slim {
  @include focus-ring;
  outline-width: 2px;
  outline-offset: 0;
}

@mixin focus-ring-inset {
  @include focus-ring;
  outline-offset: -3px;
}

@mixin focus-ring-slim-inset {
  @include focus-ring-inset;
  outline-width: 2px;
}

@mixin focus-ring-outline {
  outline: var(--rs-state-focus-outline);
}

// Border radius helpers
@mixin border-top-radius($radius) {
  border-start-end-radius: $radius;
  border-start-start-radius: $radius;
}

@mixin border-right-radius($radius) {
  border-end-end-radius: $radius;
  border-start-end-radius: $radius;
}

@mixin border-bottom-radius($radius) {
  border-end-end-radius: $radius;
  border-end-start-radius: $radius;
}

@mixin border-left-radius($radius) {
  border-end-start-radius: $radius;
  border-start-start-radius: $radius;
}

// Make sure events pass through
@mixin pointer-event-none {
  pointer-events: none;
}

// Clearfix
@mixin clearfix {
  &::before,
  &::after {
    content: ' ';
    display: table;
  }

  &::after {
    clear: both;
  }
}