@import (reference) 'common.less';

.proxy_tester {
    flex: 1;
    select, input {
        width: 100% !important;
    }
    .title_value_pairs {
        font-size: 14px;
        .pair {
            display: flex;
            .title {
                flex: 1;
            }
            .value {
                flex: 1;
            }
        }
    }
    .har_preview {
        margin-bottom: 10px;
        border: 1px solid var(--border-har);
        min-height: 300px;
        z-index: 2000;
    }
    .panel {
        &.request {
            .request_params {
                display: flex;
                margin-bottom: 10px;
            }
            .field {
                &:first-child {
                    margin-left: 0;
                }
                &:last-child {
                    margin-right: 0;
                }
                margin: 0 5px;
                .title {
                    font-size: 14px;
                    margin-bottom: 3px;
                    margin-left: 2px;
                }
                &.url {
                    flex: 1;
                }
            }
            .headers {
                .header_line {
                    display: flex;
                    align-items: center;
                    margin: 5px 0;
                    &:first-child {
                        margin-top: 0;
                    }
                    &:last-child {
                        margin-bottom: 10px;
                    }
                    button {
                        min-width: 140px;
                    }
                    .header_input {
                        margin-right: 10px;
                        flex: 1;
                    }
                    .value_input {
                        margin-right: 5px;
                        flex: 2;
                    }
                    .action_icons {
                        width: 45px;
                        .add_header {
                            margin-left: 5px;
                        }
                    }
                }
            }
            .footer_buttons {
                margin-top: 10px;
                .btn {
                    margin: 0;
                }
            }
        }
        &.body {
            .panel.code {
                font-size: 14px;
                margin-bottom: 0;
                .panel_body {
                    overflow: auto;
                    max-height: 400px;
                    padding: 5px;
                    span {
                        word-wrap: break-word;
                    }
                }
            }
        }
        &.info {
            .title_value_pairs .pair .value {
                text-align: right;
            }
        }
        &.response {
            .title_value_pairs .pair {
                .key {
                    min-width: 160px;
                }
                .value {
                    word-break: break-all;
                }
            }
        }
    }
}