/**
 * This file provides the design styles for the page specific tool bar.
 *
 * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
 */

/*
 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-width: 32px;

    top: 3.05rem;
    z-index: 100;

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

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

    &:hover {
        ul {
            li {
                a {
                    box-shadow: none;
                    background-image: none;
                    border-color: transparent;
                }
            }
        }
    }

    ul {
        li {
            * {
                font-size: @font-size-default;
            }

            &.plugin_move_page {
                a {
                    opacity: .6;
                    color: @color-nav;

                    * {
                        color: inherit;
                    }

                    &:hover,
                    &:focus,
                    &:active {
                        color: @color-nav-hover;
                        background-color: #fff;
                        opacity: 1;
                    }
                }
            }

            a {
                .fontello-double();

                position: relative;
                min-height: @toolbox-width; // for nav:hover
                opacity: .6;
                color: @color-nav;
                font-size: @font-size-default;

                * {
                    color: inherit;
                }

                &::before {
                    display: none;
                }

                &::after {
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: @toolbox-width;
                    height: 100%;
                    box-sizing: border-box;
                    font-size: @font-size-big;
                    margin: 0;
                    padding-top: .2rem;

                    @media @screen_min-md {
                        background-color: @color-site-bg;
                    }

                    @media @screen_max-xlg {
                        padding-top: .25rem;
                    }

                    @media @screen_max-lg {
                        padding-top: .4rem;
                    }

                    @media @screen_max-md {
                        background-color: #FFF;
                        padding-top: 0;
                    }
                }

                &:hover,
                &:focus,
                &:active {
                    opacity: 1;
                    color: @color-nav-hover;
                    background-color: #FFF;
                }

                &.source {
                    .icon-code();

                    &::after {
                        @media @screen_min-xlg {
                            padding-top: .25rem;
                        }

                        @media @screen_max-xlg {
                            padding-top: .35rem;
                        }

                        @media @screen_max-md {
                            padding-top: .05rem;
                        }
                    }
                }

                &.edit {
                    .icon-pencil();
                }

                &.revs {
                    .icon-revisions-history();
                }

                &.backlink {
                    .icon-link();
                }

                &.top {
                    .icon-up-bold();
                    margin-top: 1em;

                    &::after {
                        @media @screen_min-lg {
                            padding-top: .15rem;
                        }

                        @media @screen_max-lg {
                            padding-top: .25rem;
                        }

                        @media @screen_max-md {
                            padding-top: .05rem;
                        }
                    }
                }

                &.plugin_bookcreator_addtobook {
                    .icon-book-open();
                }

                &.export_pdf {
                    .icon-file-pdf();
                }

                &.show {
                    .icon-file-text();
                }
            }
        }
    }
/*
<ul>
  <li><a href="#" class="action edit" title="Diese Seite bearbeiten [E]">Diese Seite bearbeiten</a></li>
  <li><a href="#" class="action revs" title="Ältere Versionen [O]">Ältere Versionen</a></li>
  <li><a href="#" class="action backlink" title="Links hierher">Links hierher</a></li>
  <li><a href="#" class="action export_pdf" title="PDF exportieren"><span>PDF exportieren</span></a></li>
  <li><a href="#" class="action source" title="PDF exportieren"><span>source</span></a></li>
  <li><a href="#" class="action show" title="PDF exportieren"><span>show</span></a></li>
  <li><a href="#" class="action plugin_bookcreator_addtobook" title="PDF exportieren"><span>was auch immer</span></a></li>
  <li><a href="#" class="action top" title="Nach oben [T]">Nach oben</a></li>
</ul>
*/
    &:hover {
        ul {
            background-color: #fff;
            box-shadow: @box-shadow-offset;

            li {
                a {
                    opacity: .8;

                    &::after {
                        background-color: #FFF;
                    }

                    &:hover,
                    &:focus,
                    &:active {
                        opacity: 1;
                    }
                }
            }
        }
    }
}