// styles for ng-select child are in styles.scss
.paperless-input-select.disabled {
    .input-group,
    div > div {
        cursor: not-allowed;
    }

    ::ng-deep ng-select {
        pointer-events: none;

        .ng-select-container {
            background-color: var(--pngx-bg-disabled) !important;
        }
    }
}

::ng-deep .private .ng-value-container {
    font-style: italic;
    opacity: .75;
}

::ng-deep .is-invalid ng-select .ng-select-container input {
    // replicate bootstrap
    padding-right: calc(1.5em + 0.75rem) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right calc(0.375em + 0.1875rem) center !important;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
}

.input-group .ng-select-taggable:first-child:nth-last-child(2) {
    max-width: calc(100% - 45px); // fudge factor for (1x) ng-select button width
}

.input-group .ng-select-taggable:first-child:nth-last-child(3) {
    max-width: calc(100% - 90px); // fudge factor for (2x) ng-select button width
}
