@mixin side-radius($top, $side, $radius) {
    -webkit-border-#{$top}-#{$side}-radius: $radius;
    -moz-border-radius-#{$top}#{side}: $radius;
    border-#{$top}-#{$side}-radius: $radius;
}

@mixin linear-gradient($angle, $color-stops...) {
    $_angle-with-vendor-prefix: "";
    $_angle: "";
    @if $angle == "to top" or $angle == "bottom" {
        $_angle-with-vendor-prefix: bottom;
        $_angle: to top;
    } @else if $angle == "to right" or $angle == "left" {
        $_angle-with-vendor-prefix: left;
        $_angle: to right;
    } @else if $angle == "to bottom" or $angle == "top" {
        $_angle-with-vendor-prefix: top;
        $_angle: to bottom;
    } @else if $angle == "to left" or $angle == "right" {
        $_angle-with-vendor-prefix: right;
        $_angle: to left;
    } @else if $angle == "to top right" or $angle == "bottom left" {
        $_angle-with-vendor-prefix: bottom left;
        $_angle: to top right;
    } @else if $angle == "to bottom right" or $angle == "top left" {
        $_angle-with-vendor-prefix: top left;
        $_angle: to bottom right;
    } @else if $angle == "to bottom left" or $angle == "top right" {
        $_angle-with-vendor-prefix: top right;
        $_angle: to bottom left;
    } @else if $angle == "to top left" or $angle == "bottom right" {
        $_angle-with-vendor-prefix: bottom right;
        $_angle: to top left;
    } @else {
        $_angle-with-vendor-prefix: $angle % 360;
        $_angle: (90 - $angle) % 360;
    }
    background: -webkit-linear-gradient($_angle-with-vendor-prefix, $color-stops);
    background: -moz-linear-gradient($_angle-with-vendor-prefix, $color-stops);
    background: -o-linear-gradient($_angle-with-vendor-prefix, $color-stops);
    background: -ms-linear-gradient($_angle-with-vendor-prefix, $color-stops);
    background: linear-gradient($_angle, $color-stops);
}

.repo-widget {
    &.github {
        &.normal {
            display: block;
            font-family: Helvetica, arial, freesans, clean, sans-serif;
            margin: 10px;
            width: 500px;

            p {
                font-family: inherit;
                margin: 0;
                padding: 0;
            }

            .header {
                @include side-radius(top, left, 10px);
                @include side-radius(top, right, 10px);

                background: #fafbfd;
                @include linear-gradient(top, #fafbfd 0%, #ebebeb 100%);

                border: 1px #EAEAEA solid;
                height: 20px;
                padding: 10px;

                a {
                    color: #4183c4;
                    font-size: 18px;
                    font-weight: bold;
                    text-decoration: none;
                }

                img {
                    float: right;

                }
            }

            .information {
                background-color: #FAFAFA;
                border-left: 1px #EAEAEA solid;
                border-right: 1px #EAEAEA solid;
                padding: 10px;
                text-align: center;

                .links {
                    @include side-radius(top, left, 5px);
                    @include side-radius(bottom, left, 5px);

                    border: 1px #EAEAEA solid;
                    display: inline-block;

                    div {
                        background: #f9f9f9;
                        @include linear-gradient(top, #f9f9f9 0%, #ebebeb 100%);

                        border-right: 1px #E7E7E7 solid;
                        color: #000;
                        cursor: pointer;
                        display: inline-block;
                        float: left;
                        font-size: 10px;
                        font-weight: bold;
                        padding: 2px 10px;

                        &:first-child {
                            @include side-radius(top, left, 5px);
                            @include side-radius(bottom, left, 5px);
                        }

                        &.active {
                            background: #f9f9f9;
                            @include linear-gradient(top, #5A8FCA 0%, #3A66AE 100%);

                            color: #ffffff;
                        }
                    }

                    input {
                        border: none;
                        height: 23px;
                        padding: 0 5px;
                        width: 225px;
                    }
                }

                .description p {
                    color: #666;
                    font-size: 13px;
                    font-weight: 300;
                    padding: 10px;
                    text-align: left;
                }
            }

            .commits {
                background-color: #FAFAFA;
                border: 1px #EAEAEA solid;
                font-family: inherit;
                margin: 0;
                padding: 10px;

                li {
                    list-style-type: none;

                    a {
                        color: #000000;
                        text-decoration: none;
                    }

                    .info {
                        color: #888888;
                        font-family: Monaco, Courier, monospace;
                        font-size: 12px;

                        .commit {
                            float: left;
                        }

                        .timestamp {
                            float: right;
                        }
                    }

                    .message {
                        color: #666;
                        font-size: 13px;
                        margin: 10px 0;
                    }
                }
            }
        }
    }
}