@use '~@/style/globals';

.AssignTags {
    display: flex;
    flex-direction: column;

    .AssignTagsHeader,
    &__actions {
        flex: 0 0 auto;
    }

    &__content {
        flex: 1;
        min-height: 150px;
        padding: 0.7rem 1rem 0;

        .vs__dropdown-menu {
            max-height: 150px;
        }
    }

    &__help {
        color: globals.$text-light-color;
    }

    &__form {
        display: flex;
        align-items: center;

        // stylelint-disable-next-line selector-class-pattern
        .v-select {
            flex: 1;
            margin-right: 1rem;
        }

        &__remove-all {
            flex: 0 0 auto;
            height: 3rem;
        }
    }

    &__actions {
        display: flex;
        justify-content: flex-end;
        padding: 1.5rem 1rem;

        // stylelint-disable-next-line selector-max-type
        .fas + span {
            margin-left: 0.35rem;
        }
    }

    &__error {
        margin-right: 0.7rem;
        color: globals.$text-danger-color;
        font-weight: 800;
    }
}
