/* =Starred Plugin
----------------------------------------------- */

.dropdown.bookmarks {
    .dropdown-menu {
        min-width: 400px;

        li {
            display: flex;
            flex-direction: row;

            > * {
                flex-grow: 1;
                cursor: pointer;
                line-height: 19px;

                &.curid {
                    font-weight: normal!important;
                    a {
                        font-weight: bold!important;
                        &:before {
                            font-family: 'bootstrap-icons';
                            content: "\F231";
                            font-size: 16px;
                            padding-right: 4px;
                            // line-height: 16px;
                            vertical-align: middle;
                        }
                    }
                }
                &.plugin__starred {
                    flex-grow: 0;
                    flex-shrink: 1;
                    width: 48px;

                    span {
                        svg {
                            display:none;
                        }
                        &.starred:before {
                            font-family: "bootstrap-icons";
                            font-size: 16px;
                        }
                        &.on:before { content: '\F586'; }
                        &.off:before { content: '\F588'; }
                    }
                }
            }
            &:last-child {
                a {
                    &[data-wiki-id]{
                        border-bottom-right-radius: 0px!important;
                    }
                    &.plugin__starred {
                        border-bottom-left-radius: 0px!important;
                    }
                }
            }
        }
    }
}

@media only screen and (min-width: 960px) {
    .page-tools {
        a.plugin__starred {
            span {
                width: 60px;
                height: 60px;
                background: @ini_text_neu;
                color: @ini_background;
                font-size: 30px;
                line-height: 2;

                -webkit-border-radius: 50%;
                -moz-border-radius:    50%;
                border-radius:         50%;
                transition:         all 0.25s ease-in-out;

                svg {
                    display:none;
                }

                &.starred:before { font-family: "bootstrap-icons"; }
                &.on:before { content: '\F586'; }
                &.off:before { content: '\F588'; }
            }

            &:hover span {
                background: @ini_background;
                color: @ini_text_alt;
            }

            &:focus {
                outline: none;

                span {
                    background-color: @ini_theme_color;
                    color: #fff;
                }
            }
        }
    }
}

@media only screen and (max-width: 959px) {
    .page-tools {
        a.plugin__starred {
            span {
                width: 60px;
                height: 60px;
                background: @ini_text_neu;
                color: @ini_background;
                font-size: 30px;
                line-height: 2;

                -webkit-border-radius: 50%;
                -moz-border-radius:    50%;
                border-radius:         50%;
                transition:         all 0.25s ease-in-out;

                svg {
                    display:none;
                }

                &.starred:before { font-family: "bootstrap-icons"; }
                &.on:before { content: '\F586'; }
                &.off:before { content: '\F588'; }
            }

            &:hover span {
                background: @ini_background;
                color: @ini_text_alt;
            }

            &:focus {
                outline: none;

                span {
                    background-color: @ini_theme_color;
                    color: #fff;
                }
            }
        }
    }
}

@media only screen and (max-width: 767px) {
    .page-tools {
        a.plugin__starred {
            span {
                width: 48px;
                height: 48px;
                background: @ini_text_neu;
                color: @ini_background;
                font-size: 24px;
                line-height: 2;

                -webkit-border-radius: 50%;
                -moz-border-radius:    50%;
                border-radius:         50%;
                transition:         all 0.25s ease-in-out;

                svg {
                    display:none;
                }

                &.starred:before { font-family: "bootstrap-icons"; }
                &.on:before { content: '\F586'; }
                &.off:before { content: '\F588'; }
            }

            &:hover span {
                background: @ini_background;
                color: @ini_text_alt;
            }

            &:focus {
                outline: none;

                span {
                    background-color: @ini_theme_color;
                    color: #fff;
                }
            }
        }
    }
}