// Base placeholder styles
.placeholder {
    display: inline-block;
    cursor: wait;
    height: map-get($placeholder-heights, 'md');
    background-color: $placeholder-color;
}

// Placeholder glow styles
.placeholder-glow {
    &.placeholder,
    .placeholder,
    &.placeholder-btn,
    .placeholder-btn {
        position: relative;
        border: none;
        cursor: wait;
        @include glowing-background($placeholder-color);

        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

            background-color: $placeholder-color;
        }

        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

            @include glowing-background();
        }
    }

    .placeholder-btn,
    &.placeholder-btn {
        height: nth(map-get($btn-sizes, 'md'), 1) * 3;
    }
}


// Placeholder glow styles for different colors
.placeholder-glow.placeholder,
.placeholder-glow .placeholder,
.placeholder-glow.placeholder-btn,
.placeholder-glow .placeholder-btn {
    // Iterate over base color palette
    @each $key, $val in $base-color-palette {
        @for $i from 1 through 9 {
            $shade: if(
                $i <= 4,
                generate-shade($val, 100 - $i * 10, 'lighten'),
                generate-shade($val, $i * 10 - 40, 'darken')
            );

            // Placeholder class with glowing background for base colors
            .placeholder-#{$key}-#{$i * 100},
            &.placeholder-#{$key}-#{$i * 100} {
                &::before {
                    background-color: $shade;
                }
            }

            // Generate states (hover, focus, etc.)
            @each $state in $state-selectors {
                .#{$state}\:placeholder-#{$key}-#{$i * 100}:#{$state},
                &.#{$state}\:placeholder-#{$key}-#{$i * 100}:#{$state} {
                    &::before {
                        background-color: $shade;
                    }
                }
            }

            // Generate breakpoints
            @each $bp_key, $bp_val in $breakpoints {
                @media (min-width: $bp_val) {
                    .#{$bp_key}\:placeholder-#{$key}-#{$i * 100},
                    &.#{$bp_key}\:placeholder-#{$key}-#{$i * 100} {
                        &::before {
                            background-color: $shade;
                        }
                    }

                    // Generate states with breakpoints
                    @each $state in $state-selectors {
                        .#{$bp_key}\:#{$state}\:placeholder-#{$key}-#{$i * 100}:#{$state},
                        &.#{$bp_key}\:#{$state}\:placeholder-#{$key}-#{$i * 100}:#{$state} {
                            &::before {
                                background-color: $shade;
                            }
                        }
                    }
                }
            }
        }
    }

    // Iterate over theme color palette
    @each $key, $val in $theme-color-palette {
        // Placeholder class with glowing background for theme colors
        .placeholder-#{$key},
        &.placeholder-#{$key} {
            &::before {
                background-color: $val;
            }
        }

        // Generate states for theme colors
        @each $state in $state-selectors {
            .#{$state}\:placeholder-#{$key}:#{$state},
            &.#{$state}\:placeholder-#{$key}:#{$state} {
                &::before {
                    background-color: $val;
                }
            }
        }

        // Generate breakpoints for theme colors
        @each $bp_key, $bp_val in $breakpoints {
            @media (min-width: $bp_val) {
                .#{$bp_key}\:placeholder-#{$key},
                &.#{$bp_key}\:placeholder-#{$key} {
                    &::before {
                        background-color: $val;
                    }
                }

                // Generate states with breakpoints for theme colors
                @each $state in $state-selectors {
                    .#{$bp_key}\:#{$state}\:placeholder-#{$key}:#{$state},
                    &.#{$bp_key}\:#{$state}\:placeholder-#{$key}:#{$state} {
                        &::before {
                            background-color: $val;
                        }
                    }
                }
            }
        }
    }
}


// Iterate over each key-val pair in the $placeholder-heights
@each $key, $val in $placeholder-heights {
    .placeholder-#{$key} {
        height: $val;
    }

    // Iterate over each bp_key-bp_val pair in the $breakpoints
    @each $bp_key, $bp_val in $breakpoints {
        @media (min-width: $bp_val) {
            .#{$bp-key}\:placeholder-#{$key} {
                height: $val;
            }
        }
    }
}