@charset 'utf-8';

/*  ========================================================================
    JUICE -> ELEMENTS -> BADGE -> SHIELD
    ========================================================================  */

// Check if the elements with shield should be imported
@if $import-elements and $import-element-shield {
    .shield {
        align-items: center;
        border-bottom-left-radius: $shield-border-radius-bottom-left;
        border-bottom-right-radius: $shield-border-radius-bottom-right;
        border-top-left-radius: $shield-border-radius-top-left;
        border-top-right-radius: $shield-border-radius-top-right;
        display: inline-flex;
        margin: 0;
        margin-bottom: $shield-element-spacing;

        // Nested selectors
        .shield__text,
        .shield__badge {
            align-items: center;
            border: 0 $shield-border-style transparent;
            border-bottom-width: $shield-border-width-bottom;
            border-radius: 0;
            border-top-width: $shield-border-width-top;
            display: flex;
            font-size: $shield-font-size;
            height: $shield-height;
            justify-content: center;
            padding: 0 $shield-content-spacing;
            white-space: nowrap;

            // Pseudo classes
            &:first-child {
                border-bottom-left-radius: $shield-border-radius-bottom-left;
                border-left-width: $shield-border-width-left;
                border-top-left-radius: $shield-border-radius-top-left;
            }

            &:last-child {
                border-bottom-right-radius: $shield-border-radius-bottom-right;
                border-right-width: $shield-border-width-right;
                border-top-right-radius: $shield-border-radius-top-right;
            }

            // Check if the shield color modifiers should be declared
            @if $shield-color-modifiers {
                // Cycle through all of the base colors
                @each $color-name, $color-value in $base-colors {
                    // Modifiers: Base colors
                    &.is-#{$color-name} {
                        background-color: base-color($color-name);
                        border-color: base-color('#{$color-name}-darken-3');
                        color: base-color('#{$color-name}-inverted-text');

                        // Nested selectors
                        a {
                            color: inherit;
                        }
                    }
                }
            }

            // Check if the shield feedback modifiers should be declared
            @if $shield-feedback-modifiers {
                // Cycle through all of the feedback colors
                @each $feedback-name, $feedback-value in $feedback-colors {
                    // Modifiers: Feedback colors
                    &.has-#{$feedback-name} {
                        background-color: feedback-color($feedback-name);
                        border-color: feedback-color('#{$feedback-name}-darken-3');
                        color: feedback-color('#{$feedback-name}-inverted-text');

                        // Nested selectors
                        a {
                            color: inherit;
                        }
                    }
                }
            }

            // Nested selectors
            a {
                color: inherit;
            }
        }

        .shield__text {
            background-color: $shield-text-background-color;
            border-color: $shield-text-border-color;
            color: $shield-text-font-color;
        }

        .shield__badge {
            background-color: $shield-badge-background-color;
            border-color: $shield-badge-border-color;
            color: $shield-badge-font-color;
        }

        // Check if the shield size modifiers should be declared
        @if $shield-size-modifiers {
            // Cycle through all of the sizes
            @each $size in $sizes {
                // Modifiers: Sizes
                &.is-#{$size} {
                    // Nested selectors
                    .shield__badge,
                    .shield__text {
                        font-size: map($shield-font-size-sizes, $size);
                        height: map($shield-height-sizes, $size);
                        padding: 0 map($shield-content-spacing-sizes, $size);
                    }
                }

                // Check if the shield size modifiers with breakpoints should be declared
                @if $shield-size-modifiers-with-breakpoints {
                    // Cycle through all of the breakpoints
                    @each $breakpoint-name, $breakpoint-value in $breakpoints {
                        // Breakpoint
                        @include breakpoint($breakpoint-name) {
                            // Modifiers: Size
                            &.is-#{$size}\@#{$breakpoint-name} {
                                // Nested selectors
                                .shield__badge,
                                .shield__text {
                                    font-size: map($shield-font-size-sizes, $size);
                                    height: map($shield-height-sizes, $size);
                                    padding: 0 map($shield-content-spacing-sizes, $size);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}