@mixin horizontal-slider {
  position: relative;
  flex-wrap: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}

@mixin form-focus-ring(
  $outline-offset: 2px,
  $outline-width: 2px,
  $radius: 4px,
  $outline-color: $primary
) {
  outline: $outline-width solid $outline-color;
  box-shadow: none;
  border-radius: $radius;
  outline-offset: $outline-offset;
}

@mixin focused-item($width: 2px, $offset: 2px, $color: $primary) {
  &:focus,
  &:focus-visible {
    box-shadow: none;
    outline: $width solid $color;
    outline-offset: $offset;
  }
}