@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"));
    @include mixin_icons.icons(("checkmark"));

    a, button {
        cursor: pointer;
        border-radius: variable.$border-radius;
        color: var(--text-color2);
        display: inline-flex;
        align-items: center;
        font-size: 0.9em;
        padding: .33rem .37rem .37rem .33rem;

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

        &:focus-visible {
            outline: .125em solid var(--accent-color);
        }
    }

    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);
}

.copy-as-markdown::before {
    mask-image: var(--icon-copy);
}

.copy-as-markdown.success::before {
    mask-image: var(--icon-checkmark);
}

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

@media (hover: hover) {
    .page-actions a, .page-actions button {
        &:hover {
            color: var(--accent-color);
            background-color: var(--bg-color2);
        }

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

@media (min-width: variable.$screen-0) {
    .page-actions a, .page-actions button {
        &::before {
            margin-right: .25rem;
        }
    }
}

@media (min-width: variable.$screen-0) and (max-width: variable.$screen-2) {
    .edit-source::after {
        content: "Edit";
    }

    .copy-as-markdown::after {
        content: "Copy";
    }
}

@media (min-width: variable.$screen-2) {
    .edit-source::after {
        content: "Edit page";
    }

    .copy-as-markdown::after {
        content: "Copy content";
    }
}
