.TagsInput {
    border: 1px solid $grey_200;
    border-radius: 3px;

    /* stylelint-disable declaration-no-important */
    height: auto !important;
    overflow: hidden;
    padding: 5px 5px 0 5px !important;
    transition:
        border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out;

    &-disabled {
        background-color: $grey_150;
        cursor: not-allowed;
        opacity: 1;
        pointer-events: none;
    }

    &-focused {
        border-color: rgb(97, 176, 255);
        box-shadow: rgba(0, 112, 224, 0.25) 0 0 0 0.2rem;
    }

    &-input {
        background: transparent;
        border: 0;
        font-family: inherit;
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: 5px;
        margin-top: 1px;
        max-width: inherit;
        outline: none;
        padding: 5px;
        width: auto;
    }

    &-tag {
        background-color: $blue_300;
        border: 1px solid $blue_300;
        border-radius: 3px;
        color: $white;
        display: inline-block;
        font-size: 1rem;
        margin-bottom: 5px;
        margin-right: 5px;
        padding: 2px 5px;
        user-select: none;

        /* stylelint-disable selector-no-type */
        a::before {
            content: "✕";
            padding-right: 5px;
        }
    }

    &-remove {
        cursor: pointer;
        margin-left: 7px;
        opacity: 0.8;
        transition: opacity 120ms ease;

        &:hover {
            opacity: 1;
        }
    }
}