@prefix: graphjs;

@{prefix}-promo.@{prefix}-root {
    position: absolute;
    z-index: 10;
    opacity: .5;
    width: auto;
    height: 1.6em;
    margin: 0 auto;
    font-size: .8em;
    line-height: 1.6em;
    background-color: fade(black, 25%);
    .transition(all .35s ease);
    &:hover {
        opacity: 1;
    }
    &.@{prefix}-top {
        top: 0;
        border-bottom-left-radius: .5em;
        border-bottom-right-radius: .5em;
    }
    &.@{prefix}-bottom {
        bottom: 0;
        border-top-left-radius: .5em;
        border-top-right-radius: .5em;
    }
    &.@{prefix}-left {
        left: 1em;
    }
    &.@{prefix}-right {
        right: 1em;
    }
    &.@{prefix}-center {
        left: 50%;
        transform: translate(calc(-50% - 1em), 0);
    }
    &.@{prefix}-detached {
        margin: 1em;
    }
    &.@{prefix}-rounded {
        border-radius: .5em !important;
    }
    a {
        overflow: hidden;
        display: inline-block;
        width: auto;
        height: inherit;
        padding: 0 .4em;
        text-align: center;
        &::before {
            content: "\1F308\FE0F";
            display: inline-block;
            font-size: .9em;
            letter-spacing: -.15em;
        }
        svg {
            display: inline-block;
            width: auto;
            height: 1.85em;
            padding-top: .4em;
            vertical-align: middle;
            path {
                fill: white;
            }
        }
    }
}