@use "variables" as *;

:host {
    &.dot-category-field__container--has-categories .dot-category-field__select {
        border-radius: 0 0 $border-radius-md $border-radius-md;
    }

    &.dot-category-field__container--has-categories .dot-category-field__categories {
        border-bottom: none;
        padding: $spacing-1;
    }

    &.dot-category-field__container--disabled {
        .dot-category-field__categories,
        .dot-category-field__select {
            border-color: $color-palette-gray-200;
            background: $color-palette-gray-100;
            color: $color-palette-gray-500;
        }
    }
}

.dot-category-field__categories,
.dot-category-field__select {
    border: $field-border-size solid $color-palette-gray-400;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.dot-category-field__categories {
    gap: $spacing-1;
    border-radius: $border-radius-md $border-radius-md 0 0;

    &--disabled {
        border-color: $color-palette-gray-200;
        background: $color-palette-gray-100;
        color: $color-palette-gray-500;
    }
}

.dot-category-field__select {
    height: $field-height-md;
    border-radius: $border-radius-md;
    padding: 0 $spacing-0;
    justify-content: flex-end;
}

// Disabled chips styling
:host ::ng-deep {
    .p-chip-disabled {
        background-color: $color-palette-gray-200 !important;
        color: $color-palette-gray-500 !important;

        .p-chip-remove-icon {
            color: $color-palette-gray-500 !important;
        }
    }
}
