// =Radius
.radius-circle { border-radius: 9999px }

$radius: scale(radius);
@each $name, $value in $radius {
    .radius-#{$name} { border-radius: $value }
    .radius-top-#{$name} {
        border-top-left-radius: $value;
        border-top-right-radius: $value;
    }
    .radius-bottom-#{$name} {
        border-bottom-left-radius: $value;
        border-bottom-right-radius: $value;
    }
    .radius-left-#{$name} {
        border-top-left-radius: $value;
        border-bottom-left-radius: $value;
    }
    .radius-right-#{$name} {
        border-top-right-radius: $value;
        border-bottom-right-radius: $value;
    }
}
@include for-sm {
    .radius-off-sm    { border-radius: 0 }
    .radius-circle-sm { border-radius: 9999px }
    @each $name, $value in $radius {
        .radius-#{$name}-sm { border-radius: $value }
        .radius-top-#{$name}-sm {
            border-top-left-radius: $value;
            border-top-right-radius: $value;
        }
        .radius-bottom-#{$name}-sm {
            border-bottom-left-radius: $value;
            border-bottom-right-radius: $value;
        }
        .radius-left-#{$name}-sm {
            border-top-left-radius: $value;
            border-bottom-left-radius: $value;
        }
        .radius-right-#{$name}-sm {
            border-top-right-radius: $value;
            border-bottom-right-radius: $value;
        }
    }
}