@use "../global";

@mixin variant ($name: null) {
    $prefix: null;
    $suffix: null;
    @if $name != null {
        $prefix: #{$name}\:
    }
    @if $name == 'hover' {
        $suffix: ':hover'
    }

    .#{$prefix}opacity-0#{$suffix} { opacity: 0; }
    .#{$prefix}opacity-25#{$suffix} { opacity: 0.25; }
    .#{$prefix}opacity-50#{$suffix} { opacity: 0.5; }
    .#{$prefix}opacity-75#{$suffix} { opacity: 0.75; }
    .#{$prefix}opacity-100#{$suffix} { opacity: 1; }
}

@include variant;
@include variant(hover);