@use "sass:math";

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  @content;
}

@mixin border {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
}

@mixin default_btn_style {
  padding: 10px 15px;
  border-radius: 4px;
  border: none;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

@mixin scrollbar_style($width: 3px, $bg: #ddd) {
  &::-webkit-scrollbar {
    width: $width;
  }

  &::-webkit-scrollbar-thumb {
    background: $bg;
  }

  @content;
}

@mixin spacing-classes($property, $prefix, $step, $max) {
  @for $i from 1 through math.div($max, $step) {
    $value: $i * $step;

    .#{$prefix}-#{$value} {
      #{$property}: #{$value}px;
    }
  }
}