Chips: Selectable Chips

@import '../animation/functions';
@import '../animation/variables';
@import '../checkbox/functions';
@import '../checkbox/variables';
@import '../elevation/mixins';
@import '../density/functions';
@import '../feature-targeting/functions';
@import '../feature-targeting/mixins';
@import '../ripple/mixins';
@import '../rtl/mixins';
@import '../theme/functions';
@import '../theme/mixins';
@import '../touch-target/mixins';
@import '../typography/mixins';
@import '../shape/mixins';
@import '../shape/functions';
@import './variables';

$acl-chip-ripple-target: '.acl-chip__ripple';

@mixin acl-chip-core-styles($query: acl-feature-all()) {
    @include acl-chip-without-ripple($query: $query);
    @include acl-chip-ripple($query: $query);
}

@mixin acl-chip-without-ripple($query: acl-feature-all()) {
    $feat-animation: acl-feature-create-target($query, animation);
    $feat-color: acl-feature-create-target($query, color);
    $feat-structure: acl-feature-create-target($query, structure);

    @include acl-chip-leading-icon-color($acl-chip-icon-color, $query: $query);
    @include acl-chip-trailing-icon-color($acl-chip-icon-color, $query: $query);
    @include acl-chip-leading-icon-size($acl-chip-leading-icon-size, $query: $query);
    @include acl-chip-trailing-icon-size($acl-chip-trailing-icon-size, $query: $query);
    @include acl-chip-trailing-icon-margin($query: $query);
    @include acl-touch-target-wrapper($query);

    .acl-chip {
        @include acl-chip-shape-radius(50%, $query: $query);
        @include acl-chip-fill-color($acl-chip-fill-color-default, $query: $query);
        @include acl-chip-ink-color-without-ripple_($acl-chip-ink-color-default, $query: $query);
        @include acl-typography(body2, $query: $query);
        @include acl-chip-density($density-scale: 0, $query: $query);
        @include acl-chip-leading-icon-margin($query: $query);

        @include acl-feature-targets($feat-structure) {
            display: inline-flex;
            position: relative;
            align-items: center;
            box-sizing: border-box;
            padding: 0 $acl-chip-horizontal-padding;
            border-width: 0;
            outline: none;
            cursor: pointer;
            -webkit-appearance: none;

            &::-moz-focus-inner {
                padding: 0;
                border: 0;
            }
        }

        &:hover {
            @include acl-feature-targets($feat-color) {
                @include acl-theme-prop(color, on-surface);
            }
        }

        .acl-chip__touch {
            @include acl-touch-target($query);
        }
    }

    .acl-chip--exit {
        @include acl-feature-targets($feat-color) {
            transition: $acl-chip-exit-transition;
        }

        @include acl-feature-targets($feat-structure) {
            opacity: 0;
        }
    }

    .acl-chip__text {
        @include acl-feature-targets($feat-structure) {
            white-space: nowrap;
            font-size: 12px;
        }
    }

    .acl-chip__icon {
        @include acl-feature-targets($feat-structure) {
            border-radius: 50%;
            outline: none;
            vertical-align: middle;
        }
    }

    .acl-chip__checkmark {
        @include acl-feature-targets($feat-structure) {
            //height: $acl-chip-leading-icon-size;
            height: 15px;
        }
    }

    .acl-chip__checkmark-path {
        @include acl-feature-targets($feat-animation) {
            transition: acl-checkbox-transition-exit(
                stroke-dashoffset,
                $acl-chip-checkmark-animation-delay,
                $acl-chip-checkmark-animation-duration
            );
        }

        @include acl-feature-targets($feat-structure) {
            stroke-width: 2px;
            stroke-dashoffset: $acl-checkbox-mark-path-length_;
            stroke-dasharray: $acl-checkbox-mark-path-length_;
        }
    }

    .acl-chip__text:focus {
        @include acl-feature-targets($feat-structure) {
            outline: none;
        }
    }

    .acl-chip--selected .acl-chip__checkmark-path {
        @include acl-feature-targets($feat-structure) {
            stroke-dashoffset: 0;
        }
    }

    .acl-chip__icon--leading,
    .acl-chip__icon--trailing {
        @include acl-feature-targets($feat-structure) {
            // Make these positioned elements, such that they're stacked above the
            // touch target element (`acl-chip__touch`), so that clicks reach the
            // icons (e.g. for removable input chips).
            position: relative;
        }
    }

    // Change color of selected choice chips

    .acl-chip-set--choice {
        .acl-chip {
            @include acl-chip-selected-ink-color-without-ripple_(primary, $query: $query);
        }

        .acl-chip--selected {
            @include acl-feature-targets($feat-color) {
                @include acl-theme-prop(background-color, #1facec);
                background-color: #1facec;
            }
        }
    }

    // Add leading checkmark to filter chips with no leading icon

    .acl-chip__checkmark-svg {
        @include acl-feature-targets($feat-structure) {
            width: 0;
            //height: $acl-chip-leading-icon-size;
            height: 15px;
            margin-right: -4px;
        }

        @include acl-feature-targets($feat-animation) {
            transition: width $acl-chip-width-animation-duration $acl-animation-standard-curve-timing-function;
        }
    }

    .acl-chip--selected .acl-chip__checkmark-svg {
        @include acl-feature-targets($feat-structure) {
            //width: $acl-chip-leading-icon-size;
            width: 15px;
        }
    }

    // Add leading checkmark to filter chips with a leading icon

    .acl-chip-set--filter {
        .acl-chip__icon--leading {
            @include acl-feature-targets($feat-animation) {
                transition: opacity $acl-chip-opacity-animation-duration linear;
                transition-delay: $acl-chip-leading-icon-delay;
            }

            @include acl-feature-targets($feat-structure) {
                opacity: 1;
            }

            + .acl-chip__checkmark {
                @include acl-feature-targets($feat-animation) {
                    transition: opacity $acl-chip-opacity-animation-duration linear;

                    // Delay the checkmark transition.
                    transition-delay: $acl-chip-checkmark-with-leading-icon-delay;
                }

                @include acl-feature-targets($feat-structure) {
                    opacity: 0;
                }

                .acl-chip__checkmark-svg {
                    // stylelint-disable max-nesting-depth
                    vertical-align: initial;

                    @include acl-feature-targets($feat-animation) {
                        transition: width 0ms;
                    }

                    // stylelint-enable max-nesting-depth
                }
            }
        }

        .acl-chip--selected .acl-chip__icon--leading {
            @include acl-feature-targets($feat-structure) {
                opacity: 0;
            }

            + .acl-chip__checkmark {
                @include acl-feature-targets($feat-structure) {
                    // This ensures that the checkmark has zero width while the leading icon is still animating.
                    width: 0;
                    opacity: 1;
                }
            }
        }

        .acl-chip__icon--leading-hidden.acl-chip__icon--leading {
            @include acl-feature-targets($feat-structure) {
                width: 0;
            }

            @include acl-feature-targets($feat-structure) {
                // This ensures that the leading icon doesn't fade in while the checkmark is fading out.
                opacity: 0;
            }

            + .acl-chip__checkmark {
                @include acl-feature-targets($feat-structure) {
                    //width: $acl-chip-leading-icon-size;
                    width: 15px;
                }
            }
        }
    }
}

@mixin acl-chip-ripple($query: acl-feature-all()) {
    @include acl-ripple-common($query);
    $feat-structure: acl-feature-create-target($query, structure);

    .acl-chip {
        @include acl-ripple-surface($query: $query, $ripple-target: $acl-chip-ripple-target);
        @include acl-ripple-radius-bounded($query: $query, $ripple-target: $acl-chip-ripple-target);
        @include acl-chip-ink-color-ripple_($acl-chip-ink-color-default, $query: $query);

        #{$acl-chip-ripple-target} {
            @include acl-ripple-target-common($query: $query);

            @include acl-feature-targets($feat-structure) {
                overflow: hidden;
            }
        }
    }

    .acl-chip-set--choice {
        .acl-chip {
            @include acl-chip-selected-ink-color-ripple_(primary, $query: $query);
        }
    }
}

