@import 'commons';
$m-phonefiled--width-flag-dropdown: 74px;

.m-phonefield {
    display: inline-flex;
    flex-direction: column;

    @include m-input-inline-spacing();

    &.m--has-validation-message {
        .m-phonefield__validation {
            margin-top: $m-space-2xs;
        }
    }

    &__wrapper {
        display: grid;
        grid-template-columns: auto 1fr;
    }

    &__country {
        flex-direction: row;
        margin-right: -1px; // Magic Number

        /deep/ .m-base-select__popup {
            width: auto !important;
        }

        /deep/ .m-input-style__label {
            visibility: hidden;
        }

        /deep/ .m-input-style__main {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-right-color: transparent !important;
        }
    }

    &__flag-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        margin-right: $m-space-xs;
    }

    &__item-wrapper {
        display: flex;
        align-items: center;
        position: relative;
    }

    &__item-country-list {
        &.m--is-last-priority-iso-countrie {
            position: relative;

            &::after {
                content: '';
                position: absolute;
                right: $m-space-xs;
                bottom: -1px;
                left: $m-space-xs;
                height: 2px;
                background: $m-color-grey-lighter;
            }
        }
    }

    &__item-flag-wrapper {
        width: 27px;
        height: 20px;
        margin-right: $m-space-xs;
    }

    &__item-dialCode {
        margin-left: $m-space-xs;
        color: $m-color-grey;
        white-space: nowrap;
    }

    &__number {
        flex-shrink: 0;

        /deep/ .m-input-style__main {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        /deep/ .m-input-style__content {
            display: flex;
            align-items: center;
        }
    }

    &__validation {
        transition: margin-top $m-transition-duration ease;
        display: flex;
        justify-content: flex-end;
        margin-top: $m-space-2xs;
        margin-left: calc(#{$m-phonefiled--width-flag-dropdown} + #{$m-input-style--padding});
    }

    &__validation-message {
        flex: 1 1 auto;
    }

    &__country-field {
        outline: none;
    }

    &__hidden {
        @include m-visually-hidden();
    }
}