@import 'base';

html {
    overflow: hidden;
}
body {
    background-color: #f7f6f8;

    -webkit-font-smoothing: antialiased;
}
#feed {
    ::-webkit-scrollbar {
        width: 8px;
    }
    ::-webkit-scrollbar-track {
        background-color: @dark-white;
    }
    ::-webkit-scrollbar-thumb {
        background-color: @light-gray;
        margin-top: 4px;
        margin-bottom: 4px;
    }

    .logo-container {
        height: inherit;
        text-align: center;
        line-height: inherit;
        .logo {
            text-align: center;
            font-size: 26px;
            font-weight: 700;
            color: @white;
            letter-spacing: 0.01em;
        }
    }
    .scroll-col {
        overflow-y: auto;

    }
    .btn{
        background-color:@dark-blue;
        &:hover {
            background-color: lighten(@dark-blue, 10%);
        }
    }
    .btn-secondary {
        background-color: rgba(0,0,0,0);
        border: 1px solid @blue;
        color: @blue;
        box-shadow: none;
        line-height: 34px;
        font-weight: 600;
        &:hover {
            box-shadow: none;
            background-color: rgba(0,0,0,0);
            border: 1px solid @dark-blue;
            color: @dark-blue;
        }
    }

    .waves-effect.waves-cw-blue .waves-ripple {
      background-color: fade(@blue, 50%);
    }

    .placeholder {
        background-color: @light-purple;
        text-align: center;
        width: 100%;
        height: 100%;
        i {
            color: white;
            font-size: 2em;
            transform: translateY(+200%);
        }
    }

    .feed-nav {
        background-color: @white;
        height: 48px;
        line-height: 48px;
        .nav-wrapper {
            .row {
                height: inherit;
                .nav-item {
                    height: inherit;
                    padding-left: 0;
                    padding-right: 0;
                    &.nav-categories {
                        padding-left: 16px;
                        padding-right: 16px;
                    }

                }
            }

            #user-categories-list {
                .category-item {
                    height: 48px;
                    line-height: 48px;
                    color: @light-gray;
                    font-size: 14px;
                    i {
                        line-height: inherit;
                        font-size: 1.5em;
                    }
                    &:hover {
                        color: @light-purple;
                    }
                    &.active {
                        color: @light-purple;
                    }
                }
                .dropdown-wrapper {
                    .dropdown-content {
                        li {
                            min-height: 0;
                            &:hover {
                                background-color: white;
                            }
                        }
                        .user-categories {
                            .category-item {
                                color: @gray;
                                height: inherit;
                                line-height: 14px;
                                padding-top: 8px;
                                padding-bottom: 8px;
                                margin: 0;
                                &:hover {
                                    color: @light-purple;
                                    background-color: white;
                                }
                                &.active {
                                    color: @light-purple;
                                    font-weight: 600;
                                }
                            }
                        }
                    }
                }
            }



            .category-button {
                height: 30px;
                padding-right: 8px;
                .btn{
                    font-size: 12px;
                    padding: 0 4px;
                    i{
                        margin-left: 0px;
                        margin-right: 2px;
                        line-height: inherit;
                        font-size: 1.7em;

                    }
                }
            }
        }
    }
    .content {
        .col {
            padding-top: 8px;
        }
    }
    .issue-item {
        box-shadow: 0 1px 0px 1px rgba(0, 0, 0, 0.02);
        background-color: @white;
        border: 1px solid @barely-not-white;
        border-radius: 8px;

        .thread-image.col{
            padding: 0;
            .thread-image-wrapper {
                height: 160px;
                width: 100%;
                border-radius: 8px;
                overflow: hidden;
                border: 5px solid @white;
                box-shadow: 0 1px 1px 0px rgba(0, 0, 0, 0.02);
                .thread-image-thumb {
                    width: 100%;
                }
            }

        }
        .content {
            padding-top: 5px;
            padding-bottom: 5px;
            .thread-category {
                font-size: 14px;
                color: @gray;
            }
            .thread-title {
                font-weight: 700;
                font-size: 16px;
                color: @black;
            }
            .thread-summary {
                font-size: 12px;
                color: @gray;
            }

            .issue-stats {
                padding-top: 8px;
                display: inline-block;

                .stat {
                    text-align: center;
                    display: inline-block;
                    margin-left: 10px;
                    margin-right: 10px;
                    .number {
                        font-size: 16px;
                        line-height: 16px;
                        font-weight: 700;
                        color: @purple;
                    }
                    .description {
                        font-size: 12px;
                        font-weight: 700;
                        color: #dddddd;
                    }
                }
                .vert-divider {
                    display: inline-block;
                    height: 30px;
                    width: 1px;
                    background-color: #dddddd;
                }
            }
        }

    }

    .no-state {
        background-color: @white;
        border: 2px @lightish-gray;
        border-radius: 2px;
        .text {
            color: @light-gray;
        }
    }

    .new-thread-wrapper{
        height: 150px;
        width: 150px;
        background-color: fade(@blue, 20%);
        border-radius: 50%;
        .prompt {
            padding-top: 16px;
            padding-bottom: 8px;
            font-size: 18px;
            font-weight: 400;
            line-height: 16px;
            color: @gray;
        }
        .btn {
            font-size: 14px;
            padding-left: 16px;
            padding-right: 16px;
            i {
                font-size: 1em;
                margin-right: 4px;
            }
        }
    }
    .issue-list {
        .list-title {
            font-size: 14px;
            font-weight: 400;
            text-align: left;
            line-height: 16px;
            color: @gray;
            padding-top: 8px;
            padding-bottom: 8px;
            i {
                vertical-align: text-top;
                margin-right: 4px;
            }
        }
        .list{
            padding-top: 8px;
            line-height: 14px;

            .list-item {
                margin-bottom: 10px;
                .list-text {
                    font-size: 12px;
                    font-weight: 600;
                    color: @purple;
                    &:hover {
                        color: lighten(@purple, 20%);
                    }
                }
            }
        }
    }
    .sort-options {
        color: @light-gray;
        .active {
            color: @purple;
        }
    }
    .new-thread-modal-holder {

        .modal-content {
            padding: 16px;

            .new-thread-container {
                margin-bottom: 30px;

                .new-thread-title {
                    margin-bottom: 6px;
                }

                .new-thread-header {
                    margin-bottom: 4px;
                }

            }

            .left-input-field input, .left-input-field label {
                left: 0;
            }

            .dropdown-content li > a, .dropdown-content li > span {
                color: @purple !important;
            }

        }

        .modal-footer {
            .btn {
                background-color: @purple;
                margin-right: 6px;
            }
        }
    }
    .categories-modal-holder {
        .title {
            font-size: 16px;
            font-weight: 600;
            padding: 16px;
        }
        .user-category-form {
            .category-checkbox {

            }
        }
        .modal-footer {
            button {
                margin-right: 6px;
            }
        }

    }

}
