@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';

.note {
    min-width: 95%;
    display: flex;
    position: relative;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    cursor: pointer;
    min-height: ($line-height-base * 4);

    &:before {
        content: "";

        position: absolute;
        top: 0;
        bottom: 0;
        z-index: -1;
        display: block;
        width: 2px;
    }

    &:hover {
        color: darkgray;
        border-bottom-color: black;
    }

    &:hover .delete-icon {
        opacity: 1;
        color: black;
    }

    .start, .finish {
        position: absolute;
        padding-right: 5rem;
        font-size: .72rem;
    }

    .start {
        top: 0;
        left: 0;
    }
    .finish {
        bottom: 0;
        left: 0;
    }

    &-content {
        min-width: 95%;
        font-size: .8rem;

        white-space: pre-wrap;
        overflow-wrap: break-word;
    }
}

.delete-icon {
    font-size: 1.2rem;
    opacity: 0;
}