@charset 'utf-8';

/*  ========================================================================
    JUICE -> ELEMENTS -> FORM -> CUSTOM -> FIELDSET
    ========================================================================  */

// Check if the elements with custom fieldset should be imported
@if $import-elements and $import-element-custom-fieldset {
    .custom-fieldset {
        display: flex;
        margin-bottom: $custom-fieldset-element-spacing;

        // Nested selectors
        #{$custom-fieldset-element} {
            border-bottom-width: $custom-fieldset-border-width-bottom;
            border-left-width: $custom-fieldset-border-width-divider;
            border-right-width: $custom-fieldset-border-width-divider;
            border-top-width: $custom-fieldset-border-width-top;
            border-style: $custom-fieldset-border-style;
            border-radius: 0;
            margin-right: (0px - $custom-fieldset-border-width-divider);
            margin-bottom: 0;
            width: auto;

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

            &:last-child {
                border-bottom-right-radius: $custom-fieldset-border-radius-bottom-right;
                border-right-width: $custom-fieldset-border-width-right;
                border-top-right-radius: $custom-fieldset-border-radius-top-right;
                margin-right: 0;
            }

            // Modifiers
            &.custom-fieldset__spotlight {
                flex-grow: 1;
            }
        }

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

                    select {
                        font-size: map-get($select-font-size-sizes, $size);
                        height: map-get($select-height-sizes, $size);
                        padding: map-get($select-content-spacing-sizes, $size);
                    }

                    textarea {
                        font-size: map-get($textarea-font-size-sizes, $size);
                        padding: map-get($textarea-content-spacing-sizes, $size);
                    }

                    #{button} {
                        font-size: map-get($button-font-size-sizes, $size);
                        height: map-get($button-height-sizes, $size);
                        padding: 0 map-get($button-content-spacing-sizes, $size);
                    }
                }

                // Check if the custom fieldset size modifiers with breakpoints should be declared
                @if $custom-fieldset-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
                                input {
                                    font-size: map-get($input-font-size-sizes, $size);
                                    height: map-get($input-height-sizes, $size);
                                    padding: map-get($input-content-spacing-sizes, $size);
                                }

                                select {
                                    font-size: map-get($select-font-size-sizes, $size);
                                    height: map-get($select-height-sizes, $size);
                                    padding: map-get($select-content-spacing-sizes, $size);
                                }

                                textarea {
                                    font-size: map-get($textarea-font-size-sizes, $size);
                                    padding: map-get($textarea-content-spacing-sizes, $size);
                                }

                                #{button} {
                                    font-size: map-get($button-font-size-sizes, $size);
                                    height: map-get($button-height-sizes, $size);
                                    padding: 0 map-get($button-content-spacing-sizes, $size);
                                }
                            }
                        }
                    }
                }
            }
        }

        // Check if the custom fieldset feedback modifiers should be declared
        @if $custom-fieldset-feedback-modifiers {
            // Cycle through all of the feedback colors
            @each $feedback-name, $feedback-value in $feedback-colors {
                // Modifiers: Feedback colors
                &.has-#{$feedback-name} {
                    #{$custom-fieldset-element} {
                        @extend .has-#{$feedback-name};
                        content: ''; // Stops incorrect editor syntax highlighting
                    }
                }
            }
        }
    }
}