@charset 'utf-8';

/*  ========================================================================
    JUICE -> COMPONENTS -> CHIP
    ========================================================================  */

// Check if the components with chip should be imported
@if $import-components and $import-component-chip {
    .chip {
        animation-duration: $chip-animation-duration;
        align-items: center;
        background-color: $chip-background-color;
        border: 0 $chip-border-style $chip-border-color;
        border-bottom-left-radius: $chip-border-radius-bottom-left;
        border-bottom-right-radius: $chip-border-radius-bottom-right;
        border-bottom-width: $chip-border-width-bottom;
        border-left-width: $chip-border-width-left;
        border-right-width: $chip-border-width-right;
        border-top-left-radius: $chip-border-radius-top-left;
        border-top-right-radius: $chip-border-radius-top-right;
        border-top-width: $chip-border-width-top;
        color: $chip-font-color;
        display: inline-flex;
        font-size: $chip-font-size;
        height: $chip-height;
        margin: 0;
        margin-bottom: $chip-element-spacing;

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

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

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

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

        .chip__media,
        .chip__text,
        .chip__action {
            padding: 0 ($chip-content-spacing / 2);

            // Pseudo classes
            &:only-child {
                // Modifiers
                &.chip__text {
                    padding: 0 $chip-content-spacing;
                }
            }

            &:first-child {
                // Modifiers
                &.chip__text,
                &.chip__action {
                    padding-left: $chip-content-spacing;
                }
            }

            &:last-child {
                // Modifiers
                &.chip__text,
                &.chip__action {
                    padding-right: $chip-content-spacing;
                }
            }
        }

        .chip__text,
        .chip__action {
            align-items: center;
            align-self: stretch;
            display: flex;
            justify-content: center;
        }

        .chip__media {
            padding-bottom: ($chip-content-spacing / 2);
            padding-top: ($chip-content-spacing / 2);
            height: 100%;

            // Nested selectors
            img {
                border-bottom-left-radius: $chip-border-radius-bottom-left;
                border-bottom-right-radius: $chip-border-radius-bottom-right;
                border-top-left-radius: $chip-border-radius-top-left;
                border-top-right-radius: $chip-border-radius-top-right;
                display: flex;
                height: 100%;
                max-width: none;
            }
        }

        .chip__text {
            white-space: nowrap;
        }

        .chip__action {
            // Nested selectors
            #{$button} {
                height: ($chip-height / 2);
                padding: 0;
                max-height: ($chip-height / 2);
                max-width: ($chip-height / 2);
                min-height: ($chip-height / 2);
                min-width: ($chip-height / 2);
                width: ($chip-height / 2);
            }
        }

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

                    .chip__media,
                    .chip__text,
                    .chip__action {
                        padding: 0 (map-get($chip-content-spacing-sizes, $size) / 2);

                        // Pseudo classes
                        &:only-child {
                            // Modifiers
                            &.chip__text {
                                padding: 0 map-get($chip-content-spacing-sizes, $size);
                            }
                        }

                        &:first-child {
                            // Modifiers
                            &.chip__text,
                            &.chip__action {
                                padding-left: map-get($chip-content-spacing-sizes, $size);
                            }
                        }

                        &:last-child {
                            // Modifiers
                            &.chip__text,
                            &.chip__action {
                                padding-right: map-get($chip-content-spacing-sizes, $size);
                            }
                        }
                    }

                    .chip__media {
                        padding-bottom: (map-get($chip-content-spacing-sizes, $size) / 2);
                        padding-top: (map-get($chip-content-spacing-sizes, $size) / 2);
                    }

                    .chip__action {
                        // Nested selectors
                        #{$button} {
                            height: (map-get($chip-height-sizes, $size) / 2);
                            max-height: (map-get($chip-height-sizes, $size) / 2);
                            max-width: (map-get($chip-height-sizes, $size) / 2);
                            min-height: (map-get($chip-height-sizes, $size) / 2);
                            min-width: (map-get($chip-height-sizes, $size) / 2);
                            width: (map-get($chip-height-sizes, $size) / 2);
                        }
                    }
                }

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

                                .chip__media,
                                .chip__text,
                                .chip__action {
                                    padding: 0 (map-get($chip-content-spacing-sizes, $size) / 2);

                                    // Pseudo classes
                                    &:only-child {
                                        // Modifiers
                                        &.chip__text {
                                            padding: 0 map-get($chip-content-spacing-sizes, $size);
                                        }
                                    }

                                    &:first-child {
                                        // Modifiers
                                        &.chip__text,
                                        &.chip__action {
                                            padding-left: map-get($chip-content-spacing-sizes, $size);
                                        }
                                    }

                                    &:last-child {
                                        // Modifiers
                                        &.chip__text,
                                        &.chip__action {
                                            padding-right: map-get($chip-content-spacing-sizes, $size);
                                        }
                                    }
                                }

                                .chip__media {
                                    padding-bottom: (map-get($chip-content-spacing-sizes, $size) / 2);
                                    padding-top: (map-get($chip-content-spacing-sizes, $size) / 2);
                                }

                                .chip__action {
                                    // Nested selectors
                                    #{$button} {
                                        height: (map-get($chip-height-sizes, $size) / 2);
                                        max-height: (map-get($chip-height-sizes, $size) / 2);
                                        max-width: (map-get($chip-height-sizes, $size) / 2);
                                        min-height: (map-get($chip-height-sizes, $size) / 2);
                                        min-width: (map-get($chip-height-sizes, $size) / 2);
                                        width: (map-get($chip-height-sizes, $size) / 2);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        // Check if the chip color modifiers should be declared
        @if $chip-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');
                }
            }
        }

        // Check if the chip feedback modifiers should be declared
        @if $chip-feedback-modifiers {
            // Cycle through all of the feedback colors
            @each $feedback-name, $color-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');
                }
            }
        }

        // Check if the chip pill modifier should be declared
        @if $chip-pill-modifier {
            // Modifiers
            &.chip--pill {
                border-radius: 999px;

                // Nested selectors
                .chip__media {
                    // Nested selectors
                    img {
                        border-radius: 999px;
                    }
                }

                .chip__action {
                    // Nested selectors
                    #{$button} {
                        border-radius: 999px;
                    }
                }
            }
        }
    }
}