@mixin acl-chip-set-core-styles($query: acl-feature-all()) {
    $feat-animation: acl-feature-create-target($query, animation);
    $feat-structure: acl-feature-create-target($query, structure);

    @include acl-feature-targets($feat-animation) {
        @keyframes acl-chip-entry {
            from {
                transform: scale(0.8);
                opacity: 0.4;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }
    }

    .acl-chip-set {
        @include acl-chip-set-spacing(8px, $query: $query);

        @include acl-feature-targets($feat-structure) {
            display: flex;
            flex-wrap: wrap;
            box-sizing: border-box;
        }
    }

    .acl-chip-set--input .acl-chip {
        @include acl-feature-targets($feat-animation) {
            animation: acl-chip-entry 100ms $acl-animation-deceleration-curve-timing-function;
        }
    }
}

@mixin acl-chip-shape-radius(
    $radius,
    $rtl-reflexive: false,
    $density-scale: $acl-chip-density-scale,
    $query: acl-feature-all()
) {
    $height: acl-density-prop-value(
        $density-config: $acl-chip-density-config,
        $density-scale: $density-scale,
        $property-name: height,
    );

    @include acl-shape-radius(acl-shape-resolve-percentage-radius($height, $radius), $rtl-reflexive, $query: $query);

    #{$acl-chip-ripple-target} {
        @include acl-shape-radius(
            acl-shape-resolve-percentage-radius($height, $radius),
            $rtl-reflexive,
            $query: $query
        );
    }
}

