Daniel@0: @import "../../config.less";
Daniel@0: 
Daniel@0: .vic-api-debug {
Daniel@0:     padding-top: 5px;
Daniel@0:     
Daniel@0:     @alignment-offset: 6px;
Daniel@0:     @background-color: #fff;
Daniel@0:     //@background-color_query-uri: #f8f8f8;
Daniel@0:     @background-color_query-uri: #fff;
Daniel@0:     @border: 1px solid @config-grid--color_panel-background;
Daniel@0:     @request-uri-hight: 20px;
Daniel@0:     
Daniel@0:     @color_errors: #f00;
Daniel@0: 
Daniel@0:     @input-padding_h: 3px;
Daniel@0:     @input-padding_v: 3px;
Daniel@0:     
Daniel@0:     // ----------------------------------
Daniel@0:     
Daniel@0:     // ==================================
Daniel@0:     &__query-box {
Daniel@0:         .position_absolute_everywhere();
Daniel@0:         .border-bottom-left-radius(@--border-radius);
Daniel@0:         .border-bottom-right-radius(@--border-radius);
Daniel@0:         display: none;
Daniel@0:         border: @border;
Daniel@0:         border-top: none;
Daniel@0:         background: @background-color;
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ----------------------------------
Daniel@0:     &__query-box_alignment_everywhere {
Daniel@0:         display: block;
Daniel@0:     }
Daniel@0:     
Daniel@0:     &__query-box_alignment_left {
Daniel@0:         display: block;
Daniel@0:         right: 50%;
Daniel@0:         margin-right: @alignment-offset / 2;
Daniel@0:     }
Daniel@0: 
Daniel@0:     &__query-box_alignment_right {
Daniel@0:         display: block;
Daniel@0:         left: 50%;
Daniel@0:         margin-left: @alignment-offset / 2;
Daniel@0:     }
Daniel@0: 
Daniel@0:     &__query-box_alignment_top {
Daniel@0:         display: block;
Daniel@0:         bottom: 50%;
Daniel@0:         margin-bottom: @alignment-offset / 2;
Daniel@0:     }
Daniel@0: 
Daniel@0:     &__query-box_alignment_bottom {
Daniel@0:         .border-radius(@--border-radius);
Daniel@0:         border-top: @border;
Daniel@0:         display: block;
Daniel@0:         top: 50%;
Daniel@0:         margin-top: @alignment-offset / 2;
Daniel@0:     }
Daniel@0: 
Daniel@0: 
Daniel@0:     &__query-uri-wrapper {
Daniel@0:         .position_absolute_everywhere();
Daniel@0:         bottom: auto;
Daniel@0:         height: @request-uri-hight - @input-padding_v * 2;
Daniel@0:         border-top:    @input-padding_v solid @background-color_query-uri;
Daniel@0:         border-right:  @input-padding_h solid @background-color_query-uri;
Daniel@0:         border-bottom: @input-padding_v solid @background-color_query-uri;
Daniel@0:         border-left:   @input-padding_h solid @background-color_query-uri;
Daniel@0:         .border-radius(@--border-radius);
Daniel@0:     }
Daniel@0:     &__query-uri {
Daniel@0:         .font_small();
Daniel@0:         .font_monospace();
Daniel@0:         font-weight: bold;
Daniel@0:         position: relative;
Daniel@0:         width: 100%;
Daniel@0:         height: 100%;
Daniel@0:         margin: 0;
Daniel@0:         border: 0;
Daniel@0:         padding: @input-padding_v @input-padding_h;
Daniel@0:         top: -@input-padding_v;
Daniel@0:         left: -@input-padding_h;
Daniel@0:         background: @background-color_query-uri;
Daniel@0:         .border-radius(@--border-radius);
Daniel@0:     }
Daniel@0: 
Daniel@0:     &__query-response-wrapper {
Daniel@0:         .position_absolute_everywhere();
Daniel@0:         top: @request-uri-hight;
Daniel@0:         border-top:    @input-padding_v solid @background-color;
Daniel@0:         border-right:  @input-padding_h solid @background-color;
Daniel@0:         border-bottom: @input-padding_v solid @background-color;
Daniel@0:         border-left:   @input-padding_h solid @background-color;
Daniel@0:         .border-radius(@--border-radius);
Daniel@0:     }
Daniel@0:     
Daniel@0:     
Daniel@0:     &__query-response {
Daniel@0:         .font_small();
Daniel@0:         .font_monospace();
Daniel@0:         position: relative;
Daniel@0:         width: 100%;
Daniel@0:         height: 100%;
Daniel@0:         margin: 0;
Daniel@0:         border: 0;
Daniel@0:         background: none;
Daniel@0:         resize: none;
Daniel@0:         top: -@input-padding_v;
Daniel@0:         left: -@input-padding_h;
Daniel@0:         padding: @input-padding_v @input-padding_h;
Daniel@0:         .border-radius(@--border-radius);
Daniel@0:     }
Daniel@0:     // ----------------------------------
Daniel@0:     &__query-box_status_has-errors &__query-response {
Daniel@0:         color: @color_errors;
Daniel@0:     }
Daniel@0: 
Daniel@0: }