@import 'variables/colors-mobile';
@import 'variables/dimensions-mobile';
@import 'styles';

@mixin border-left-top-right-variant() {
    border-left-width: 0;
    border-top-width: 0;
    border-right-width: 0;
}

body {
    padding: $default-padding;
    margin: 0;
}

// Enable custom skin for system controls
.rc-touch {
    .bootstrap-rc {
        @import "styles/formSkin";
        font-size: $fontSizeBase;
        color: $baseTextColor;

        //Overrides
        .modal-header {
            border-bottom: 0px;
        }

        .modal-footer {
            border-top: 0px;
            text-align: center;
        }

        .btn {
            border-radius: $defaultButtonBorderRadius;

            &.btn-block {
                border-radius: $blockButtonBorderRadius;
                max-width: $blockButtonMaxWidth;
                font-size: $blockButtonFontSize;
                height: $blockButtonHeight;
            }
        }

        .form-control {
            font-size: $textInputFontSize;
            padding-left: 0;
            padding-right: 0;
            @include border-left-top-right-variant;

            &:focus {
                @include border-left-top-right-variant;
                @include box-shadow(none);
            }
        }
        
        .has-error {
            .form-control {
                @include border-left-top-right-variant;
                @include box-shadow(none);

                &:focus {
                    @include border-left-top-right-variant;
                    @include box-shadow(none)
                }
            }
        }

        .checkbox input[type="checkbox"],
        .checkbox-inline input[type="checkbox"] {
            position: static;
            margin-top: 0;
            margin-right: 5px;
            vertical-align: middle;
        }

        .checkbox label > span {
            vertical-align: middle;
        }

        .caret {
            color: $customCaretColor;
            border-top: 4px solid; // caret disappears on iOS
        }

        // Group of country dropdown and phone number input field on login page
        .rc-dropdown-input-group {
            border-bottom: 1px solid $input-border;
            
            input.form-control {
                border-color: transparent;
                padding-left: 10px;

                &:focus,
                &.focus {
                    border-color: transparent;
                }
            }

            .dropdown-toggle {
                border: none;
                border-radius: 0;
                margin-right: 0;
            }

            &.focus {
                border-bottom: 1px solid $input-border-focus;
            }
            
            .input-group-btn {
                &:after {
                    content: '';
                    position: absolute;
                    top: 23%;
                    right: 1px;
                    bottom: 23%;
                    width: 1px;
                    border-right: 1px solid $input-border;
                }
                
                .btn {
                    padding-left: 0;
                    padding-right: 10px;
                    margin-right: -2px; // workaround for https://bugs.chromium.org/p/chromium/issues/detail?id=534750
                }
            }
        }
        
        .circle-img-button {
            border-color: $roundButtonBorderColor;
            width: 73px;
            height: 73px;
            border-radius: 50%;
            
            .rc-icon {
                font-size: 28px;
                margin-right: 0;
            }
        }

        .separator-line {
            &:before {
                border-top: 1px solid $panel-default-border;
            }
        }
        
        .rc-login-i-btn {
            @include border-left-top-right-variant;
        }
        
        .input-group.focus .rc-login-i-btn {
            border-bottom: 1px solid $input-border-focus;
        }
        
        .has-error {
            .rc-dropdown-input-group {
                border-bottom: 1px solid $state-danger-text;
            }
            
            .input-group .rc-login-i-btn {
                border-bottom: 1px solid $state-danger-text;
                background-color: transparent;
            }
        }

        .important-description {
            color: $importantDescriptionColor;
        }

        .help-description {
            color: $helpDescriptionColor;
        }

        .form-group:not(.has-error) .control-label {
            color: $darkGrayColor;
            font-weight: normal;
        }        
    }
}
