// Section: Presentation
// Module: Opacity

@use "sass:math";
@use "sass:meta";
@use "../config/feature-flags" as config-flags;
@use "../config/breakpoints" as config-breakpoint;
@use "../config/spacing" as config-spacing;
@use "../functions/feature-flags" as fn-flags;

// @component Opacity
// @description Controls element transparency with customizable opacity values and interactive states
// @example
// <!-- Basic opacity -->
// <div class="opacity-50">This element has 50% opacity</div>
// <!-- Responsive opacity -->
// <div class="opacity-100 opacity-50@md">
//   100% opacity by default, 50% on medium screens and up
// </div>
// <!-- Interactive states -->
// <div class="opacity-50 hover:opacity-100">
//   50% opacity, becomes fully visible on hover
// </div>
// <button class="opacity-70 focus:opacity-100">
//   70% opacity, fully visible when focused
// </button>
// <div class="opacity-75 active:opacity-100">
//   75% opacity, fully visible when clicked/active
// </div>
// <!-- Group hover effect -->
// <div class="group">
//   <h3>Parent element with "group" class</h3>
//   <div class="opacity-0 group-hover:opacity-100">
//     Hidden by default, visible when parent is hovered
//   </div>
// </div>
// <!-- With transition -->
// <div class="opacity-50 hover:opacity-100 transition-opacity">
//   Smooth opacity transition on hover
// </div>
//  @classes
// Base:
//  - opacity-{value}: Sets element opacity (0-100%)
//   Values: 0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 100
// Interactive States:
//  - hover:opacity-{value}: Changes opacity on mouse hover
//  - focus:opacity-{value}: Changes opacity when element receives focus
//  - active:opacity-{value}: Changes opacity when element is active/pressed
//  - group-hover:opacity-{value}: Changes opacity when parent with .group class is hovered
// Animation:
//  - transition-opacity: Adds smooth transition when opacity changes
//  @responsive
// All opacity classes support responsive variants using @breakpoint suffix:
//  - opacity-50@sm: 50% opacity on small screens and up
//  - hover:opacity-100@md: Full opacity on hover for medium screens and up
// Available breakpoints: xs, sm, md, lg, xl, xxl
//  @customization
// Opacity values are defined in the $percentages variable
// Transition timing can be customized via CSS variables
//  @see transitions

@mixin opacity($value) {
    opacity: calc(#{$value} / 100);
}

@if fn-flags.feature-enabled("opacity") {
    // Opacity Utilities
    @each $i in config-spacing.$percentages {
        #{config-flags.$parent-selector} .opacity-#{$i},
        #{config-flags.$parent-selector} .hover\:opacity-#{$i}:hover,
        #{config-flags.$parent-selector} .focus\:opacity-#{$i}:focus,
        #{config-flags.$parent-selector} .active\:opacity-#{$i}:active,
        #{config-flags.$parent-selector} .group:hover .group-hover\:opacity-#{$i} {
            @include opacity($i);
        }
    }

    // Responsive Variants for Opacity
    @each $breakpoint, $width in config-breakpoint.$breakpoints {
        @media (min-width: #{$width}) {
            @each $i in config-spacing.$percentages {
                #{config-flags.$parent-selector} .opacity-#{$i}\@#{$breakpoint},
                #{config-flags.$parent-selector} .hover\:opacity-#{$i}\@#{$breakpoint}:hover,
                #{config-flags.$parent-selector} .focus\:opacity-#{$i}\@#{$breakpoint}:focus,
                #{config-flags.$parent-selector} .active\:opacity-#{$i}\@#{$breakpoint}:active,
                #{config-flags.$parent-selector} .group:hover .group-hover\:opacity-#{$i}\@#{$breakpoint} {
                    @include opacity($i);
                }
            }
        }
    }
}