@use "variable";
@use "mixin_icons";

.body .page-actions {
    margin-top: 1.5em;
    float: right;
}

.body-header .page-actions {
    padding-left: .5em;
    margin-top: 1em;
    margin-right: 1em;
}

.page-actions {
    /* Ensure icon inclusion */
    @include mixin_icons.icons(("edit"));

    a, button {
        cursor: pointer;
        border-radius: 100%;
        color: var(--text-color2);
        display: inline-block;
        padding: .33rem .37rem .37rem .33rem;
        margin-left: -.1rem;

        &::before {
            display: block;
            content: '';
            width: 1.25rem;
            height: 1.25rem;
            background-color: var(--text-color2);
            mask-image: var(--icon-edit);
            mask-repeat: no-repeat;
        }

        &:hover::before, &:focus::before {
            background-color: var(--accent-color);
        }

        &:hover, &:focus {
            background-color: var(--bg-color2);
        }
    }

    height: 1.95rem;
    border-radius: .75em;
    background-color: var(--bg-color1);
    box-shadow: -.5em 0 .5em 0 var(--bg-color1);
}

.edit-source::before {
    mask-image: var(--icon-edit);
}

@media print {
    .page-actions {
        display: none;
    }
}
