.main-content {

$color-description: #555555;
$line-height: 1.7;

padding: {
    top: 1em;
    bottom: 1em;
    left: 2em;
    right: 2em;
}

width: 100%;
max-width: 100%;
min-width: 100%;

box-sizing: border-box;

ul,
ol {
    margin: {
        bottom: 1em;
    }
    display: table;
    word-break: break-all;

    li {
        list-style: none;
        display: table-row;
        line-height: $line-height;

        &::before {
            display: table-cell;
            text-align: right;
            word-break: keep-all;
            padding: {
                right: 0.3em;
            }
        }

        ol, ul {
            margin: {
                bottom: 0;
                left: 1em;
            }
        }
    }
}

ol {
    counter-reset: listcounter 0;

    >li {
        &::before {
            content: counter(listcounter) ".";
            counter-increment: listcounter;
        }
    }
}

ul {
    >li {
        &::before {
            content: "\2022";
            font-weight: bold;
        }
    }
}

p {
    margin: {
        bottom: 1em;
    }

    &:last-child {
        margin: {
            bottom: 0;
        }
    }
}

.yaml-name-area {
    padding: {
        top: 0.2em;
        bottom: 0.5em;
    }
    border: {
        bottom: 1px solid #dee2e6;
    }

    .yaml-description {
        margin: {
            top: 0.3em;
        }

        color: $color-description;
    }
}

code {
    color: #c7254e;
    padding: {
        top: 0.2em;
        bottom: 0.2em;
        left: 0.4em;
        right: 0.4em;
    }
    border-radius: 4px;
    background-color: #f9f2f4;
}

.apis {
    width: 100%;
    max-width: 100%;
    min-width: 100%;

    .api {
        margin: {
            top: 2em;
        }

        width: 100%;
        max-width: 100%;
        min-width: 100%;

        .api-name-area {
            display: grid;
            grid-template-columns: 1fr auto;
            grid-template-rows: 1fr 1fr;
            align-items: center;

            .api-name {
                grid-row: 1/2;
                grid-column: 1/2;
            }

            .api-method {
                grid-row: 1/2;
                grid-column: 2/3;
                padding: {
                    top: 0.3em;
                    bottom: 0.3em;
                    left: 0.5em;
                    right: 0.5em;
                }
                border-radius: 0.2em;
                color: #ffffff;
                font-family: "Ubuntu Mono", "Nanum Gothic Coding", monospace;

                &.api-method-get {
                    background-color: #3884ff;
                }

                &.api-method-post {
                    background-color: #26cb7c;
                }

                &.api-method-put {
                    background-color: #f77d05;
                }

                &.api-method-delete {
                    background-color: #ff4642;
                }

                &.api-method-patch {
                    background-color: #03d1eb;
                }

                &.api-method-head {
                    background-color: #a44eed;
                }

                &.api-method-options {
                    background-color: #ffd139;
                }
            }

            .api-url-area {
                grid-row: 2/3;
                grid-column: 1/3;
                background-color: #F5F7F9;
                margin: {
                    top: 0.2em;
                }
                padding: {
                    top: 0.8em;
                    bottom: 0.8em;
                    left: 0.8em;
                    right: 0.8em;
                }
                border-radius: 4px;
                font-family: "Ubuntu Mono", "Nanum Gothic Coding", monospace;

                .api-baseurl {
                    color: #74818D;
                }

                .api-url {
                    color: #000000;
                }
            }
        }

        .api-description {
            margin: {
                top: 0.5em;
            }

            line-height: $line-height;

            color: $color-description;
        }

        .request-response-container {
            $border: 1px solid #ddd;
            $border-radius: 4px;

            width: 100%;
            max-width: 100%;
            min-width: 100%;

            .btns {
                margin: {
                    top: 1em;
                }

                border: {
                    bottom: $border;
                }
                box-sizing: border-box;

                .btn {
                    display: inline-block;
                    margin: {
                        bottom: -1px;
                        right: 1px;
                    }
                    padding: {
                        top: 0.8em;
                        bottom: 0.8em;
                        left: 1em;
                        right: 1em;
                    }
                    box-sizing: border-box;
                    border-top-left-radius: $border-radius;
                    border-top-right-radius: $border-radius;

                    cursor: pointer;

                    &.selected {
                        border: $border;
                        border-bottom-color: #fff;
                    }
                }
            }

            .request-response {
                border: {
                    left: $border;
                    right: $border;
                    bottom: $border;
                }

                border-bottom-left-radius: $border-radius;
                border-bottom-right-radius: $border-radius;

                padding: {
                    top: 0.8em;
                    bottom: 0.8em;
                    left: 1em;
                    right: 1em;
                }

                .selected {
                    display: block;
                }

                .not-selected {
                    display: none;
                }

                .request {
                    .param-type {
                        margin: {
                            top: 1em;
                            bottom: 0.5em;
                        }

                        &:first-child {
                            margin: {
                                top: 0;
                            }
                        }
                    }

                    table {
                        width: 100%;
                        border-collapse: separate;

                        border: $border;
                        border-radius: $border-radius;

                        thead {
                            display: none;
                        }

                        tbody {
                            th, tr {
                                td {
                                    padding: {
                                        top: 0.5em;
                                        bottom: 0.5em;
                                        left: 0.5em;
                                        right: 0.5em;
                                    }

                                    &.param-name-col {
                                        width: 25%;

                                        .param-is-required {
                                            font-size: 0.8em;

                                            &.required {
                                                color: #ff4642;
                                            }

                                            &.optional {
                                                color: #555555;
                                            }
                                        }
                                    }

                                    &.param-datatype-col {
                                        width: 15%;
                                    }

                                    &.param-description-col {
                                        width: 60%;
                                        .param-description {
                                            color: $color-description;
                                            line-height: $line-height;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                .response {
                    .response-result {
                        margin: {
                            top: 1em;
                            bottom: 0.5em;
                        }

                        &:first-child {
                            margin: {
                                top: 0;
                            }
                        }
                    }
                    .response-success, .response-fail {
                        border: $border;
                        border-radius: $border-radius;

                        padding: {
                            top: 0.6em;
                            bottom: 0.6em;
                            left: 0.6em;
                            right: 0.6em;
                        }

                        .response-item {
                            margin: {
                                top: 1.2em;
                            }

                            &:first-child {
                                margin: {
                                    top: 0;
                                }
                            }

                            .response-description {
                                margin: {
                                    top: 0.5em;
                                    left: 1em;
                                    right: 1em;
                                }
                                color: $color-description;
                                line-height: $line-height;
                            }

                            .response-example {
                                margin: {
                                    top: 0.5em;
                                    left: 1em;
                                    right: 1em;
                                }

                                padding: {
                                    top: 0.5em;
                                    bottom: 0.5em;
                                    left: 0.5em;
                                    right: 0.5em;
                                }

                                border-radius: $border-radius;
                                line-height: 1.2;

                                overflow: auto;

                            }
                        }
                    }

                    .response-success .status-code::before {
                        content: "●";
                        color: #26cb7c;
                    }

                    .response-fail .status-code::before {
                        content: "●";
                        color: #ff4642;
                    }
                }
            }
        }
    }
}

}