/**
 * This file provides the design styles for the page specific tool bar.
 */

/*
 FIXME
.pagetools-item(edit, 1);
.pagetools-item(create, 2);
.pagetools-item(show, 4);
.pagetools-item(source, 5);
.pagetools-item(draft, 3);
.pagetools-item(revs, 7, revisions);
.pagetools-item(backlink, 8, backlink);
.pagetools-item(top, 10);
.pagetools-item(revert, 6, revert);
.pagetools-item(subscribe, 9, subscribe);
.pagetools-item(mediaManager, 11);
.pagetools-item(back, 12);
.pagetools-item(img_backto, 12);
*/

#dokuwiki__aside {
    @media @screen_max-md {
        display: none !important;
    }
}

nav#dokuwiki__pagetools {
    @toolbox-size: 30px;

    @page-tools_svg-size: 25px;
    @page-tools_svg-space: (@toolbox-size - @page-tools_svg-size) / 2;
    @item-width: (@page-tools_svg-size + @page-tools_svg-space + @page-tools_svg-space);
    @item-height: (@page-tools_svg-size + @page-tools_svg-space);

    top: 3.05rem;
    position: absolute;

    width: @item-width;

    @media @screen_min-md {
        right: -2.5rem;
    }

    @media @screen_max-md {
        right: 8px;
    }

    @media @screen_max-xxs {
        display: none;
    }
    div.tools {
        position: fixed;
        width: @item-width;
    }

    ul {
        position: absolute;
        right: 0;
        text-align: right;
        margin: 0;
        padding: 0;
        /* add transparent border to prevent jumping when proper border is added on hover */
        border: 1px solid transparent;

        li {
            padding: 0;
            margin: 0;
            list-style: none;

            a {
                display: inline-table;
                /* add transparent border to prevent jumping when proper border is added on focus */
                border: 1px solid transparent;
                white-space: nowrap;
                vertical-align: middle;
                height: @item-height;

                position: relative;
                line-height: 20px;
                font-size: @font-size-default;
                padding: 2px 0 2px 2px;

                @media @screen_min-md {
                    color: @ini_nav_menu_color;
                }

                @media @screen_max-md {
                    color: @ini_existing;
                }

                &::before {
                    display: none;
                }

                &:hover,
                &:focus,
                &:active {
                    background-color: transparent;
                }

                &:focus {
                    box-shadow: @box-shadow;
                    background-image: none;
                    background-color: @ini_background;
                    color: @ini_existing;

                    span {
                        position: relative;
                        display: inline;
                        width: auto;
                        height: auto;
                    }

                    svg {
                        fill: @ini_existing;
                    }
                }

                span {
                    .sr-only();

                    padding-right: .5rem;
                    padding-left: .3rem;
                }

                svg {
                    display: inline-block;
                    width: @page-tools_svg-size;
                    height: @page-tools_svg-size;
                    vertical-align: middle;
                    border: solid 1px transparent;
                    margin: @page-tools_svg-space;

                    @media @screen_min-md {
                        fill: @ini_nav_menu_color;
                    }

                    @media @screen_max-md {
                        fill: @ini_existing;
                    }
                }

                &.top {
                    margin-top: 1em;
                }
            }
        }
    }

    &:hover {
        ul {
            box-shadow: @box-shadow; // @box-shadow-offset;
            background-color: @ini_background;
            border-color: @wikiicons-border;

            li {
                color: @ini_existing;

                a {
                    box-shadow: none;
                    background-image: none;
                    border-color: transparent;
                    color: inherit;

                    svg {
                        border: solid 1px transparent;
                        border-radius: @ini_default_border_radius;
                        fill: @ini_existing;
                        transition: @transition background-color, @transition border-color, @transition fill;
                    }

                    &:hover,
                    &:focus,
                    &:active {
                        svg {
                            background-color: @ini_existing;
                            border-color: @ini_existing;
                            fill: @ini_background;
                        }
                    }

                    span {
                        position: static;
                        width: auto;
                        height: auto;
                        margin: auto;
                    }
                }
            }
        }
    }
}