@prefix: graphjs;

@{prefix}-star-button.@{prefix}-root {
    display: inline-block;
    width: auto;
    height: 3em;
    // ThemeOption: color: @text-color-normal;
    vertical-align: middle;
    .@{prefix}-content {
        .no-padding !important;
        background-color: transparent !important;
        a {
            display: inline-block;
            overflow: hidden;
            width: auto;
            height: inherit;
            vertical-align: middle;
            .border-radius(inherit);
            .@{prefix}-icon {
                display: block;
                float: left;
                position: relative;
                width: 3em;
                height: 3em;
                text-align: center;
                .border-radius(inherit);
                &.@{prefix}-default {
                    svg {
                        path {
                            fill: desaturate(orange, 70%);
                        }
                    }
                }
                &.@{prefix}-like {
                    svg {
                        path {
                            fill: desaturate(dodgerblue, 70%);
                        }
                    }
                }
                &.@{prefix}-love {
                    svg {
                        padding-top: 3px;
                        padding-bottom: 1px;
                        path {
                            fill: desaturate(crimson, 70%);
                        }
                    }
                }
                &.@{prefix}-save {
                    svg {
                        padding-top: 3px;
                        padding-bottom: 1px;
                        path {
                            fill: desaturate(lightseagreen, 70%);
                        }
                    }
                }
                &::before {
                    content: '';
                    display: block;
                    position: absolute;
                    top: 50%;
                    right: 50%;
                    bottom: 50%;
                    left: 50%;
                    width: 0%;
                    height: 0%;
                    vertical-align: middle;
                    .border-radius(@border-radius-full);
                    .transition(all .35s ease);
                }
                svg {
                    display: inline-block;
                    position: relative;
                    width: 50%;
                    height: 50%;
                    margin: 25%;
                    vertical-align: middle;
                    path {
                        fill: desaturate(silver, 65%);
                    }
                }
            }
            .@{prefix}-text {
                display: block;
                float: left;
                position: relative;
                top: 1px; // To visually improve vertical centering
                width: auto;
                height: 2em;
                margin: 0;
                margin-right: .5em;
                // ThemeOption: color: @text-color-normal;
                font-size: 1.5em;
                line-height: 2em;
                letter-spacing: .015em;
                .disable-selection;
            }
            &:hover {
                .@{prefix}-icon {
                    &.@{prefix}-default {
                        &::before {
                            background-color: fade(orange, 15%);
                        }
                    }
                    &.@{prefix}-like {
                        &::before {
                            background-color: fade(dodgerblue, 15%);
                        }
                    }
                    &.@{prefix}-love {
                        &::before {
                            background-color: fade(crimson, 15%);
                        }
                    }
                    &.@{prefix}-save {
                        &::before {
                            background-color: fade(lightseagreen, 15%);
                        }
                    }
                    &::before {
                        top: -25%;
                        right: -25%;
                        bottom: -25%;
                        left: -25%;
                        width: 150%;
                        height: 150%;
                        background-color: fade(silver, 15%);
                    }
                }
            }
            &.@{prefix}-active {
                .@{prefix}-icon {
                    &.@{prefix}-default {
                        &::before {
                            background-color: orange;
                        }
                        svg {
                            path {
                                fill: orange;
                            }
                        }
                    }
                    &.@{prefix}-like {
                        &::before {
                            background-color: dodgerblue;
                        }
                        svg {
                            path {
                                fill: dodgerblue;
                            }
                        }
                    }
                    &.@{prefix}-love {
                        &::before {
                            background-color: crimson;
                        }
                        svg {
                            path {
                                fill: crimson;
                            }
                        }
                    }
                    &.@{prefix}-save {
                        &::before {
                            background-color: lightseagreen;
                        }
                        svg {
                            path {
                                fill: lightseagreen;
                            }
                        }
                    }
                    &::before {
                        top: 50%;
                        right: 50%;
                        bottom: 50%;
                        left: 50%;
                        width: 0%;
                        height: 0%;
                        background-color: silver;
                    }
                    svg {
                        path {
                            fill: silver;
                        }
                    }
                }
            }
        }
    }
}