/**
 * The dialog content element.
 */
.dial-out-content {
    margin-top: 5px;

    /**
     * Wrap the contents in flex so items can be aligned on the same line.
     */
    .form-control {
        display: flex;
    }

   /**
    * The style of the flag icon.
    */
    .dial-out-flag-icon {
        position: absolute;
        left: 5px;
        top: 50%;
        transform: translate(0, -50%);
    }

    /**
     * The style of the dial code element.
     */
    .dial-out-code {
        margin-bottom: 0;
        padding-left: 25px;
    }

    /**
     * The dial-out dialog error element.
     */
    .dial-out-error {
        color: $errorColor;
    }

    /**
     * The style of the dial input element.
     */
    .dial-out-input {
        display: inline-block;
        flex: 1;
        margin-left: 5px;
    }

    /**
     * Re-styling the default dropdown inside the dial-out-content.
     */
    .dropdown {
        position: relative;
        width: 65px;
    }

    /**
     * Re-styling the default form-control inside the dial-out-content.
     */
    .form-control {
        margin-bottom: 8px;
    }

    .dropdown {
        position: relative;

        input {
            padding-left: 16px;

            &:read-only {
                color: inherit;
            }
        }
    }

    .dropdown-trigger-icon {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(0, -50%);
    }
}