/**
 * This styles the section editing buttons and highlighting
 */
#dokuwiki__content.main-content {
    @button-margin: .5rem; // FIXME shouldn't we have something in our base.less for this?

    div.section_highlight {
        clear: right; // FIXME why?
        background: repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 10px,
            @ini_background_alt 10px,
            @ini_background_alt 20px,
        );
    }

    .secedit button {
        clear: both;
        font-size: 100%;
        margin-top: @button-margin;
        margin-bottom: @button-margin;
    }

    .editbutton_section {
        position: relative;
        z-index: 2;
        top: 0;
        float: right;
        margin-top: 0;

        button {
            background-color: transparent;
            color: transparent;
            border-color: transparent;
            margin-top: -1em;

            &::after {
                content: '';
                display: inline-block;
                background: transparent url("svg.php?svg=pencil.svg&f=link") center center no-repeat;
                height: 1em;
                width: 1em;
                background-size: contain;
                margin-left: @button-margin;
            }

            &:hover,
            &:active,
            &:focus {
                background-color: @button_color;
                color: @button_background;
                border-color: @button_background;
            }
        }
    }
}