@use "../global";

@each $size in global.$radiusSizes {
    $suffix: '';
    @if $size != r {
        $suffix: '-#{$size}';
    }
    .rounded#{$suffix} { border-radius: var(--radius#{$suffix}); }
    .rounded-t#{$suffix} { border-radius: var(--radius#{$suffix}) var(--radius#{$suffix}) 0 0; }
    .rounded-b#{$suffix} { border-radius: 0 0 var(--radius#{$suffix}) var(--radius#{$suffix}); }
    .rounded-l#{$suffix} { border-radius: var(--radius#{$suffix}) 0 0 var(--radius#{$suffix}); }
    .rounded-r#{$suffix} { border-radius: 0 var(--radius#{$suffix}) var(--radius#{$suffix}) 0; }
    .rounded-tl#{$suffix} { border-top-left-radius: var(--radius#{$suffix}); }
    .rounded-bl#{$suffix} { border-bottom-left-radius: var(--radius#{$suffix}); }
    .rounded-tr#{$suffix} { border-top-right-radius: var(--radius#{$suffix}); }
    .rounded-br#{$suffix}{ border-bottom-right-radius: var(--radius#{$suffix}); }
}
.rounded-50 { border-radius: 50%; }