@mixin starspins-variables {
    $primary-font-family: "helvetica", sans-serif !global;
    $secondary-font-family: "helvetica", sans-serif !global;
    $body-font-family: "helvetica", sans-serif !global;

    $primary-color: darken(rgba(255, 255, 255, 0.8), 80%) !global;
    $primary-color-dark: white !global;

    $secondary-color: #ffd859 !global;
    $secondary-color-dark: #ffd859 !global;

    $tertiary-color: #D3D3D3 !global;
    $tertiary-color-dark: #D3D3D3 !global;

    $light-color: #630 !global;
    $body-font-color: white !global;
    $link-color: $body-font-color !global;
    $link-color-dark: $body-font-color !global;
}

@mixin starspins-overrides {
    body {
        background: black;
    }
    .unicorn {
        &-page {
            background: black;
            border: 0;
        }

        &-content {
            .grids {
                background: black;
                border: 0;

                &-panel {
                    background: none;
                    border-top: 3px solid $secondary-color;
                    border-bottom: 3px solid $secondary-color;
                }
            }
        }

        &-overlay {
            background: darken(rgba(255, 255, 255, 0.8), 85%);

            .grids {
                background: black;
                border: 0;
            }
        }
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        text-transform: uppercase;
        color: $body-font-color;
    }

    .btn {
        border: solid 1px $primary-color-dark;
        border-radius: 6px;
        background: $primary-color;
        color: $light-color;
        font-weight: bold;
        font-family: $primary-font-family;
        background: linear-gradient(to bottom, #ffd859, #ffbf43);
        border-radius: 5px;
        text-transform: capitalize;

        &.btn-primary {
            color: $body-font-color;
            background: $primary-color;
            &:focus,
            &:hover,
            &:active,
            &.active {
                background: $primary-color;
                color:  $body-font-color;
            }
        }

        &.btn-secondary {
            background: $secondary-color;
            border-color: $secondary-color-dark;
            color: $light-color;
        }

    }

    .pagination {
        .page-item {
            a {
                background: lighten(black, 30%);
            }

            &.active {
                a {
                    background: $body-font-color;
                }
            }
        }
    }

    .switch {
        &-slider {
            background-color: lighten(black, 30%);
        }

        &-slider:before {
            background-color: black;
        }

        input:checked + &-slider {
            background-color: $secondary-color;
        }

        input:focus + &-slider {
            box-shadow: 0 0 1px $secondary-color;
        }
    }
}