@import '../chip-commons';

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

    display: inline-block;
    border: 1px solid $m-color-grey;
    background: $m-color-grey-lighter;

    &:not(.m--is-disabled) {

        &.m--is-hover,
        &.m--is-focused {
            color: $m-color-white;
            background: $m-color-interactive-light;
            border-color: $m-color-interactive-light;

            .m-chip-delete__icon {
                color: $m-color-white;
            }

        }

        .m-chip-delete__button {
            cursor: pointer;
        }
    }

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

        border-color: $m-color-grey-light;
        background: $m-color-grey-lighter;
        font-size: 0.75em;
        font-weight: $m-font-weight-semi-bold;

        .m-chip-delete__button {
            $m-chip-delete--button-width: 20px;

            width: $m-chip-delete--button-width;
            height: $m-chip-delete--button-width;
            margin: 0;
        }

        .m-chip-delete__icon {
            $m-chip-delete--icon-width: 20px;

            width: $m-chip-delete--icon-width;
            height: $m-chip-delete--icon-width;
            left: 0;
            top: 0;
            padding: 5px; // Magic number: perfect icon size
            transform: none;
        }
    }

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

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

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

    &__button {
        $m-chip-delete--button-width: 12px;

        transition: color $m-transition-duration ease;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: $m-chip-delete--button-width;
        height: $m-chip-delete--button-width;
        padding: 0;
        margin: 0 $m-space-2xs;
        appearance: none;
        border: none;
        font-size: inherit;
        font-family: inherit;
        color: $m-color-interactive;
        background: none;
        outline: none;
    }

    &__icon {
        $m-chip-delete--icon-width: 32px;

        position: absolute;
        top: 50%;
        left: 50%;
        padding: 10px 0 10px 10px; // Magic number: perfect icon size
        width: $m-chip-delete--icon-width;
        height: $m-chip-delete--icon-width;
        transform: translate(-50%, -50%);
        stroke-width: 3;
        transition: color $m-transition-duration ease;
    }

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