@mixin acl-chip-fill-color-accessible($color, $query: acl-feature-all()) {
    $fill-tone: acl-theme-tone($color);

    @include acl-chip-fill-color($color, $query: $query);

    @if ($fill-tone == 'dark') {
        @include acl-chip-ink-color(text-primary-on-dark, $query: $query);
        @include acl-chip-selected-ink-color(text-primary-on-dark, $query: $query);
        @include acl-chip-leading-icon-color(text-primary-on-dark, $query: $query);
        @include acl-chip-trailing-icon-color(text-primary-on-dark, $query: $query);
    } @else {
        @include acl-chip-ink-color(text-primary-on-light, $query: $query);
        @include acl-chip-selected-ink-color(text-primary-on-light, $query: $query);
        @include acl-chip-leading-icon-color(text-primary-on-light, $query: $query);
        @include acl-chip-trailing-icon-color(text-primary-on-light, $query: $query);
    }
}

@mixin acl-chip-fill-color($color, $query: acl-feature-all()) {
    $feat-color: acl-feature-create-target($query, color);

    @include acl-feature-targets($feat-color) {
        @include acl-theme-prop(background-color, $color);
    }
}

@mixin acl-chip-ink-color($color, $query: acl-feature-all()) {
    @include acl-chip-ink-color-ripple_($color, $query: $query);
    @include acl-chip-ink-color-without-ripple_($color, $query: $query);
}

@mixin acl-chip-ink-color-without-ripple_($color, $query) {
    $feat-color: acl-feature-create-target($query, color);

    @include acl-feature-targets($feat-color) {
        @include acl-theme-prop(color, $color);
    }

    &:hover {
        @include acl-feature-targets($feat-color) {
            @include acl-theme-prop(color, $color);
        }
    }
}

@mixin acl-chip-ink-color-ripple_($color, $query) {
    @include acl-states($color, true, $query: $query, $ripple-target: $acl-chip-ripple-target);
}

@mixin acl-chip-selected-ink-color($color, $query: acl-feature-all()) {
    @include acl-chip-selected-ink-color-ripple_($color, $query: $query);
    @include acl-chip-selected-ink-color-without-ripple_($color, $query: $query);
}

