$_border-radius-value: clamp(80px, 10vw, 360px);

@function top-left() {
  @return #{$_border-radius-value} 0 0 0;
}

@function top-right() {
  @return 0 #{$_border-radius-value} 0 0;
}

@function bottom-left() {
  @return 0 0 0 #{$_border-radius-value};
}

@function bottom-right() {
  @return 0 0 #{$_border-radius-value} 0;
}

@function top-left--bottom-right() {
  @return
    #{ $_border-radius-value } 0 #{ $_border-radius-value } 0 /
    #{ $_border-radius-value } 0 #{ $_border-radius-value } 0;
}

@function top-right--bottom-left() {
  @return
    0 #{ $_border-radius-value } #{ $_border-radius-value } #{ $_border-radius-value } /
    0 #{ $_border-radius-value } 0 #{ $_border-radius-value };
}


@function top-arch() {
  @return 50vw 50vw 0 0;
}

@function right-arch() {
  @return 0 50vw 50vw 0;
}

@function bottom-arch() {
  @return 0 0 50vw 50vw;
}

@function left-arch() {
  @return 50vw 0 0 50vw;
}

@function circle() {
  @return 50vw;
}

