@use 'sass:map';
@use '../src/internal/generator_v2';
@use '../src/internal' as *;

/* A collection of modifiers that extend control styling */
#{$button-selectors} {
    &.btn--pilled {
        border-radius: 6.25rem;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    /* btn--circle: contents must be placed inside child element */
    &.btn--circle {
        border-radius: 100%;
        min-width: 60px;
        overflow: hidden;
        padding: 0;
        text-align: center;

        &:before {
            content: '';
            display: inline-block;
            vertical-align: middle;
            padding-top: 100%;
        }

        * {
            display: inline;
            max-width: 90%;
            vertical-align: middle;
            white-space: pre-wrap;
        }
    }
}

/* Input (primary text-based) controls apply to inputs */
.input-control--pilled {
    border-radius: 6.25rem !important;
}

/* Theme modifiers */
@include generator_v2.utility-with-body(
        $variants: (
            get-pseudo-variants($THEME-MODIFIERS)
        ),
        $override: '!important'
    )
    using ($props...) {
    /* v1 Colors */
    @each $name, $color in $semantic-colors {
        // Semantic color bg classes
        @include generator_v2.inline-class-generator('bg-#{$name}', $props...) using ($config) {
            // --btn-color: #{hex-to-rgb($color)};
            // // Not important, use this as a fallback in case no border is set
            // --btn-shadow: 0 0 0 0.2rem #{transparentize($color, 0.5)};

            // background-color: rgba(#{hex-to-rgb($color)}, var(--bg-opacity)) #{map.get($config, override)};

            &:is(#{$button-selectors}) {
                --btn-color: #{hex-to-rgb($color)};
                --btn-hover-color: #{hex-to-rgb(to-hover-color($color, 5%))} #{map.get($config, override)};
                // Not important, use this as a fallback in case no border is set
                --btn-shadow: 0 0 0 0.2rem #{transparentize($color, 0.5)};
            }

            &:not(#{$button-selectors}) {
                background-color: rgba(#{hex-to-rgb($color)}, var(--bg-opacity)) #{map.get($config, override)};
            }
        }

        // Semantic color text classes
        @include generator_v2.inline-class-generator('text-#{$name}', $props...) using ($config) {
            --btn-fg: #{hex-to-rgb($color)};
            --btn-border-color: #{hex-to-rgb($color)};

            color: rgba(#{hex-to-rgb($color)}, var(--color-opacity)) #{map.get($config, override)};
            // Not important, use this as a fallback in case no border is set
            border-color: rgba(#{hex-to-rgb($color)}, var(--border-opacity));
        }

        // Semantic color border classes
        @include generator_v2.inline-class-generator('border-#{$name}', $props...) using ($config) {
            --btn-border-color: #{hex-to-rgb($color)};
            --btn-shadow: 0 0 0 0.2rem #{transparentize($color, 0.5)} #{map.get($config, override)};

            border-color: rgba(#{hex-to-rgb($color)}, var(--border-opacity)) #{map.get($config, override)};
        }
    }

    @include generator_v2.inline-class-generator('bg-transparent', $props...) using ($config) {
        background-color: transparent #{map.get($config, override)};
    }

    @include generator_v2.inline-class-generator('text-transparent', $props...) using ($config) {
        border-color: transparent #{map.get($config, override)};
        color: transparent #{map.get($config, override)};
    }

    /* v2 Colors */
    @each $name, $palette in $v2Colors {
        @each $level, $color in $palette {
            @if $color != null {
                // Bg color
                @include generator_v2.inline-class-generator('bg-#{$name}-#{$level}', $props...) using ($config) {
                    &:is(#{$button-selectors}) {
                        --btn-color: #{hex-to-rgb($color)};
                        --btn-hover-color: #{hex-to-rgb(to-hover-color($color, 5%))} #{map.get($config, override)};
                        // Not important, use this as a fallback in case no border is set
                        --btn-shadow: 0 0 0 0.2rem #{transparentize($color, 0.5)};
                    }

                    &:not(#{$button-selectors}) {
                        background-color: rgba(#{hex-to-rgb($color)}, var(--bg-opacity)) #{map.get($config, override)};
                    }
                }

                // Text color
                @include generator_v2.inline-class-generator('text-#{$name}-#{$level}', $props...) using ($config) {
                    --btn-fg: #{hex-to-rgb($color)};
                    --btn-border-color: #{hex-to-rgb($color)};

                    color: rgba(#{hex-to-rgb($color)}, var(--color-opacity)) #{map.get($config, override)};
                    // Not important, use this as a fallback in case no border is set
                    border-color: rgba(#{hex-to-rgb($color)}, var(--border-opacity));
                }

                // Border color
                @include generator_v2.inline-class-generator('border-#{$name}-#{$level}', $props...) using ($config) {
                    --btn-border-color: #{hex-to-rgb($color)} #{map.get($config, override)};
                    --btn-shadow: 0 0 0 0.2rem #{transparentize($color, 0.5)};

                    border-color: rgba(#{hex-to-rgb($color)}, var(--border-opacity)) #{map.get($config, override)};
                }
            }
        }
    }
}