@import 'variables.less';
@import 'note.less';

.notes {
    padding: 8px;
    -moz-column-gap: 12px;
    -moz-column-fill: balance;
    -webkit-column-gap: 12px;
    column-gap: 12px;
    width: 99%;

    @media (min-width: 368px) {
        column-count: 1;
        -moz-column-count: 1;
        -webkit-column-count: 1;
    }
    @media (min-width: 768px) {
        column-count: 2;
        -moz-column-count: 2;
        -webkit-column-count: 2;
    }
    @media (min-width: 1024px) {
        column-count: 3;
        -moz-column-count: 3;
        -webkit-column-count: 3;
    }
    @media (min-width: 1440px) {
        column-count: 4;
        -moz-column-count: 4;
        -webkit-column-count: 4;
    }
    @media (min-width: 1920px) {
        column-count: 5;
        -moz-column-count: 5;
        -webkit-column-count: 5;
    }

    .note {
        .note(400px);
    }

    .editor {
        padding-top: 10px;
        text-align: center;

        &> * {
            margin: 1px;
        }

        textarea {
            width: 93%;
            height: 250px;
        }
    }

    #editor input {
        height: 28px;
    }

    .tags {
        list-style-type: none;
    }
}

.shareNote {
    -moz-column-gap: 12px;
    -moz-column-fill: balance;
    -webkit-column-gap: 12px;
    column-count: 1;
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-gap: 12px;
    width: 99%;

    .note {
        .note(100%);
    }
}
