$main-color: #337AF6;
$background-color: #F3F5F8;
$header-color: $main-color;
$default-text-color: #4D5561;

$label-green-bg: #DBF1DD;
$label-green: #5D985D;

$label-yellow-bg: #F0F1DB;
$label-yellow: #98985D; 

$label-blue-bg: #DBE8F1;
$label-blue: #5D7E98;

$label-red-bg: #F1DBDB;
$label-red: #985D5D;

body {
    font-size: 16px;
    background: $background-color;
    color: $default-text-color;
}

// headers
header {
    background: $header-color;
    height: 60px;
    box-shadow: 0 2px 4px #EDEFF2;

    .container {
        text-align: center;
        #logo {
            margin-top:10px;
            width:40px;
            height:40px;
        }
    }
}

#body {
    .tools {
        margin-top: 30px;
        .btn {
            display: inline-block;
            padding: 7px 10px;
            border-radius: 3px;
            font-size:14px;
            margin-left: 10px;

            i {
                margin-right: 4px;
            }
            &.btn-light {
                box-shadow: 0 1px 8px #D9DDE2;
            }
            &.btn-danger {
                box-shadow: 0 1px 8px #dc3545;
            }
        }

        #new-button {
            display: inline-block;
            // background: $main-color;
            padding: 7px 10px;
            box-shadow: 0 1px 8px #2D6BD7;
            border-radius: 3px;
            color: white;
            font-size:14px;
            border:none;

            img {
                position:relative;
                top:-1px;
                width: 10px;
                height: 10px;
                margin-right:4px;
            }
        }

        #total-responses {
            padding-top: 10px;
            font-size: 12px;
            color: #A6A9AE;
        }
    }
    .responses {
        margin-top: 30px;

        .response-item {
            display:block;
            background: #fff;
            box-shadow: 0 1px 5px #E0E2EA;
            color: $default-text-color;
            padding:7px;

            &:hover {
                text-decoration: none;
                background: #F6F7F8;
            }
            @media (min-width: 768px) {
                margin-bottom: 30px;
            }
            .response-header {
                padding-left: 8px;
                h4 {
                    display: inline-block;
                    font-size: 14px;
                    font-weight: 500;
                    margin:0;
                    padding:0;
                }
            }
            div.url {
                padding-left: 8px;
                color: $main-color;
                font-size: 14px;
            }
        }
    }

    #when-no-data {
        height: 400px;
        text-align: center;
        #guide-image {
            position: absolute;
            right: -10px;
            top: -25px;
            width: 269px;
            height: 106px;
        }
        #no-data-image {
            margin-top:130px;
            width: 384px;
            height: 248px;
        }
    }
}

footer {
    .container {
        padding: 10px 0 60px 0;
        text-align: center;
        font-size: 12px;
        #whoiam {
            color: lighten($default-text-color, 40);
            a {
                color: lighten($default-text-color, 40);
                img {
                    width: 20px;
                    height: 16px;
                }
            }
        }
    }
}

#create-action-form {
    padding-top:20px;
    button {
        cursor: pointer;
    }
    .form-label {
        color: lighten($default-text-color, 30);
        font-weight: 400;
    }
    input[type=text].form-control {
        border: none;
        border-bottom: 1px solid lighten($default-text-color, 50);
        border-radius: 0;
    }
}

#view-action-dialog {
    margin-top:8px;
    padding: 0 15px;
    .view-header {
        span.method-label {
            font-size: 14px;
            padding: 3px 8px;
            height: 30px;
        }
    }
    .view-name {
        margin-top:12px;
        h4 {
            display:inline-block;
            font-size: 20px;
            color: $default-text-color;
        }
        span.url {
            font-size: 14px;
            color: lighten($default-text-color, 20);
            margin-left: 10px;
        }
        .btn {
            display: inline-block;
            margin-left: 10px;
            margin-top: -1px;
            font-size: 12px;
            height: 30px;
            &:focus {
                box-shadow:none;
            }
            i {
                margin-right: 7px;
            }
        }
    }
    .view-body {
        margin-top: 20px;
        span.content-type {
            display:inline-block;
            padding: 2px 10px 3px 10px;
            background: #ECEEF1;
            color: #878E95;
            font-size: 14px;
        }
    }
    .content {
        pre {
            width: 100%;
            background: #f8f8f8;
            margin: 0px;
        }
    }
    .alert-info {
        font-size: 14px;
        padding: 5px 10px;
    }
}

/* components */
.btn {
    cursor: pointer;
}

.method-label {
    display: inline-block;
    font-size: 11px;
    padding: 2px 5px;
    margin:0;
    border-radius: 3px;
    text-align: center;

    &.method-label-get {
        color: $label-green;
        background: $label-green-bg;
    }

    &.method-label-post {
        color: $label-yellow;
        background: $label-yellow-bg;
    }

    &.method-label-put {
        color: $label-blue;
        background: $label-blue-bg;
    }

    &.method-label-delete {
        color: $label-red;
        background: $label-red-bg;
    }
}

.select2-container {
    display: block;
    &.select2-container--focus .select2-selection--single {
        background: #F3F5F8;
        outline: none;
    }
    .select2-selection--single {
        padding: 3px 5px 3px 5px;
        border-radius: 0px;
        border: none;
        height: auto;
        &:hover {
            background: #F3F5F8;
        }
        .select2-selection__rendered {
            color: lighten($default-text-color, 20);
        }
        .select2-selection__arrow {
            top: 5px;
            right: 6px;
        }
    }
    .select2-dropdown {
        border: 1px solid lighten($default-text-color, 50);
        box-shadow: 0 1px 5px #E0E2EA;
        .select2-results__option--highlighted[aria-selected] {
            color: lighten($default-text-color, 30);
            background: #E2E8F2;
        }
        .select2-results__option[aria-selected=true] {
            background: #F3F5F8;
            &:hover {
                color: $default-text-color;
            }
        }
    }
}

.ngdialog.ngdialog-theme-default .ngdialog-content {
    background: #fff;
}