@use "../variables" as var;

@mixin arrow-circle($size,$color-bg:var.$color-secondary,$color-line:white) {
  display: inline-block;
  background: $color-bg no-repeat;
  background-image: url(#{var.$root-theme-img + 'arrow-border-' + $color-line + '.svg' });
  background-position: center;

  @if $size == ss {
    width: 1.25rem;
    height: 1.25rem;
    background-size: 0.25rem 0.5rem;
  } @else if $size == s {
    width: 1.75rem;
    height: 1.75rem;
    background-size: 0.3rem 0.6rem;
  } @else if $size == m {
    width: 2rem;
    height: 2rem;
    background-size: 0.375rem 0.75rem;
  } @else if $size == l {
    width: 3rem;
    height: 3rem;
    background-size: 0.625rem 1.1875rem;
  }

  border-radius: var.$border-radius-circle;
}
