@import "~bootstrap";
@import "~bootstrap-icons";

.notes {
    .note {
        position: relative;
        background: #eee;
        .content {
            font-size: 1rem;
            padding-right: 20%;
        }
        .time {
            font-size: .5rem;
            text-align: right;
        }
        .delete-wrapper,
        .edit-wrapper{
            display: none;
            position: absolute;
            top: 0;
            right: 0;
            width: 10%;
            height: 100%;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            .bg {
                background: red;
                opacity: .7;
                width: 100%;
                height: 100%;
            }
            .delete,
            .edit {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: white;
                font-weight: bold;
                font-size: 1.2rem;
            }
        }
        .edit-wrapper {
            right: 10%;
            .bg {
                background: green;
            }
        }
        &:hover {
            .delete-wrapper,
            .edit-wrapper{
                display: flex;
            }
        }
    }
}