@mixin morelink() {
    position: relative;
    padding-left: 2em;
    margin-left: 0.5em;
    // arrow position does not work on multiple lines
    white-space: nowrap;

    &:before {
        content: "⟶";
        text-decoration: none !important;
        font-weight: normal !important;
        position: absolute;
        line-height: 1;
        left: 0;
        top: 50%;
        margin-top: -0.5em;
    }
}

a, span {
    &.more, &.more_uppercase {
        @include morelink();
        text-transform: uppercase;
        font-weight: bold;
    }
    &.more_link {
        @include morelink();
        text-transform: uppercase;
        font-size: 80%;
    }
}

// morelinks next to headers
.morelink_header {
    position: relative;
    .more_link {
        position: absolute;
        right: 0;
        bottom: 0;
    }
}
