@use "variables" as *;
@import "common";

.p-inputgroup-addon {
    height: $field-height-md;
    background: $white;
    color: $black;
    padding: $spacing-2 $spacing-2;
    border: none;
    border-right: $field-border-size solid $color-palette-gray-400;
    min-width: 2.357rem;
    z-index: 1;

    &:last-child {
        border-right: none;
    }
}

p-inputgroup > .p-inputgroup {
    border: $field-border-size solid $color-palette-gray-400;
    border-radius: $border-radius-md;
    overflow: hidden;

    .p-inputtext.p-element {
        border: none;

        &:has(+ .p-inputgroup-addon) {
            border-right: $field-border-size solid $color-palette-gray-400;
            border-radius: 0;

            &:hover {
                border-color: $color-palette-gray-400;
            }

            &:focus {
                border-color: $color-palette-gray-400;
            }
        }
    }

    @extend #form-field-states;

    .p-inputgroup-addon:first-child,
    .p-component:first-child {
        border-top-left-radius: $border-radius-md;
        border-bottom-left-radius: $border-radius-md;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .p-inputgroup-addon:last-child,
    .p-component:last-child {
        border-top-right-radius: $border-radius-md;
        border-bottom-right-radius: $border-radius-md;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .p-chip.p-component:last-child {
        border-top-left-radius: $border-radius-sm;
        border-bottom-left-radius: $border-radius-sm;
    }
}
