/* note layout */
.note-contents{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -12px;
    @include ssm{
        display: block;
    }
    .note-sibebar-wrapper{
        width: 320px;
        margin: 0 12px;
        @media (max-width: 1300px){
            width: 240px;
        }
        @include sm{
            width: 200px;
        }
        @include ssm{
            width: auto;
        }
    }
    .note-grid-wrapper{
        margin: 0 12px;
        flex: 1;
    }
    .note-grid{
        display: flex;
        flex-wrap: wrap;
        margin: -12px;
        .note-single{
            width: 33.33%;
            padding: 12px;
            @include md{
                width: 50%;
            }
            @include sm{
                width: 100%;
            }
        }
    }
}

/* note sidebar */
.note-sidebar{
    height: 100%;
    background: #fff;
    border-radius: 10px;
    .note-types{
        margin: 20px 0 35px 0;
    }
    ul{
        li a{
            color: $text-grey3;
            font-size: 14px;
            display: flex;
            align-items: center;
            min-height: 38px;
            padding: 0 20px;
            border-radius: 4px;
            transition: $transition-base;
            svg{
                color: $extra-light;
                width: 18px;
                margin-right: 13px;
            }
            span{
                width: 10px;
                height: 10px;
                display: inline-block;
                border-radius: 50%;
                background: $light;
                margin-right: 14px;
            }
            &.active{
                color: $primary;
                background: rgba($primary, 0.1);
                svg{
                    color: $primary;
                }
            }
            &:hover{
                color: $primary;
                background: rgba($primary, 0.1);
            }
        }
    }
    .note-labels{
        p{
            padding: 0 20px;
            font-size: 12px;
            color: $light-gray;
            margin-bottom: 7px;
            svg{
                width: 18px;
                color: $text-grey1;
                margin-right: 6px;
            }
        }
        .label-personal{
            span{
                background: $primary;
            }
        }
        .label-work{
            span{
                background: $success;
            }
        }
        .label-social{
            span{
                background: $warning;
            }
        }
        .label-important{
            span{
                background: $info;
            }
        }
    }
}

/* note card */
.notes-wrapper{
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    .row{
        margin-bottom: -30px;
    }
}
.note-card{
    border-radius: 10px;
    .card{
        background: none;
    }
    .note-title{
        font-size: 16px;
        color: $dark;
        position: relative;
        display: inline-block;
        margin-bottom: 18px;
        .note-status{
            width: 7px;
            height: 7px;
            border-radius: 50%;
            margin-left: 10px;
            display: inline-block;
            background: transparent;
            position: relative;
            top: -2px;
        }
    }
    p{
        margin-bottom: 10px;
    }
}
.note-default{
    background: rgba(#dedede, 0.4);
}
.note-social{
    background: rgba($warning, 0.4);
    .note-title .note-status{
        background: $warning;
    }
}
.note-work{
    background: rgba($success, 0.4);
    .note-title .note-status{
        background: $success;
    }
}
.note-important{
    background: rgba($info, 0.4);
    .note-title .note-status{
        background: $info;
    }
}
.note-personal{
    background: rgba($primary, 0.4);
    .note-title .note-status{
        background: $primary;
    }
}

.note-action{
    display: flex;
    align-items: center;
    justify-content: space-between;
    @include e(left){
        display: flex;
        align-items: center;
        margin: 0 -5px;
        a{
            padding: 0 5px;
            svg{
                width: 16px;
                color: $gray;
            }
            &.favorite{
                svg{
                    color: $warning;
                }
            }
        }
    }
    @include e(right){
        a{
            svg{
                width: 16px;
                color: $text-grey1 !important;
            }
        }
        .label-dropdown{
            .dropdown-default{
                border-radius: 5px;
            }
        }
    }
}
.label-dropdown{
    .dropdown-default{
        left: auto;
        right: 0;
    }
    a.dropdown-item{
        position: relative;
        padding-left: 40px;
        padding-right: 40px;
        &:before{
            content: '';
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            background: transparent;
        }
        &.nl-personal:before{
            background:$primary;
        }
        &.nl-work:before{
            background:$success;
        }
        &.nl-social:before{
            background:$warning;
        }
        &.nl-important:before{
            background:$info;
        }
    }
}