@import "style.scss";

$sidenote-width: 350px;
$sidenote-offset: 15px;

.sidenote {
    &.right .sidenote-content {
        right: 0;
        margin-right: -($sidenote-width + $sidenote-offset);
    }

    &.left .sidenote-content {
        left: 0;
        margin-left: -($sidenote-width + $sidenote-offset);
    }

    &:hover {
        .sidenote-label {
            background-color: $primary-color;
            color: white;
        }

        .sidenote-content {
            border: 2px dashed;
            padding: 9px;
            border-color: $primary-color;
        }
    }
}

.sidenote-label {
    border-bottom: 2px solid $primary-color;
}

.sidenote-content {
    display: block;
    position: absolute;
    width: $sidenote-width;
    margin-top: -1.5em;

    @include bordered-block;
    padding: 10px;
    box-sizing: border-box;
    text-align: left;
}