@charset 'utf-8';

/*  ========================================================================
    JUICE -> COMPONENTS -> ACCORDION
    ========================================================================  */

// Check if the components with accordion should be imported
@if $import-components and $import-component-accordion {
    .accordion {
        border: 0 $accordion-border-style transparent;
        border-bottom-left-radius: $accordion-border-radius-bottom-left;
        border-bottom-right-radius: $accordion-border-radius-bottom-right;
        border-top-left-radius: $accordion-border-radius-top-left;
        border-top-right-radius: $accordion-border-radius-top-right;
        box-shadow: $accordion-box-shadow;
        display: flex;
        flex-direction: column;
        font-size: $accordion-font-size;
        margin-bottom: $accordion-element-spacing;

        // Nested selectors
        a:not(.button) {
            color: $accordion-link-color;

            // Pseudo classes
            &:hover {
                color: $accordion-link-color-hover;
            }

            &:focus {
                color: $accordion-link-color-focus;
            }

            &:active {
                color: $accordion-link-color-active;
            }
        }

        .accordion__item {
            // Pseudo classes
            &:first-child {
                // Nested selectors
                .accordion__head {
                    border-top-left-radius: $accordion-border-radius-top-left;
                    border-top-right-radius: $accordion-border-radius-top-right;
                    border-top-width: $accordion-border-width-top;
                }
            }

            &:last-child {
                // Modifiers: State hooks
                &.is-collapsed {
                    // Nested selectors
                    .accordion__head {
                        border-bottom-left-radius: $accordion-border-radius-bottom-left;
                        border-bottom-right-radius: $accordion-border-radius-bottom-right;
                        border-bottom-width: $accordion-border-width-bottom;
                    }
                }

                // Nested selectors
                .accordion__body {
                    border-bottom-left-radius: $accordion-border-radius-bottom-left;
                    border-bottom-right-radius: $accordion-border-radius-bottom-right;
                    border-bottom-width: $accordion-border-width-bottom;
                }
            }

            // Modifiers: State hooks
            &.is-collapsed {
                // Nested selectors
                .accordion__head {
                    margin-bottom: (0px - $accordion-border-width-divider);

                    // Nested selectors
                    .accordion__action {
                        // Nested selectors
                        .accordion__collapse {
                            display: inline-flex;
                        }

                        .accordion__expand {
                            display: none;
                        }
                    }
                }

                .accordion__body {
                    display: none;
                }
            }

            &.is-expanded {
                // Nested selectors
                .accordion__head {
                    // Nested selectors
                    .accordion__action {
                        // Nested selectors
                        .accordion__collapse {
                            display: none;
                        }

                        .accordion__expand {
                            display: inline-flex;
                        }
                    }
                }
            }

            // Nested selectors
            .accordion__head,
            .accordion__body {
                border: 0 $accordion-border-style transparent;
                padding: $accordion-content-spacing;
            }

            .accordion__head {
                align-items: center;
                background-color: $accordion-head-background-color;
                border-bottom-width: $accordion-border-width-divider;
                border-color: $accordion-head-border-color;
                border-left-width: $accordion-border-width-left;
                border-right-width: $accordion-border-width-right;
                border-top-width: $accordion-border-width-divider;
                color: $accordion-head-font-color;
                display: flex;
                cursor: pointer;
                position: relative;
                user-select: none;
                z-index: 2;

                // Nested selectors
                .accordion__headings {
                    flex-grow: 1;

                    // Nested selectors
                    #{$heading},
                    .accordion__heading {
                        margin-bottom: 0;
                        opacity: 0.5;

                        // Pseudo classes
                        &:first-child {
                            opacity: 1;
                        }
                    }
                }

                .accordion__action {
                    align-items: center;
                    display: flex;
                }
            }

            .accordion__body {
                background-color: $accordion-background-color;
                border-color: $accordion-border-color;
                border-left-width: $accordion-border-width-left;
                border-right-width: $accordion-border-width-right;
                color: $accordion-font-color;
                position: relative;
                z-index: 1;
            }
        }

        // Check if the accordion size modifiers should be declared
        @if $accordion-size-modifiers {
            // Cycle through all of the sizes
            @each $size in $sizes {
                // Modifiers: Sizes
                &.is-#{$size} {
                    font-size: map-get($accordion-font-size-sizes, $size);

                    // Nested selectors
                    .accordion__head,
                    .accordion__body {
                        padding: map-get($accordion-content-spacing-sizes, $size);
                    }
                }

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

                                // Nested selectors
                                .accordion__head,
                                .accordion__body {
                                    padding: map-get($accordion-content-spacing-sizes, $size);
                                }
                            }
                        }
                    }
                }
            }
        }

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

        // Check if the accordion spaced modifier should be declared
        @if $accordion-spaced-modifier {
            // Modifiers
            &.accordion--spaced {
                box-shadow: none;
                margin-bottom: 0;

                // Nested selectors
                .accordion__item {
                    box-shadow: none;
                    margin-bottom: $accordion-content-spacing;

                    // Modifiers: State hooks
                    &.is-collapsed {
                        // Nested selectors
                        .accordion__head {
                            border-bottom-left-radius: $accordion-border-radius-bottom-left;
                            border-bottom-right-radius: $accordion-border-radius-bottom-right;
                            border-bottom-width: $accordion-border-width-bottom;
                        }
                    }

                    // Nested selectors
                    .accordion__head {
                        border-top-left-radius: $accordion-border-radius-top-left;
                        border-top-right-radius: $accordion-border-radius-top-right;
                        border-top-width: $accordion-border-width-top;
                    }

                    .accordion__body {
                        border-bottom-left-radius: $accordion-border-radius-bottom-left;
                        border-bottom-right-radius: $accordion-border-radius-bottom-right;
                        border-bottom-width: $accordion-border-width-bottom;
                    }
                }
            }
        }
    }
}