@mixin acl-chip-selected-ink-color-without-ripple_($color, $query) {
    $feat-color: acl-feature-create-target($query, color);

    &.acl-chip--selected {
        @include acl-feature-targets($feat-color) {
            @include acl-theme-prop(color, $color);
        }

        @include acl-chip-leading-icon-color($color, $query: $query);

        &:hover {
            @include acl-feature-targets($feat-color) {
                @include acl-theme-prop(color, $color);
            }
        }
    }

    .acl-chip__checkmark-path {
        @include acl-feature-targets($feat-color) {
            @include acl-theme-prop(stroke, $color);
        }
    }
}

@mixin acl-chip-selected-ink-color-ripple_($color, $query) {
    &.acl-chip {
        @include acl-states-selected(
            $color,
            $has-nested-focusable-element: true,
            $query: $query,
            $ripple-target: $acl-chip-ripple-target
        );
    }
}

@mixin acl-chip-outline(
    $width: 1px,
    $style: solid,
    $color: acl-theme-prop-value(on-surface),
    $query: acl-feature-all()
) {
    @include acl-chip-outline-width($width, $query: $query);
    @include acl-chip-outline-style($style, $query: $query);
    @include acl-chip-outline-color($color, $query: $query);
}

@mixin acl-chip-outline-color($color, $query: acl-feature-all()) {
    $feat-color: acl-feature-create-target($query, color);

    @include acl-feature-targets($feat-color) {
        @include acl-theme-prop(border-color, $color);
    }
}

@mixin acl-chip-outline-style($style, $query: acl-feature-all()) {
    $feat-structure: acl-feature-create-target($query, structure);

    @include acl-feature-targets($feat-structure) {
        border-style: $style;
    }
}

@mixin acl-chip-outline-width($width, $horizontal-padding: $acl-chip-horizontal-padding, $query: acl-feature-all()) {
    $feat-structure: acl-feature-create-target($query, structure);

    // Note: Adjust padding to maintain consistent width with non-outlined chips
    $horizontal-padding-value: max($horizontal-padding - $width, 0);

    @include acl-feature-targets($feat-structure) {
        padding-right: $horizontal-padding-value;
        padding-left: $horizontal-padding-value;
        border-width: $width;
    }

    #{$acl-chip-ripple-target} {
        @include acl-feature-targets($feat-structure) {
            top: -$width;
            left: -$width;
            border: $width solid transparent;
        }
    }
}

@mixin acl-chip-horizontal-padding($padding, $query: acl-feature-all()) {
    $feat-structure: acl-feature-create-target($query, structure);

    @include acl-feature-targets($feat-structure) {
        padding-right: $padding;
        padding-left: $padding;
    }
}

@mixin acl-chip-height($height, $query: acl-feature-all()) {
    $feat-structure: acl-feature-create-target($query, structure);

    @include acl-feature-targets($feat-structure) {
        height: $height;
    }
}

@mixin acl-chip-set-spacing($gap-size, $query: acl-feature-all()) {
    $feat-structure: acl-feature-create-target($query, structure);

    @include acl-feature-targets($feat-structure) {
        padding: $gap-size / 2;
    }

    .acl-chip {
        @include acl-feature-targets($feat-structure) {
            margin: $gap-size / 2;
        }
    }

    .acl-chip--touch {
        @include acl-touch-target-component($component-height: $acl-chip-height, $query: $query);
    }
}

@mixin acl-chip-leading-icon-color($color, $opacity: $acl-chip-icon-opacity, $query: acl-feature-all()) {
    $feat-color: acl-feature-create-target($query, color);

    .acl-chip__icon--leading {
        @include acl-feature-targets($feat-color) {
            color: rgba(acl-theme-prop-value($color), $opacity);
        }
    }
}

@mixin acl-chip-trailing-icon-color(
    $color,
    $opacity: $acl-chip-icon-opacity,
    $hover-opacity: $acl-chip-trailing-icon-hover-opacity,
    $focus-opacity: $acl-chip-trailing-icon-focus-opacity,
    $query: acl-feature-all()
) {
    $feat-color: acl-feature-create-target($query, color);

    .acl-chip__icon--trailing {
        @include acl-feature-targets($feat-color) {
            color: rgba(acl-theme-prop-value($color), $opacity);
        }

        &:hover {
            @include acl-feature-targets($feat-color) {
                color: rgba(acl-theme-prop-value($color), $hover-opacity);
            }
        }

        &:focus {
            @include acl-feature-targets($feat-color) {
                color: rgba(acl-theme-prop-value($color), $focus-opacity);
            }
        }
    }
}

