@import '../chip-commons';

.m-chip-add {
    @include m-chip-base-style();

    border: 1px solid $m-color-interactive;
    background: none;
    font-size: inherit;
    font-family: inherit;

    &.m--is-small {
        @include m-chip-small-style();

        font-weight: $m-font-weight-semi-bold;
        font-size: 0.75em;
    }

    &:not(.m--is-disabled) {
        @include m-button--hover();

        &:hover,
        &:focus,
        &:active {
            .m-chip-add__icon {
                color: $m-color-white;
            }
        }
    }

    &.m--is-disabled {
        border: 1px solid $m-color-disabled;

        &,
        .m-chip-add__icon {
            color: $m-color-disabled;
        }
    }

    &__body {
        @include m-chip-body-style();
    }

    &__icon {
        transition: color $m-transition-duration ease;
        margin-left: $m-space-xs;
        color: $m-color-interactive;
        stroke-width: 2;
    }

    &__hidden-text {
        @include m-visually-hidden();
    }
}