@import '_colors.scss';
@import '_transition.scss';
@import '_editor_highlight.scss';

.toast {
    border-radius: 0px;
}

.fixed {
    position: fixed;
    top:0;
    z-index:9999;
}

body {
    font-size: 16px;
}

// headers
header {
    background: $bg-primary;
    height: 60px;

    .container {
        text-align: center;
        #logo {
            position: relative;
            display: inline-block;
            margin-top:15px;
            padding-left: 10px;
            color: #fff;
            @include transition(color, 0.3s);
            img {
                position: absolute;
                top: 3px;
                left: -30px;
                width:30px;
                height:30px;
            }
            &:hover {
                color: $text-secondary;
                text-decoration: none;
            }
        }
    }
}

.btn.icon-and-text .ion {
    margin-right: 8px;
}

#body {
    margin-top: 20px;
}

#resource_list {
    .resource {
        margin-top: 20px;
        .resource_head {
            h4 {
                margin: 0px;
                display: inline-block;
                font-size: 20px;
            }
            span {
                display: inline-block;
                color: $text-primary;
                margin-left: 5px;
            }
            .btn {
                border: none;
                padding: 0 10px;
            }
            a.btn {
                padding: 7px 10px 0 10px;
            }
        }
        .divider {
            margin: 0;
        }
        .create_resource_head {
            margin: 0 0 10px 0;
            .new-resource-input,
            .new-url-input {
                border-color: #fff;
                &:hover {
                    border-color: $text-primary;
                }
            }
            .new-resource-input {
                font-size: 20px;
            }
            .new-url-input {
                margin-left: 5px;
                color: $text-primary;
            }
            .btn {
                margin-left: 10px;
            }
        }
        /* product list */
        .action_list .card {
            margin-top: 10px;
            color: $default-text-color;
            @include transition(border-color 0.3s);

            .card-title {
                @include transition(color 0.3s);
            }
            .card-header {
                .card-subtitle {
                    color: lighten($default-text-color, 25);
                    font-size: 12px;
                }
            }
            &:hover {
                text-decoration: none;
                border-color: $text-primary;
                .card-title {
                    color: $text-primary;
                }
            }
            &.create-new-card {
                background: $bg-gray;
                height: 126px;
                .card-header {
                    @include transition(color, 0.3s);
                    text-align: center;
                    color: lighten($default-text-color, 30);
                     .ion {
                        margin-top: 6px;
                        font-size: 50px;
                    }
                    h4 {
                        margin-top: 5px;
                        font-weight: 400;
                    }
                }
                &:hover {
                    border-color: lighten($default-text-color, 20);
                    .card-header {
                        color: lighten($default-text-color, 20);
                    }
                }
            }
        }
    }
}

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;
                }
            }
        }
    }
}

#action-edit-form {
    .title-input {
        font-size: 20px;
    }

    .url-input {
        color: $text-primary;
    }

    .select-box {
        margin:0px;
        .form-group-gap {
            margin-left: 10px;
        }
    }

    .type-response-area {
        margin-top: 20px;
        &.has-error {
            #response {
                border-color: #e85600;
            }
        }
        .response-label {
            display:block;
            padding: 5px 0;
        }
        #response {
            border: 1px solid #caced7;
        }
    }
}

#action-view {
    .breadcrumb-item a {
        color: $text-primary;
        text-decoration: underline;
    }
    .detail {
        .detail-header {
            margin-top: 10px;
            h3 {
                display: inline-block;
                margin: 0px;
                font-size: 20px;
            }
            .url {
                color: $text-primary;
            }
            .btn {
                position: relative;
                top: -1px;
                padding: 5px 8px;
                height: 30px;
                border: none;
                float:right;
            }
        }
        .detail-chips {
            margin-top: 10px;
        } 
    }
    .response-area {
        margin-top: 30px;

        pre {
            margin: 5px 0 0 0;
            code {
                color: $default-text-color;
                background: none;
            }
        }
    }
    .tools {
        .btn {
            &.btn-danger {
                border-color: lighten($text-primary, 30);
                color: lighten($text-primary, 10);
            }
        }
    }
}

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