// For customizing icon size, we need to increase specifity to ensure
// overrides apply. Styles defined in the .material-icons CSS class are
// loaded separately, so the order of CSS definitions is not guaranteed.

@mixin acl-chip-leading-icon-size($size, $query: acl-feature-all()) {
    .acl-chip__icon.acl-chip__icon--leading:not(.acl-chip__icon--leading-hidden) {
        @include acl-chip-icon-size_($size, $query: $query);
    }
}

@mixin acl-chip-trailing-icon-size($size, $query: acl-feature-all()) {
    .acl-chip__icon.acl-chip__icon--trailing {
        @include acl-chip-icon-size_($size, $query: $query);
    }
}

@mixin acl-chip-icon-size_($size, $query) {
    $feat-structure: acl-feature-create-target($query, structure);

    @include acl-feature-targets($feat-structure) {
        width: $size;
        height: $size;
        font-size: $size;
    }
}

@mixin acl-chip-leading-icon-margin(
    $left-margin: $acl-chip-leading-icon-margin-left,
    $right-margin: $acl-chip-leading-icon-margin-right,
    $query: acl-feature-all()
) {
    $feat-structure: acl-feature-create-target($query, structure);

    &.acl-chip--selected .acl-chip__checkmark,
    .acl-chip__icon--leading:not(.acl-chip__icon--leading-hidden) {
        @include acl-feature-targets($feat-structure) {
            //@include acl-rtl-reflexive-property(margin, $left-margin, $right-margin);
        }
    }
}

@mixin acl-chip-trailing-icon-margin(
    $left-margin: $acl-chip-trailing-icon-margin-left,
    $right-margin: $acl-chip-trailing-icon-margin-right,
    $query: acl-feature-all()
) {
    $feat-structure: acl-feature-create-target($query, structure);

    .acl-chip__icon--trailing {
        @include acl-feature-targets($feat-structure) {
            @include acl-rtl-reflexive-property(margin, $left-margin, $right-margin);
        }
    }
}

@mixin acl-chip-elevation-transition($query: acl-feature-all()) {
    $feat-animation: acl-feature-create-target($query, animation);

    @include acl-feature-targets($feat-animation) {
        transition: acl-elevation-transition-value();
    }

    &.acl-chip--exit {
        @include acl-feature-targets($feat-animation) {
            transition: acl-elevation-transition-value(), $acl-chip-exit-transition;
        }
    }
}

///
/// Sets the density scale for chips.
///
/// @param {Number | String} $density-scale - Density scale value for component.
///     Supported density scale values are `-2`, `-1`, `0`.
///
@mixin acl-chip-density($density-scale, $query: acl-feature-all()) {
    $height: acl-density-prop-value(
        $density-config: $acl-chip-density-config,
        $density-scale: $density-scale,
        $property-name: height,
    );

    @include acl-chip-height($height, $query: $query);

    @if $density-scale != 0 {
        @include acl-chip-touch-target-reset_($query: $query);
    }
}

///
/// Resets touch target-related styles. This is called from the density mixin to
/// automatically remove the increased touch target, since dense components
/// don't have the same default a11y requirements.
/// @access private
///
@mixin acl-chip-touch-target-reset_($query: acl-feature-all()) {
    $feat-structure: acl-feature-create-target($query, structure);

    // Selector is necessary here to override original specificity.
    &.acl-chip--touch {
        @include acl-feature-targets($feat-structure) {
            margin-top: 0;
            margin-bottom: 0;
        }
    }

    .acl-chip__touch {
        @include acl-feature-targets($feat-structure) {
            display: none;
        }
    }
}