@import "../_colors";

.p-autocomplete-chip {
    background-color: #ccc !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    color: $primary-dark-text-color !important;
    font-size: 12px !important;
    min-height: 20px;
    max-width: 200px;
    vertical-align: top !important;
    display: flex !important;
    align-items: center;
    gap: 8px !important;

    .p-chip-label {
        padding-left: 8px;
    }

    &:hover {
        background-color: #e5eaea !important;
        cursor: pointer;
    }

    .p-chip-remove-icon {
        align-self: stretch;
        display: flex;
        padding-right: 8px;
    }

    .p-autocomplete-token-icon,
    .p-chips-token-icon {
        font-size: 14px !important;
        margin-left: 10px;
    }

    .p-iconwrapper {
        height: 100%;
        display: flex;
        align-items: center;
    }

    .p-autocomplete-chip-icon {
        svg {
            width: 10px;
            height: 10px;
        }
    }
}
body .p-chip-token {
    background-color: #ccc !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    color: $primary-dark-text-color !important;
    font-size: 12px !important;
    min-height: 20px;
    max-width: 200px;
    vertical-align: top !important;
    display: flex !important;
    align-items: center;
    gap: 8px !important;

    .p-chip-label {
        padding-left: 8px;
    }

    &:hover {
        background-color: #e5eaea !important;
        cursor: pointer;
    }

    .p-chip-remove-icon {
        align-self: stretch;
        display: flex;
        padding-right: 8px;
    }

    .p-chips-token-icon,
    .p-autocomplete-token-icon {
        font-size: 14px !important;
        margin-left: 10px;
    }

    .p-iconwrapper {
        height: 100%;
        display: flex;
        align-items: center;
    }

    .p-autocomplete-chip-icon {
        svg {
            width: 10px;
            height: 10px;
        }
    }
}

.p-chips-token {
    &-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.p-chips-input-token,
.p-autocomplete-input-token {
    padding: 0 !important;

    input {
        font-size: 14px !important;
    }
}