@import '../shared-styles/index';

:host {
    display: block;
    width: 100%;
}

.nx-phone-input___wrapper {
    display: flex;
    height: 100%;
    align-items: center;
}

.hide {
    display: none;
    visibility: hidden;
}

input {
    flex: 1;
}

.readonly-input {
    margin-left: 7px;
}

nx-dropdown {
    width: auto;
    margin-right: 8px;

    &.cdk-keyboard-focused {
        @include focus-style();
        border-radius: 4px;
    }

    // Overrides of input and dropdown necessary
    // the formfield brings some styles assuming that dropdown and input are used
    // standalone, so e.g. both have a padding left and right of 7px to bring some space
    // to the formfield container. for the phone input we need to override these things
    ::ng-deep {
        .nx-dropdown__container {
            padding-right: 0;
        }

        .nx-dropdown__icon {
            margin-left: 8px;
        }

        .nx-dropdown__rendered {
            font-size: 1rem;
            line-height: 1.5rem;
        }
    }
}

:host-context(.nx-formfield.has-outline) {
    nx-dropdown {
        margin-left: 7px;
    }

    input {
        padding-left: 0;
    }

    ::ng-deep {
        .nx-dropdown__container {
            padding: 0;
        }
    }
}

:host-context(.is-disabled) {
    input {
        cursor: not-allowed;
    }
}

input {
    text-align: inherit;
    font-size: inherit;
    font-weight: inherit;
    background: 0 0;
    color: inherit;
    border: none;
    outline: 0;
    padding: 0;
    margin: 0;
}

:host-context([dir='rtl']) {
    nx-dropdown {
        margin-right: 0;
        margin-left: 8px;

        ::ng-deep {
            .nx-dropdown__icon {
                margin-right: 8px;
                margin-left: 0;
            }
        }
    }

    &:host-context(.nx-formfield.has-outline) {
        nx-dropdown {
            margin-right: 7px;
            margin-left: 8px;
        }

        input {
            padding-left: 7px;
            padding-right: 0;
        }
    }
}
